InputOtp

InputOtp groups a collection of contents in tabs.

Import#


import { InputOtp } from 'primereact/inputotp';

Basic#

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)}/>

Mask#

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


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

Integer Only#

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


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

Template#

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

Sample#

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