Input Otp is used to enter one time passwords.
import InputOtp from 'primevue/inputotp';
Two-way value binding is defined using v-model. The number of characters is defined with the length property, which is set to 4 by default.
<InputOtp v-model="value" />
Enable the mask option to hide the values in the input fields.
<InputOtp v-model="value" mask />
When integerOnly is present, only integers can be accepted as input.
<InputOtp v-model="value" integerOnly />
Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.
<InputOtp v-model="value">
<template #default="{ attrs, events }">
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
</template>
</InputOtp>
A sample UI implementation with templating and additional elements.
Please enter the code sent to your phone.
<div class="flex flex-column align-items-center">
<div class="font-bold text-xl mb-2">Authenticate Your Account</div>
<p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
<InputOtp v-model="value" :length="6" style="gap: 0">
<template #default="{ attrs, events, index }">
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
<div v-if="index === 3" class="px-3">
<i class="pi pi-minus" />
</div>
</template>
</InputOtp>
<div class="flex justify-content-between mt-5 align-self-stretch">
<Button label="Resend Code" link class="p-0"></Button>
<Button label="Submit Code"></Button>
</div>
</div>
Input OTP uses a set of InputText components, refer to the InputText component for more information about the screen reader 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. |