Shadcn Input OTP

The shadcn OTP input is one hidden field painted as boxes. Type a digit and the caret jumps; paste a code and every slot fills. Use it for 2FA, SMS codes, and PIN entry — not for passwords.

Usage

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp"

<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

maxLength must match the number of slots. pattern is a regex string — REGEXP_ONLY_DIGITS for an SMS code.

Composition

Pattern

pattern={REGEXP_ONLY_DIGITS} rejects letters as they type.

Separator

InputOTPSeparator is a minus between groups. Two-two-two is easier to scan than six in a row.

Disabled

disabled greys the whole group. The value stays visible.

Controlled

value plus onChange. The string is the digits, not an array.

Invalid

aria-invalid on every slot. The root does not paint the error ring.

Four Digits

maxLength={4} and four slots. Pair with REGEXP_ONLY_DIGITS for a PIN.

Alphanumeric

REGEXP_ONLY_DIGITS_AND_CHARS for backup codes that mix letters and numbers.

Form

Wire the slots through Field. The error sits under the group.

RTL

Wrap with DirectionProvider and dir="rtl". Put the same dir on InputOTP.

API

InputOTPSlot

InputOTPGroup is a flex row. InputOTPSeparator is a minus with role="separator".

Keyboard

This is one hidden input. Arrow keys, select-all, and iOS SMS autofill work like a normal field.

Notes

maxLength must equal the number of slots. Label InputOTP with id — the slots are paint.

With other components

Questions

Related