Input OTP
An Input OTP takes a one-time code as a row of single-character slots, moving focus along as the code is typed or pasted. It is the control used for two-factor sign-in, email verification and anything else that arrives as a short numeric code.
Rendered live, with the same build of the library you install.
Six digits, split into two groups:
Value: Empty
InputOTP.tsx
| Name | Type | Default | Details |
|---|---|---|---|
| maxLength | number | Required | The maxLength prop. |
| value | string | Optional | The value prop. |
| onChange | (value: string) => void | Optional | The onChange prop. |
| onComplete | (value: string) => void | Optional | The onComplete prop. |
| variant | 'primary' | 'secondary' | 'primary' | The variant prop. |
| disabled | boolean | false | The disabled prop. |
| isInvalid | boolean | false | The isInvalid prop. |
| pattern | string | Optional | The pattern prop. |
| className | string | '' | The className prop. |
| slotClassName | string | '' | The slotClassName prop. |
| separatorIndices | number[] | EMPTY_SEPARATOR_INDICES | The separatorIndices prop. |
| aria-label | string | 'One-time password' | The aria-label prop. |
Other components solving nearby problems.