InputOtp

InputOtp is used to enter one time passwords.

Usage#

import { InputOtp } from 'primereact/inputotp';
<InputOtp>
    <InputOtp.Text />
</InputOtp>

Examples#

Basic#

InputOtp requires a InputOtp.Text component to display the input fields.

import { InputOtp } from 'primereact/inputotp';
 
export default function BasicDemo() {
    return (
        <div className="card flex justify-center">
            <InputOtp>
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
            </InputOtp>
        </div>
    );
}

Mask#

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

import { InputOtp } from 'primereact/inputotp';
 
export default function MaskDemo() {
    return (
        <div className="card flex justify-center">
            <InputOtp mask>
                {Array.from({ length: 4 }, (_, index) => (
                    <InputOtp.Text key={index} />
                ))}
            </InputOtp>
        </div>
    );
}

Integer Only#

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

import { InputOtp } from 'primereact/inputotp';
 
export default function IntegerOnlyDemo() {
    return (
        <div className="card flex justify-center">
            <InputOtp integerOnly>
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
            </InputOtp>
        </div>
    );
}

Filled#

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

import { InputOtp } from 'primereact/inputotp';
 
export default function FilledDemo() {
    return (
        <div className="card flex justify-center">
            <InputOtp variant="filled">
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
            </InputOtp>
        </div>
    );
}

Sizes#

InputOtp provides small and large sizes as alternatives to the base.

import { InputOtp } from 'primereact/inputotp';
 
export default function SizesDemo() {
    return (
        <div className="card flex flex-col items-center gap-4">
            <InputOtp size="small">
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
            </InputOtp>
            <InputOtp>
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
            </InputOtp>
            <InputOtp size="large">
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
            </InputOtp>
        </div>
    );
}

Custom#

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

import { InputOtp } from 'primereact/inputotp';
 
export default function CustomDemo() {
    return (
        <div className="card flex justify-center">
            <InputOtp>
                {Array.from({ length: 4 }, (_, index) => {
                    return (
                        <InputOtp.Text
                            key={index}
                            className="w-[40px] text-4xl appearance-none shadow-none text-center transition-all duration-200 bg-transparent border-0 border-b-2 border-b-[var(--p-inputtext-border-color)] rounded-none focus:outline-none focus:border-b-[var(--p-primary-color)]"
                        />
                    );
                })}
            </InputOtp>
        </div>
    );
}

Sample#

A sample UI implementation with templating and additional elements.

Authenticate Your Account

Please enter the code sent to your phone.

import { MinusIcon } from '@primereact/icons';
import { Button } from 'primereact/button';
import { InputOtp } from 'primereact/inputotp';
import * as React from 'react';
 
export default function SampleDemo() {
    return (
        <div className="card flex justify-center">
            <div className="flex flex-col items-center">
                <div className="font-bold text-xl mb-2">Authenticate Your Account</div>
                <p className="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
                <InputOtp className="gap-0">
                    {Array.from({ length: 6 }, (_, index) => {
                        const inputClasses = [
                            'w-12 h-12 text-2xl appearance-none text-center transition-all duration-200',
                            'border border-[var(--p-inputtext-border-color)] rounded-none bg-transparent',
                            'outline-offset-[-2px] outline-transparent transition-[outline-color] duration-300',
                            'text-[var(--p-inputtext-color)]',
                            index === 0 || index === 3 ? 'rounded-l-xl' : '',
                            index === 2 || index === 5 ? 'rounded-r-xl' : '',
                            !(index === 2 || index === 5) ? 'border-r-0' : '',
                            'focus:outline-2 focus:outline-[var(--p-focus-ring-color)]'
                        ].join(' ');
 
                        return (
                            <React.Fragment key={index}>
                                <InputOtp.Text className={inputClasses} />
                                {index === 2 && (
                                    <div className="px-4">
                                        <MinusIcon />
                                    </div>
                                )}
                            </React.Fragment>
                        );
                    })}
                </InputOtp>
                <div className="flex justify-between mt-8 self-stretch">
                    <Button variant="link" className="p-0">
                        Resend Code
                    </Button>
                    <Button>Submit Code</Button>
                </div>
            </div>
        </div>
    );
}

Accessibility#

Screen Reader Support#

Input OTP uses a set of InputText components, refer to the InputText component for more information about the screen reader support.

Keyboard Support#

KeyFunction
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.
PrimeReact 11.0.0-alpha.5 on React by PrimeTek