Source: https://primeng.org/inputotp

Primary

Surface

PresetsAuraMaterialLaraNora

Ripple

RTL
v20
- v20
- v19
- v18
- v17
FEATURES
API
THEMING
PASSTHROUGH

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" />

Mask #

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

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

Integer Only #

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

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

Sizes #

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" />

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 #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>

Forms #

Template Driven

Submit

        @if (otpModel.invalid && (otpModel.touched || exampleForm.submitted)) {
            <p-message severity="error" size="small" variant="simple">Passcode is required.</p-message>
        }
    </div>
    <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button>
</form>

Reactive Forms

InputOtp can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

Submit

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-4"> <div class="flex flex-col gap-1"> <p-inputotp formControlName="value" [invalid]="isInvalid('value')" /> @if (isInvalid('value')) { <p-message severity="error" size="small" variant="simple">Passcode is required.</p-message> } </div> <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button> </form>

Sample #

A sample UI implementation with templating and additional elements.

Authenticate Your Account

Please enter the code sent to your phone.

Resend CodeSubmit Code

<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>

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

| 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. |

Import
Basic
Mask
Integer Only
Sizes
Template
Forms
- Template Driven
- Reactive Forms
Sample
Accessibility

Templates

Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.

PrimeNG 20.3.0 by PrimeTek