Form Inputs
OTP Field
An OTP field allows a user to enter a one-time password or verification code, one character per input slot.
An OTP field allows a user to enter a one-time password or verification code, one character per input slot.
Length#
Masked#
Disabled#
Controlled#
Value: (empty)
Separator#
Use OTPFieldSeparator to visually split the slots into groups.
Component props#
| Name | Type | Description |
|---|---|---|
| length | number | Number of input slots (default: 6) |
| label | string | Label text displayed above the field |
| value | string | Controlled value |
| defaultValue | string | Default value |
| mask | boolean | Masks entered characters (default: false) |
| autoSubmit | boolean | Submits the owning form when all slots are filled |
| validationType | string | "numeric" | "alpha" | "alphanumeric" | "none" |
| isDisabled | boolean | Disables the field |
| isReadOnly | boolean | Prevents changing the value |
| isRequired | boolean | Marks the field as required |
| onChange | (value: string) => void | Called when the value changes |
| onComplete | (value: string) => void | Called when all slots are filled |