Glitchcn

Input OTP

One-time password input with emerald/dark aesthetic

Preview

6-Digit OTP

4-Digit PIN

Installation
npx shadcn@latest add @glitchcn/input-otp
Usage
import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp"

// 6-digit OTP
<InputOTP maxLength={6}>
  <InputOTPGroup>
    {[0, 1, 2, 3, 4, 5].map((i) => (
      <InputOTPSlot key={i} index={i} />
    ))}
  </InputOTPGroup>
</InputOTP>

// 4-digit PIN
<InputOTP maxLength={4}>
  <InputOTPGroup>
    {[0, 1, 2, 3].map((i) => (
      <InputOTPSlot key={i} index={i} />
    ))}
  </InputOTPGroup>
</InputOTP>