Usage #
Examples #
Basic #
InputOtp is used with the v-model property for two-way value binding. The number of characters is defined with the length option, which is set to 4 by default.
Controlled #
InputOtp can be used as a controlled component with v-model.
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.
Filled #
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
Sizes #
InputOtp provides small and large sizes as alternatives to the base.
Disabled #
When disabled is present, the component becomes non-interactive.
Template #
Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.
Sample #
A sample UI implementation with templating and additional elements.
Please enter the code sent to your phone.
Forms #
InputOtp integrates seamlessly with the PrimeVue Forms library.
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. |