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";

Enter a 6-digit verification code

Enter Verification Code

Customize the number of digits

4-digit PIN

6-digit Code (default)

8-digit Code

First input receives focus on mount

Enter Code

Click preview to see auto-focus behavior

Display validation errors

Verification Code

Invalid code. Please try again.

Disabled state

Code

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