Default
A standard 6-digit OTP input split into two groups of three.
Four Digits
A compact 4-digit OTP in a single group.
Alphanumeric
Accepts both letters and digits using REGEXP_ONLY_DIGITS_AND_CHARS.
Disabled
Props
| Prop | Type | Description |
|---|---|---|
| maxLength | number | Total number of input slots |
| value | string | Controlled value |
| onChange | (value: string) => void | Called when value changes |
| disabled | boolean | Disables the entire input |
| pattern | string | RegExp | Regex pattern to validate each character (e.g. REGEXP_ONLY_DIGITS) |
| containerClassName | string | Additional classes on the outer container |
Usage
import { InputOTP } from "@/components/ui";
<InputOTP maxLength={6}>
<InputOTP.Group>
<InputOTP.Slot index={0} />
<InputOTP.Slot index={1} />
<InputOTP.Slot index={2} />
</InputOTP.Group>
<InputOTP.Separator />
<InputOTP.Group>
<InputOTP.Slot index={3} />
<InputOTP.Slot index={4} />
<InputOTP.Slot index={5} />
</InputOTP.Group>
</InputOTP>