AuthCode
In progress
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
Placeholder
Sizes
Password
Stretch
Expandable
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. |
inputSize | sm | md | lg | xl | No | lg | Specifies the size of input characters. |
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. |
Deprecated props | ||||
stretch | boolean | No | false | If true, inputs would get stretched to fill the available width. |
expandable | boolean | No | false | Defines whether or not the input cells can be stretched to fill the available space between them in the stretchable Auth code component. Matters only with the "stretch" parameter is being set to true. |