OtpInput
Segmented one-time code input
Category: inputs · WCAG 2.2-AA · form, otp, code, input, verification
States
- idle
- focused
- filled
- disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
length | number | 6 | Number of input cells. |
value | string | — | The controlled value. |
onValueChange | (v: string) => void | — | Called with the new value when it changes. |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
type | 'numeric' | 'alphanumeric' | numeric | Accepted characters ('numeric' | 'alphanumeric'). |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-color-accent--cascivo-color-bg-subtle--cascivo-radius-input--cascivo-focus-ring
When to use
- Entering a fixed-length one-time code (2FA, SMS verification, email confirmation) split across per-character slots
- Codes that benefit from auto-advance between slots and pasting the full code at once
- Numeric or alphanumeric short codes of a known length
When not to use
- Variable-length or free-form text — use Input
- Secret credentials that should be masked — use PasswordInput
- Long codes where per-character boxes add no value over a single field — use Input
How to build an accessible OtpInput in React →
Examples
Basic
<OtpInput value="" onValueChange={() => {}} />4-digit
<OtpInput length={4} value="" onValueChange={() => {}} />Related components
- Input — Use for variable-length or non-code text entry
- PasswordInput — Use when the entered value is a secret that must be masked