OTP Input
Segmented digit input for one-time passwords and verification codes. Supports keyboard navigation, paste, controlled and uncontrolled modes, and auto-submit via onComplete.
Examples
Sizes
Custom length
Masked
Controlled
Value: —
Error state
Disabled
Props
length= 6
number
Number of digit slots.
size= 'md'
'sm' | 'md' | 'lg' | 'xl'
Controls slot dimensions and text size.
value
string
Controlled value string, e.g. "123456".
onChange
(value: string) => void
Called on every keystroke with the full current value.
onComplete
(value: string) => void
Called when all slots are filled.
mask= false
boolean
Masks input like a password field.
disabled= false
boolean
Prevents all interaction.
error= false
boolean
Applies error styling to all slots.
className
string
Extra class on the outer wrapper.
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 6 | Number of digit slots. |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Controls slot dimensions and text size. |
| value | string | — | Controlled value string, e.g. "123456". |
| onChange | (value: string) => void | — | Called on every keystroke with the full current value. |
| onComplete | (value: string) => void | — | Called when all slots are filled. |
| mask | boolean | false | Masks input like a password field. |
| disabled | boolean | false | Prevents all interaction. |
| error | boolean | false | Applies error styling to all slots. |
| className | string | — | Extra class on the outer wrapper. |