Components

Input OTP

One-time code input with per-character slots. Uses the input-otp library. Optional separator (dash icon) between groups.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<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>

When to use

  • Auth flows: 2FA, email verify, phone verify.

When not to use

  • Regular text input — use Input.
  • Passwords — use Input type='password'.

Usage

Do
  • Use a fixed length (usually 6 slots).
  • Provide a resend link right below the input.
Don't
  • Don't split into more than two groups — hurts scannability.