InputOtp groups a collection of contents in tabs.

import { InputOtp } from 'primereact/inputotp';

The number of characters is defined with the length property, which is set to 4 by default.

<InputOtp value={token} onChange={(e) => setTokens(e.value)}/>

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

<InputOtp value={token} onChange={(e) => setTokens(e.value)} mask/>

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

<InputOtp value={token} onChange={(e) => setTokens(e.value)} integerOnly/>

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

<InputOtp value={token} onChange={(e) => setTokens(e.value)} inputTemplate={customInput}/>

A sample UI implementation with templating and additional elements.

Authenticate Your Account

Please enter the code sent to your phone.

<div className="flex flex-column align-items-center">
    <p className="font-bold text-xl mb-2">Authenticate Your Account</p>
    <p className="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
    <InputOtp value={token} onChange={(e) => setTokens(e.value)} length={6} inputTemplate={customInput} style={{gap: 0}}/>
    <div className="flex justify-content-between mt-5 align-self-stretch">
        <Button label="Resend Code" link className="p-0"></Button>
        <Button label="Submit Code"></Button>

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

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.