Input Otp is used to enter one time passwords.
import { InputOtpModule } 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" />
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>
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>
<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)"
(paste)="events.paste($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 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. |
API defines helper props, events and others for the PrimeNG InputOtp module.
Input Otp is used to enter one time passwords.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
| name | parameters | description | |
|---|---|---|---|
| onChange | event : InputOtpChangeEvent | Callback to invoke on value change. | |
| onFocus | event : Event | Callback to invoke when the component receives focus. | |
| onBlur | event : Event | Callback to invoke when the component loses focus. |
Defines the templates used by the component.
Defines the custom events used by the component's emitters.
Defines the custom events used by the component's emit.
Custom change event.