Input OTP

Forms

A one-time password input component with individual character cells. Supports auto-focus, paste handling, and keyboard navigation.

Import

import { InputOTP } from "@/components/ui/input-otp";

Usage

Basic OTP Input

Enter a 6-digit verification code

Enter Verification Code

Different Lengths

Customize the number of digits

4-digit PIN

6-digit Code (default)

8-digit Code

With Auto Focus

First input receives focus on mount

Enter Code

Click preview to see auto-focus behavior

With Error

Display validation errors

Verification Code

Invalid code. Please try again.

Disabled

Disabled state

Code

API Reference

length6

number

Number of OTP digits

valueundefined

string

Controlled value

defaultValue""

string

Default value for uncontrolled usage

onValueChangeundefined

(value: string) => void

Callback when value changes

onCompleteundefined

(value: string) => void

Callback when all digits are filled

labelundefined

string

Label text displayed above the input

errorundefined

string

Error message to display

autoFocusfalse

boolean

Auto-focus the first input on mount

disabledfalse

boolean

Whether the input is disabled

Prop	Type	Default	Description
`length`	`number`	6	Number of OTP digits
`value`	`string`	undefined	Controlled value
`defaultValue`	`string`	""	Default value for uncontrolled usage
`onValueChange`	`(value: string) => void`	undefined	Callback when value changes
`onComplete`	`(value: string) => void`	undefined	Callback when all digits are filled
`label`	`string`	undefined	Label text displayed above the input
`error`	`string`	undefined	Error message to display
`autoFocus`	`boolean`	false	Auto-focus the first input on mount
`disabled`	`boolean`	false	Whether the input is disabled

Input Form

Import

Usage

Basic OTP Input

Different Lengths

With Auto Focus

With Error

Disabled

API Reference

Related Components