OTP Field
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)
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 |