InputOtp

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.

Authenticate Your Account

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>

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

KeyFunction
tabMoves focus to the input otp.
right arrowMoves focus to the next input element.
left arrowMoves focus to the previous input element.
backspaceDeletes the input and moves focus to the previous input element.