InputOTP

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The InputOTP component provides a styled one-time password input with individual character slots. It supports numeric and alphanumeric modes, custom layouts with groups and separators, and full keyboard navigation for a smooth user experience.

Basic Usage

Enter verification code

Value: —

4-Digit PIN

Enter your PIN

PIN: —

Grouped with Separator

Enter verification code

Value: —

Verification Flow

Two-factor authentication

Enter the 6-digit code sent to your device to continue.

Entered: —

Alpha-Numeric

Enter access code

Letters and numbers accepted

Code: —

Properties

InputOTP

Property	Type	Default	Description
value	string	-	Controlled value of the OTP input.
onValueChange	(value: string) => void	-	Callback fired when the value changes.
length	number	-	Number of slots to auto-generate (used when no children are provided).
validationType	"numeric" | "alphanumeric"	"numeric"	Restricts accepted characters.
className	string	-	Additional CSS classes applied to the root element.
children	ReactNode	-	Custom layout using InputOTPGroup, InputOTPSlot, and InputOTPSeparator.

InputOTPSlot

Property	Type	Default	Description
index	number	-	Zero-based position of this slot within the full OTP value.
className	string	-	Additional CSS classes.

InputOTPGroup

Property	Type	Default	Description
className	string	-	Additional CSS classes applied to the group wrapper.
children	ReactNode	-	InputOTPSlot elements.

InputOTPSeparator

Property	Type	Default	Description
className	string	-	Additional CSS classes applied to the separator element.

Features

Keyboard Navigation

• Auto-focuses the next slot when a character is entered
• Backspace moves focus to the previous slot and clears it
• Paste support fills slots from the current position

Validation Modes

• numeric — only digits 0–9 are accepted
• alphanumeric — digits and letters are accepted (useful for access codes)

Flexible Layout

• Pass length for a simple flat row of slots
• Use InputOTPGroup + InputOTPSeparator for grouped layouts (e.g., 3–3, 4–4)

Common Use Cases

• Two-factor authentication — verify identity with a time-based or SMS code
• Email verification — confirm a new account or email address
• PIN entry — unlock a feature or confirm a transaction
• Access codes — alphanumeric codes for invites or licenses