InputOtp

Input Otp is used to enter one time passwords.

Import #


import { InputOtpModule } from 'primeng/inputotp';

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.


<p-inputOtp [(ngModel)]="value"></p-inputOtp>

Mask #

Enable the mask option to hide the values in the input fields.


<p-inputOtp [(ngModel)]="value" [mask]="true"></p-inputOtp>

Integer Only #

When integerOnly is present, only integers can be accepted as input.


<p-inputOtp [(ngModel)]="value" [integerOnly]="true"></p-inputOtp>

Template #

Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.


<p-inputOtp [(ngModel)]="value">
    <ng-template pTemplate="input" let-token let-events="events">
        <input pInputText class="custom-otp-input" (input)="events.input($event)" (keydown)="events.keydown($event)" type="text" [attr.value]="token" [maxLength]="1" />
    </ng-template>
</p-inputOtp>
,

Sample #

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>
    <p-inputOtp [(ngModel)]="value" [length]="6" style="gap: 0">
        <ng-template pTemplate="input" let-token let-events="events" let-index="index">
            <input pInputText type="text" [maxLength]="1" (input)="events.input($event)" (keydown)="events.keydown($event)" [attr.value]="token" class="custom-otp-input" />
            <div *ngIf="index === 3" class="px-3">
                <i class="pi pi-minus"></i>
            </div>
        </ng-template>
    </p-inputOtp>
    <div class="flex justify-content-between mt-5 align-self-stretch">
        <p-button label="Resend Code" [link]="true" class="p-0"></p-button>
        <p-button label="Submit Code"></p-button>
    </div>
</div>

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

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.
PrimeNG 17.15.0 by PrimeTek