Source: https://primereact.org/inputotp/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

InputOtp

InputOtp groups a collection of contents in tabs.

Import#

import { InputOtp } from 'primereact/inputotp';

Copy

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

Copy

Mask#

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

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

Copy

Integer Only#

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

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

Copy

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

Copy

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

Copy

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
Template
Sample
Accessibility

PrimeReact 10.9.7 by PrimeTek