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.