Verification Code Input

Installation

npx asteria-ui add verification-code-input

import { VerificationCodeInput } from "@/components/ui/verification-code-input";

<VerificationCodeInput aria-label="6-digit verification code" />

Prop	Type	Default	Description
length	number	6	Number of digit cells.
defaultValue	string	—	Uncontrolled initial code.
value	string	—	Controlled code — pair with onValueChange.
onValueChange	(value: string) => void	—	Called with the accumulated code on every change.
error	boolean	false	Shows every cell in the error color and marks them aria-invalid.
disabled	boolean	false	Disables every cell.
aria-label	string	—	Required — describes the whole group, e.g. "6-digit verification code".

Group. Wrapped in role="group" with a required aria-label describing the whole code.
Cells. Each digit is its own input, labeled aria-label="Digit N of M".
Auto-advance. Typing a digit moves focus to the next cell. Backspace on an empty cell moves focus back to the previous one.
Paste. Pasting a full code fills every cell at once.
Error. Announced via aria-invalid on every cell.
Focus ring. Visible on Tab via shadow-glow-focus.

Use for one-time passcodes (OTP) — SMS verification, 2FA, email confirmation. Each digit gets its own cell for clarity.

Do:

Don't: