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.

AuthCode

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

NameTypeRequiredDefaultDescription
onChange(value: string) => {}Yes-Callback function that gets triggered on single value change.
lengthnumberNo6Number of inputs for inserting single values.
allowedCharactersalphanumeric | numeric | alphaNoalphanumericSpecifies the type of input characters.
autoFocusbooleanNofalseIf true, inputs automatically accept the keyboard focus on data input.
isPasswordbooleanNofalseIf true, inputs display entered values as password masking symbols.
disabledbooleanNofalseIf true, disables whole Auth code component.
placeholderstringNo-Default placeholder for input elements.
isValidbooleanNotruePuts element in error state and displays the message.
inputSizesm | md | lg | xlNolgSpecifies the size of input characters.
classNamestringNo-Specifies the extra styles for the container that wraps the set of input elements.
ariaLabelstringNoCharacter `${i + 1}`.Specifies the common of the aria phrase for input elements.
Deprecated props
stretchbooleanNofalseIf true, inputs would get stretched to fill the available width.
expandablebooleanNofalseDefines 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.