InputOtp

An unstyled OTP input component with automatic focus management and keyboard navigation.

Build fully custom one-time password inputs with complete control over layout and styling.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use InputOtp with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with sub-components: Root, Text
Automatic focus navigation between input slots on type, delete, and arrow keys
Clipboard paste support distributing characters across inputs
Mask mode to obscure entered values
Integer-only mode restricting input to numeric characters

Usage#

import { InputOtp } from 'primereact/inputotp';

<InputOtp.Root>
    <InputOtp.Text index={0} />
    <InputOtp.Text index={1} />
    <InputOtp.Text index={2} />
    <InputOtp.Text index={3} />
</InputOtp.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<InputOtp.Root as="section">
    <InputOtp.Text index={0} />
</InputOtp.Root>

Render Function Children#

InputOtp.Root accepts a render function as children, providing access to the component instance.

<InputOtp.Root>
    {(instance) => (
        <>
            <InputOtp.Text index={0} />
            <InputOtp.Text index={1} />
            <span>{instance.state.value}</span>
        </>
    )}
</InputOtp.Root>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

/* Select a part to see its CSS selector for custom styling */

API#

InputOtpRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputOtpRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputOtpRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputOtpRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputOtpRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputOtpRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`string`	—
Specifies whether a inputotp should be checked or not.
`defaultValue`	`string`	—
Specifies whether a inputotp should be checked or not.
`integerOnly`	`boolean`	`false`
When present, it specifies that only integers are allowed.
`mask`	`boolean`	`false`
Mask pattern.
`onValueChange`	`(event: useInputOtpValueChangeEvent) => void`	—
Callback to invoke when value changes.
`size`	`"small"` \| `"large"`	—
Defines the size of the InputText.
`variant`	`"outlined"` \| `"filled"`	—
Specifies the input variant of the component.
`disabled`	`boolean`	`false`
When present, it specifies that the element should be disabled.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputotp"`
`data-part`	`"root"`

Defines passthrough(pt) options of InputOtp component.

label	type	description
root	InputOtpRootPassThroughType<InputHTMLAttributes<HTMLInputElement>>	Used to pass attributes to the root's DOM element.
pcInputText	InputOtpRootPassThroughType<InputHTMLAttributes<HTMLInputElement>>	Used to pass attributes to the input's DOM element.

InputOtpText#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InputOtpTextInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InputOtpTextInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InputOtpTextInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InputOtpTextPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InputOtpTextInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`index`	`number`	—
The position index of this input within the OTP sequence.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inputotp"`
`data-part`	`"input"`
`data-index`	Input index

Defines passthrough(pt) options of InputOtpText component.

label	type	description
root	InputOtpTextPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

InputOtp renders a set of native input elements. Each input accepts a single character. Provide an accessible group label with aria-label or aria-labelledby on the root element.

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.