3.0.1

Components

Input OTP

A field for one-time codes, one character per slot.

Installation

npx shadcn@latest add @blank/input-otp

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>

Slots are 36px, the same height as a default Input. The blinking caret uses animate-caret-blink from tw-animate-css.

Examples

Digits only

pattern rejects anything else as it is typed; inputMode="numeric" brings up the number pad on phones.

Controlled

6 digits to go