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.



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



Different gaps


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.
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.