AuthCode
ARIA
RTL
A one-time password (OTP) is an automatically generated numeric or alphanumeric string of characters that authenticates a user for a single transaction or login session.
Default
React Hook Form integration - Manual Submit
React Hook Form integration - Auto Submit
Allowed Characters
By default you can type numbers and letters in the inputs as the allowedCharacters prop is defaulted to alphanumeric but you can also choose between allowing only letters or only numbers by setting the prop to alpha or numeric respectively.
Custom length
Error state
Hint message
Hint message
Placeholder
Password
Different gaps
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| onChange | (value: string) => {} | Yes | - | Callback function that gets triggered on single value change. |
| length | number | No | 6 | Number of inputs for inserting single values. |
| allowedCharacters | alphanumeric | numeric | alpha | No | alphanumeric | Specifies the type of input characters. |
| autoFocus | boolean | No | false | If true, inputs automatically accept the keyboard focus on data input. |
| isPassword | boolean | No | false | If true, inputs display entered values as password masking symbols. |
| disabled | boolean | No | false | If true, disables whole Auth code component. |
| placeholder | string | No | - | Default placeholder for input elements. |
| isValid | boolean | No | true | Puts element in error state and displays the message. |
| className | string | No | - | Specifies the extra styles for the container that wraps the set of input elements. |
| ariaLabel | string | No | Character `${i + 1}`. | Specifies the common of the aria phrase for input elements. |