Verification Code Input
Segmented input for entering verification or OTP codes.
Installation
npx paubha@latest add verification-code-inputUsage
import { VerificationCodeInput } from "@/components/ui/verification-code-input";
<VerificationCodeInput aria-label="6-digit verification code" />Examples
Custom length
Error
Invalid verification code. Please try again.
Disabled
API reference
| 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. |
| errorMessage | React.ReactNode | — | Shown below the cells while error is set; linked via aria-describedby. |
| disabled | boolean | false | Disables every cell. |
| aria-label | string | — | Required. Describes the whole group, e.g. "6-digit verification code". |
Accessibility
Accessibility
Group. Wrapped in
role="group"with a requiredaria-labeldescribing 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-invalidon every cell.Focus ring. Visible on Tab via
shadow-glow-focus.
When to use
Use for one-time passcodes (OTP): SMS verification, 2FA, email confirmation. Each digit gets its own cell for clarity.
Do:
- Auto-focus the first cell
- Auto-advance on input
- Allow pasting the full code
- Support backspace to the previous cell
Don't:
- Use for regular text entry
- Hide the digits, these are temporary, not sensitive like a password
- Make the cells too small on mobile