OTP Input

One-time code input with auto-advance, paste and backspace handling.

Check your inbox

Enter the 6-digit code we sent to ada@northwind.io

Didn't get it?

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/otp-input.json

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

<OTPInput onComplete={(code) => verify(code)} />

groupSize splits the slots with a dash, so long codes are easier to read back.

mask shows dots instead of digits.

The row shakes and turns red each time invalid switches on.

mode="alphanumeric" accepts letters too and brings up the full keyboard on phones.

Other props and the ref go to the wrapping group element.

Prop	Type	Default
`length`	`number` Number of slots.	`6`
`value`	`string` Controlled code.	None
`defaultValue`	`string` Initial code when uncontrolled.	None
`onValueChange`	`(code: string) => void` Called on every change.	None
`onComplete`	`(code: string) => void` Called when the last empty slot is filled.	None
`mode`	`"numeric" \| "alphanumeric"` Characters accepted. Also picks the mobile keyboard.	`"numeric"`
`groupSize`	`number` Puts a dash after every groupSize slots.	None
`mask`	`boolean` Shows dots instead of characters.	`false`
`invalid`	`boolean` Red state. Shakes the row when it switches on.	`false`
`disabled`	`boolean` Disables every slot.	`false`
`autoFocus`	`boolean` Focuses the first empty slot on mount.	`false`
`name`	`string` Submits the code with a surrounding form. A form reset empties the slots.	None
`required`	`boolean` Stops the submit until every slot is filled, with a message that says how many are needed.	`false`
`aria-label`	`string` Names the group of slots.	`"One-time code"`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited
`size`	`"sm" \| "md" \| "lg"` Slot size and text size.	`"md"`

When the browser rejects the field on submit (required, type, pattern), it turns red until it's edited or the form resets. The browser shows its own message.
Each slot is a native input labelled "Digit 2 of 6" inside a named group.
The first slot uses autocomplete="one-time-code", so codes from SMS can fill every slot in one tap.
Pasting fills from the focused slot. A full-length code always fills from the start, and spaces or dashes are dropped.
Only the next slot to fill is in the tab order. Arrow keys, Home and End move between slots.
Backspace clears the focused slot, or steps back and clears the previous one when the focused slot is empty.
Link an error message with aria-describedby when invalid is on. The shake is skipped when reduced motion is on.
Slots keep their size while there's room. Give the group w-full min-w-0 in a narrow column and they narrow together instead of overflowing.