Input Otp is used to enter one time passwords.
import { InputOtp } from 'primeng/inputotp';
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" />
Enable the mask option to hide the values in the input fields.
<p-inputotp [(ngModel)]="value" [mask]="true" />
When integerOnly is present, only integers can be accepted as input.
<p-inputotp [(ngModel)]="value" [integerOnly]="true" />
InputOtp provides small and large sizes as alternatives to the base.
<p-inputotp [(ngModel)]="value1" size="small" />
<p-inputotp [(ngModel)]="value2" />
<p-inputotp [(ngModel)]="value3" size="large" />
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 class="custom-otp-input" (input)="events.input($event)" (keydown)="events.keydown($event)" type="text" [attr.value]="token" [maxLength]="1" />
</ng-template>
</p-inputotp>
A sample UI implementation with templating and additional elements.
Please enter the code sent to your phone.
<div class="flex flex-col items-center">
<div class="font-bold text-xl mb-2">Authenticate Your Account</div>
<p class="text-muted-color block mb-8">Please enter the code sent to your phone.</p>
<p-inputotp [(ngModel)]="value" [length]="6">
<ng-template #input let-token let-events="events" let-index="index">
<input 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-4">
<i class="pi pi-minus"></i>
</div>
</ng-template>
</p-inputotp>
<div class="flex justify-between mt-8 self-stretch">
<p-button label="Resend Code" [link]="true" class="p-0"/>
<p-button label="Submit Code"/>
</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. |