InputOtp
Input Otp is used to enter one time passwords.
Two-way value binding is defined using ngModel. The number of characters is defined with the length property, which is set to 4 by default.
Usage #
Examples #
Basic #
Two-way value binding is defined using ngModel. The number of characters is defined with the length property, which is set to 4 by default.
Mask #
Enable the mask option to hide the values in the input fields.
Integer Only #
When integerOnly is present, only integers can be accepted as input.
Sizes #
InputOtp provides small and large sizes as alternatives to the base.
Template #
Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.
Forms #
Template Driven #
Reactive Forms #
InputOtp can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
Sample #
A sample UI implementation with templating and additional elements.
Please enter the code sent to your phone.
Accessibility #
Screen Reader
Input OTP uses a set of InputText components, refer to the InputText component for more information about the screen reader support.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the input otp. |
| right arrow | Moves focus to the next input element. |
| left arrow | Moves focus to the previous input element. |
| backspace | Deletes the input and moves focus to the previous input element. |
