OTPInputComponent
Represents the Kendo UI OTP Input component for Angular.
Use the OTP Input to enter one-time passwords or verification codes.
Definition
Package:@progress/kendo-angular-inputs
Selector:kendo-otpinput
Export Name:Accessible in templates as #kendoOTPInputInstance="kendoOTPInput"
Syntax:
<kendo-otpinput type="number" [(ngModel)]="otpValue"></kendo-otpinput>Inputs
disabled
boolean
When true, disables the OTPInput.
false
Sets the background and border styles of the OTP Input. The default value is set by the Kendo theme.
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
Sets the total number of input fields.
4
placeholder
string
Sets the placeholder for the input fields.
readonly
boolean
When true, sets the OTPInput to read-only mode.
false
Sets the border radius of the OTP Input. The default value is set by the Kendo theme.
separator
string | OTPSeparatorIcon
Sets the separator between groups of input fields. You can use this only when groupLength is set.
spacing
boolean
Sets whether the input fields are separate or adjacent.
true
Sets the input type.
'text'
value
string
Sets the value of the component. Unfilled input fields are represented with а space.
Events
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.