OTP Input

Default (6 Digits)

npx visor add otp-input

This copies two files into your project:

import { OTPInput } from '@/components/ui/otp-input/otp-input';

<OTPInput length={6} onChange={(code) => console.log(code)} />

Prop	Type	Default	Description
`length`	`number`	`6`	Number of digit cells.
`value`	`string`	—	Controlled value (digits only).
`onChange`	`(value: string) => void`	—	Callback when the code changes.
`disabled`	`boolean`	`false`	Disables all digit cells.
`autoFocus`	`boolean`	`false`	Auto-focus the first cell on mount.

Each digit cell renders as type="text" with inputmode="numeric" and maxlength="1"
Cells are grouped inside a <div role="group"> with an accessible label (e.g., aria-label="One-time password")
Focus auto-advances to the next cell on digit entry and moves back on Backspace
Paste support fills all cells from clipboard and focuses the last filled cell
Provide a descriptive aria-label prop on the group for screen reader context (e.g., "Enter your 6-digit verification code")