Input OTP
shadcn/ui
One-time password / verification code input. Auto-advances on type, supports paste.
@/components/ui/input-otpPatterns
| Pattern | Preview | Usage |
|---|---|---|
| 6-digit split (3–3) | Email verification codes, 2FA — most common | |
| 4-digit PIN | PIN entry, simple numeric codes | |
| 6-digit joined | When the separator would be confusing |
In context — 2FA verification form
Two-factor authentication
Enter the 6-digit code from your authenticator app.
Code length: 0 / 6 — button enables at 6 characters
Sub-components
| Component | Role |
|---|---|
| InputOTP | Root — maxLength controls total slots. value + onChange for controlled mode |
| InputOTPGroup | Groups adjacent slots with shared border — no gap between them |
| InputOTPSlot | Single character slot — index prop (0-based) |
| InputOTPSeparator | Visual dash between groups — non-interactive |
Props — InputOTP
| Prop | Type | Description |
|---|---|---|
| maxLength | number | Total number of characters |
| value | string | Controlled value |
| onChange | function | (value: string) => void |
| onComplete | function | (value: string) => void — fires when all slots are filled |
| disabled | boolean | Prevents input |
| pattern | string | Regex to restrict allowed characters (e.g. digits only) |
Paste support is built-in — pasting a full code fills all slots at once.
On this page