Input OTP
One-time-password / verification-code entry built on the input-otp library. Renders N character slots with active/caret state and auto-advance on type.
6-digit code (with separator)
Enter your one-time password.
4-digit PIN
Disabled
Installation
pnpm dlx @hex-core/cli add input-otpAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
maxLengthrequired | number | — | Total number of slots (typically 4–8 for OTPs) |
value | string | — | Controlled value — the current entered string |
onChange | function | — | Callback fired as the user types: (value: string) => void |
onComplete | function | — | Called when all slots are filled (useful to auto-submit) |
pattern | string | — | Regex to restrict input (use REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, or REGEXP_ONLY_DIGITS_AND_CHARS) |
disabled | boolean | false | Disable the whole input |
AI Guidance
When to use
Use for one-time password, email verification code, 2FA code, or any fixed-length code entry. Auto-advances on type, supports paste of the full code, and supports regex validation.
When not to use
Don't use for variable-length codes (use a plain Input). Don't use for passwords (use Input type='password'). Don't use for open-ended short text — the slot UI implies a code.
Common mistakes
- Forgetting to render maxLength slots — the underlying input's maxLength won't match the visible UI
- Using pattern without importing one of the REGEXP_ONLY_* constants from 'input-otp'
- Wrapping the whole thing in a <form> without a submit handler — onComplete is often a better auto-submit hook
- Overriding slot className in a way that removes the first/last border-radius rules
Accessibility
input-otp manages a single hidden <input> so screen readers hear one field of N characters. Each slot is a visual representation. The active slot gets a focus ring via the ring token.
Token budget: 700