Input OTP

A one-time code in boxes, one character each: typed, pasted or filled from a text message.

$ pnpm dlx shadcn@latest add https://dashral.com/r/input-otp.json

Verification code

We sent a 6-digit code to +62 812 •••• 4821.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/input-otp.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/input-otp

Usage

example.tsx

1import { InputOTP } from "@/components/dashral/input-otp"
2
3<InputOTP label="Verification code" description="We sent it to your phone." onComplete={(code) => verify(code)} />

Examples

Groups and letters

groups={[3, 3]} with a dash between; pattern="alphanumeric" takes letters too.

Recovery code

Letters and digits, as printed.

Verify the code

Checked on complete: a wrong code shows an error and clears; the right one says so.

Enter the code from your email

Try 123456.

API reference

InputOTP

Also takes every prop of <input>(opens in a new tab).

Prop	Type	Default
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`length`	`number` How many characters the code has.	`6`
`value / defaultValue`	`string` Controlled or initial code.	—
`onValueChange`	`(value: string) => void` Called as it changes, with what's typed so far.	—
`onComplete`	`(value: string) => void` Called once every box is filled, e.g. to verify the code.	—
`pattern`	`"digits" \| "alphanumeric"` What can be typed. Digits bring up the number keypad on phones; letters are uppercased.	`"digits"`
`groups`	`number[]` Splits the boxes with a dash, e.g. [3, 3]. Ignored unless they add up to length.	—
`mask`	`boolean` Dots in place of the characters, for a PIN.	`false`
`size`	`"default" \| "lg"` 40px or 48px boxes.	`"default"`
`classNames`	`{ root, label, description, error, slots, slot }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`0–9 (or letters)`	Fill the next box
`Backspace`	Clear the last box
`⌘V`or`Ctrl+V`	Paste a whole code

Accessibility

With label, description or error, the id, aria-describedby and aria-invalid are wired up for you.
One real input under the boxes, with autocomplete="one-time-code": screen readers hear one field and its value, and phones offer the code from a text message.
Without a label, give it an aria-label.