InputOtp

InputOtp is used to enter one time passwords.

Check your email for OTP

Please enter the 6-digit code sent to your email address to reset your password.

Didn't receive code?

preview

Installation#

npx shadcn@latest add @primereact/inputotp

Usage#

import { InputOtp, InputOtpText } from '@/components/ui/inputotp';

<InputOtp>
    <InputOtpText />
</InputOtp>

Examples#

Basic#

basic-demo

import { InputOtp, InputOtpText } from '@/components/ui/inputotp';

export default function BasicDemo() {
    return (
        <div className="flex justify-center">
            <InputOtp>
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
            </InputOtp>
        </div>
    );
}

Controlled#

InputOtp can be used as a controlled component with value and onValueChange properties.

Value:

controlled-demo

'use client';
import type { InputOtpRootValueChangeEvent } from 'primereact/inputotp';
import { Button } from '@/components/ui/button';
import { InputOtp, InputOtpText } from '@/components/ui/inputotp';
import * as React from 'react';

export default function ControlledDemo() {
    const [value, setValue] = React.useState('');

    return (
        <div className="flex flex-col items-center gap-6">
            <InputOtp value={value} onValueChange={(e: InputOtpRootValueChangeEvent) => setValue(e.value)}>
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
            </InputOtp>
            <div className="flex items-center gap-4">
                <span className="text-sm text-muted-color">
                    Value: <strong className="text-color">{value || ''}</strong>
                </span>
                <Button severity="secondary" size="small" onClick={() => setValue('')}>
                    Reset
                </Button>
            </div>
        </div>
    );
}

Mask#

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

mask-demo

import { InputOtp, InputOtpText } from '@/components/ui/inputotp';

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

Integer Only#

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

integer-only-demo

import { InputOtp, InputOtpText } from '@/components/ui/inputotp';

export default function IntegerOnlyDemo() {
    return (
        <div className="flex justify-center">
            <InputOtp integerOnly>
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
            </InputOtp>
        </div>
    );
}

Filled#

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

filled-demo

import { InputOtp, InputOtpText } from '@/components/ui/inputotp';

export default function FilledDemo() {
    return (
        <div className="flex justify-center">
            <InputOtp variant="filled">
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
            </InputOtp>
        </div>
    );
}

Sizes#

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

sizes-demo

import { InputOtp, InputOtpText } from '@/components/ui/inputotp';

export default function SizesDemo() {
    return (
        <div className="flex flex-col items-center gap-4">
            <InputOtp size="small">
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
            </InputOtp>
            <InputOtp>
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
            </InputOtp>
            <InputOtp size="large">
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
            </InputOtp>
        </div>
    );
}

Disabled#

When disabled is present, the component becomes non-interactive.

disabled-demo

import { InputOtp, InputOtpText } from '@/components/ui/inputotp';

export default function DisabledDemo() {
    return (
        <div className="flex justify-center">
            <InputOtp disabled>
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
                <InputOtpText />
            </InputOtp>
        </div>
    );
}

Accessibility#

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.