OTP Input

A one-time-code input whose characters roll into place behind a caret that slides from slot to slot.

motion

Type to fill each slot and move to the next one. Backspace clears a slot in place, then steps back on the next press. Arrow keys move between slots, and a caret slides along with you. Pasting a code, or letting the phone autofill one from a text message, drops it straight in. Set the status to turn the slots green, or shake them red on a wrong code.

Options you can pass to customize this component.

Prop
Type
Description
length
number

How many boxes to render, so a 4 digit code is length={4}. Any count works.

size
smmdlg

Overall scale of the boxes. Maps to 40px (sm), 48px (md), and 56px (lg), and carries the text, caret, and gaps with it.

value
string

The current code. Pass it to control the input yourself; leave it out to let the component track its own state.

defaultValue
string

Starting code when the input is uncontrolled.

onChange
(value: string) => void

Fires on every edit with the full code so far.

onComplete
(value: string) => void

Fires once the last slot is filled.

type
numberslettersboth

Which characters a slot accepts. Anything else is ignored, including on paste.

status
idlesuccesserror

Drives the feedback state. Success traces a green ring around each box in turn, error rings them red and shakes the row once.

mask
boolean

Hides the characters, like a password field.

disabled
boolean

Blocks input and dims every slot.

autoFocus
boolean

Focuses the first slot on mount.

className
string

Extra classes for the row that wraps the slots.

slotClassName
string

Extra classes for each slot, for sizing and colors.

npx shadcn add amitgajare2/ariseui/otp-input
OTP Input

Enter 123456 to pass. Any other code fails.