InputOTP
One-time password input with automatic focus progression, paste handling, numeric/alphanumeric modes, and completion callbacks
InputOTP
Advanced OTP input component with both compact and composable APIs, auto-focus, separators, validation states, and multiple sizes.
Basic usage
Use the compact API to render an OTP input in a single component. Thelength, value, and onChange props control how many digits are shown and how the value is stored.
We sent a 6-digit code to your email
Value: —
Variants
Change the visual style with the variant prop. Use semantic variants for different statuses or themes.
Sizes
Adjust the size of the slots using the size prop. Use small sizes for dense layouts and large sizes for focused flows.
Composable API
Use InputOTPGroup, InputOTPSlot and InputOTPSeparator for full control over layout and patterns while still relying on the core focus management.
Group and slot components for custom layouts
Value: —
With separators
Combine the composable API with separators to create grouped OTP patterns like credit cards or license keys.
Two digits per group, separated by dots
Types & masking
Configure the input type to restrict characters and optionally mask them for privacy-sensitive flows.
Digits only
Letters and numbers
Useful for PIN codes
Error & disabled states
Surface validation feedback with error and helperText, and use disabled to prevent user input.
Invalid verification code
Code verified
User cannot enter a code
Two-factor authentication example
Combine the compact API, helper text and actions to build a concise two-factor authentication step.
Secure your account
Enter the 6-digit code from your authenticator app
Usage Guidelines
When to Use
- 2FA verification
- Email verification
- SMS codes
Accessibility
- Focus progression announced
- Each digit field labeled
Performance
- Minimal state per input
- Efficient paste handling
Common Mistakes
- Not handling paste properly
- Wrong number of digits
Frequently Asked Questions
Related Components
View allAsynchronous search input with debounced queries, virtual scrolling for large datasets, and keyboard-driven selection
Accessible checkbox input with indeterminate state support and form integration
Accessible CheckboxGroup for multi-selection, and form integration
Color selection component with preset colors, HEX/RGB/HSL input, and visual picker interface