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 defaultValue={''}>
                <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 defaultValue={''} 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 defaultValue={''} 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 defaultValue={''} 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 defaultValue={''} size="small">
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
            </InputOtp>
            <InputOtp defaultValue={''}>
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
                <InputOtp.Text />
            </InputOtp>
            <InputOtp defaultValue={''} 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 defaultValue={''}>
                {Array.from({ length: 4 }, (_, index) => {
                    return (
                        <InputOtp.Text
                            key={index}
                            className="w-[40px] text-4xl appearance-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 defaultValue={''} 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.4 on React by PrimeTek