OTP Input
Individual digit input cells for verification code entry
import { OTPInput } from "@plexui/ui/components/OTPInput";Examples
Overview
Filled state
Grouped (3+3)
With error
Invalid verification code.
Disabled
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
length | number | 6 | Number of digit cells |
value | string | — | Controlled value |
onChange | (value: string) => void | — | Called when value changes |
onComplete | (value: string) => void | — | Called when all digits filled |
grouping | number[] | — | Grouping pattern with extra gap (e.g. [3,3]) |
invalid | boolean | false | Invalid visual state |
errorMessage | string | — | Error message below the input |
disabled | boolean | false | Disable all cells |
autoFocus | boolean | false | Auto-focus first cell on mount |