OTP Component

The OTP (One-Time Password) component provides an accessible and user-friendly way to input verification codes. It features individual input boxes for each digit, automatic focus management, and paste support, making it perfect for authentication flows.

Key Features

Smart Navigation: Auto-advances to next digit and supports backspace
Paste Support: Automatically distributes pasted codes across inputs
Multiple Variants: Choose between default and underline styles
Accessibility: ARIA-compliant with proper labeling and keyboard support

Basic Usage

Create a simple 6-digit OTP input:

Verification Code

1
<OTP maxLength={6} label="Verification Code" />

Variants

Style Variants

Choose between two distinct visual styles:

Default variant

Underline variant

1
<OTP maxLength={4} variant="default" label="Default variant" />
2
<OTP maxLength={4} variant="underline" label="Underline variant" />

Form Integration

Labels and Validation

Add labels and validation for better user experience:

Authentication Code *

Enter the 6-digit code sent to your phone

1
<OTP
2
  maxLength={6}
3
  label="Authentication Code"
4
  required
5
  sublabel="Enter the 6-digit code sent to your phone"
6
/>

Validation States

The OTP component supports error and success states through the data-state attribute:

Success State

Error State

1
<OTP maxLength={4} label="Success State" data-state="success" />
2
<OTP maxLength={4} label="Error State" data-state="error" />

Input Modes

Customize the input type for different use cases:

Numeric Only

Text Input

1
<OTP maxLength={4} label="Numeric Only" type="number" />
2
<OTP maxLength={4} label="Text Input" type="text" pattern="[A-Za-z]+" />

OTP Component Props API

OTP Component Props Extends <div> HTMLElement
Prop	Type	Default	Description
maxLength	number	required	Number of OTP digits
label	string	undefined	Text label above the input
sublabel	string	undefined	Helper text below the input
variant	default \| underline	default	Visual style variant
required	boolean	false	Whether the input is required
showRequired	boolean	true	Show required symbol
pattern	string	[0-9]*	Input validation pattern
type	text \| number	text	Type of input
data-state	success \| error \| undefined	undefined	Current validation state of the input

Custom Event Listeners

The OTP component emits two custom events that you can listen to:

Event	Detail	Description
complete	{ value: string, valid: boolean }	Fired when all digits are filled
change	{ value: string, valid: boolean }	Fired when any digit changes

Try it out

Waiting for events to be emitted… (Enter digits to see the events)

Functions API

The OTP component provides several functions to programmatically control its behavior:

Function	Type	Description
set: value	(value: string) => void	Sets the OTP value programmatically
get: value	() => string	Gets the current OTP value
set: name	(name: string) => void	Sets the form field name
get: name	() => string	Gets the current form field name
set: errors	(errors: string[] \| undefined) => void	Sets error messages and error state
set: success	(success: boolean) => void	Sets the success state

Limited Time Launch Sale

Add secure verification to your forms with our OTP component. Get started with our AstroJS starter template today!

GET 60% OFF!

Menu Pagination

Directory