Input OTP

shadcn/ui input-otp on DESIGN.md tokens. One hidden input, one standalone 38px slot per character, 6px apart. A filled slot turns its edge primary and its character pops in; the active slot carries the focus ring; invalid swaps both to warning. The whole code is one field, so paste fills every slot, with spaces dropped first. Digits ask for the numeric keypad on a phone. Use it for verification codes only.

<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS} onComplete={verify}>
  <InputOTPGroup>{[0, 1, 2, 3, 4, 5].map((i) => <InputOTPSlot key={i} index={i} />)}</InputOTPGroup>
</InputOTP>

Six digits

Six standalone slots; digits only, numeric keypad on a phone; completes on the sixth. Type, or paste a code with spaces in it.

Digits only; paste works, spaces are dropped.

Four characters

Letters and digits (REGEXP_ONLY_DIGITS_AND_CHARS), so the phone shows the text keyboard.

States

Invalid after a failed check paints every slot's edge warning; disabled fades the row while a new code is on its way.

1
2
3
4
1
2

New code on its way…