Getting Started with the OTPInput
This guide demonstrates how to get up and running with the Kendo UI for jQuery OTPInput.
After the completion of this guide, you will be able to achieve the following end result:
<input id="otpinput" />
<script>
$("#otpinput").kendoOTPInput({
items: [
{
groupLength: 3
},
{
groupLength: 2
},
{
groupLength: 3
}
],
placeholder: "X",
type: "number"
});
</script>
1. Create an input Element
First, create an <input> element on the page that will be used to initialize the component.
<input id="otpinput" />
2. Initialize the OTPInput
In this step, you will initialize the OTPInput from the <input> element. Upon its initialization, the OTPInput wraps the <input> element with a <div> tag.
<input id="otpinput" />
<script>
// Target the input element by using jQuery and then call the OTPInput() method.
$("#otpinput").kendoOTPInput()
</script>
3. Configure the Items
The OTPInput's items option can be configured either as a number or as an array. The latter allows you to configure the items in groups with a specified length.
<input id="otpinput" />
<script>
$("#otpinput").kendoOTPInput({
items: [
{
groupLength: 3
},
{
groupLength: 2
},
{
groupLength: 3
}
]
})
</script>
4. Configure the Placeholder
You can configure a placeholder which will be displayed when the OTPInput items have no value.
<input id="otpinput" />
<script>
$("#otpinput").kendoOTPInput({
items: [
{
groupLength: 3
},
{
groupLength: 2
},
{
groupLength: 3
}
],
placeholder:"X"
})
</script>
5. Set the Type
The OTPInput supports three types—text(default), number, and password. In the example, the type is changed to number so only numeric values can be entered.
<input id="otpinput" />
<script>
$("#otpinput").kendoOTPInput({
items: [
{
groupLength: 3
},
{
groupLength: 2
},
{
groupLength: 3
}
],
placeholder: "X",
type: "number"
});
</script>