Docs › Components › Input OTP

Shadcn Input OTP

The shadcn/ui Input OTP is an accessible one-time-password field with a separate slot per digit, styled with Tailwind CSS v4. It handles keyboard entry, paste, and mobile code autofill. Input OTP powers two-factor and verification flows across ShadcnStore auth blocks.

Key features

• One slot per character, grouped with optional separators.
• Full keyboard entry, paste, and SMS autofill support.
• Configurable length and pattern (digits or alphanumeric).
• Controlled or uncontrolled value.
• Accessible as a single input to assistive tech.

Installation

npx shadcn@latest add input-otp

Usage

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

export function Example() {
  return (
    <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>
  )
}

Controlled value

const [value, setValue] = useState("")

<InputOTP maxLength={6} value={value} onChange={setValue}>…</InputOTP>

Built on input-otp

Input OTP is built on the input-otp library.

Accessibility

• The field behaves as a single labelled input; give it a Label or aria-label.
• Preserve paste support so users can paste a code from their SMS or authenticator.
• Announce errors clearly when a code is wrong or expired.

When to use the Input OTP

Use Input OTP for short verification codes: two-factor authentication, email or phone verification, and passwordless sign-in. For a normal password or text value, use an Input.

Used in these blocks

• Login forms: two-factor codes.
• Signup forms: email verification.
• Checkout forms: payment verification.

Related components

Input OTP pairs with a Label and a submit Button, and often sits inside a Card or Form.

FAQ

What is the shadcn input OTP used for?

The Input OTP is an accessible one-time-password field with separate slots for each digit, used for two-factor auth and verification codes.

How do I set the code length?

Set maxLength on InputOTP and render that many InputOTPSlot components, grouped as you like.

Does it support paste and autofill?

Yes. It handles pasting a full code and works with SMS one-time-code autofill on supported devices.

Can I restrict input to digits only?

Yes. Pass a pattern (for example a digits-only regex) to InputOTP.