OTPInputComponent

Represents the Kendo UI OTP Input component for Angular.

Use the OTP Input to enter one-time passwords or verification codes.

html

<kendo-otpinput type="number" [(ngModel)]="otpValue"></kendo-otpinput>

Selector

kendo-otpinput

Export Name

Accessible in templates as #kendoOTPInputInstance="kendoOTPInput"

Inputs

Name	Type	Default	Description
disabled	boolean	false	When true, disables the OTPInput.
fillMode	InputFillMode	'solid'	Sets the background and border styles of the OTP Input.
groupLength	number | number[]		Sets the length of the groups. If you set a number, all groups have the same length. If you set an array, each group can have a different length.
inputAttributes	{[key: string]: string}		Sets the HTML attributes of the inner input element. You cannot change attributes that are required for the component to work.
length	number	4	Sets the total number of input fields.
placeholder	string		Sets the placeholder for the input fields.
readonly	boolean	false	When true, sets the OTPInput to read-only mode.
rounded	InputRounded	'medium'	Sets the border radius of the OTP Input.
separator	string | OTPSeparatorIcon		Sets the separator between groups of input fields. You can use this only when groupLength is set.
size	InputSize	'medium'	Sets the padding of the input fields.
spacing	boolean	true	Sets whether the input fields are separate or adjacent.
type	OTPInputType	'text'	Sets the input type.
value	string		Sets the value of the component. Unfilled input fields are represented with а space.

Events

Name	Type	Description
blur	EventEmitter<any>	Fires when the user blurs the OTP Input.
focus	EventEmitter<any>	Fires when the user focuses the OTP Input.
valueChange	EventEmitter<any>	Fires when the user changes the value. This event does not fire when you change the value programmatically or through form bindings.

Methods

blur
Blurs the OTP Input.

focus
Focuses the OTP Input at the specified index provided as an argument.
Parameters index? number The index of the input to focus.