Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Standard OTP Input Input OTP for React

A six-digit one-time code field split into two groups of three, with a separator between the groups.

Six boxes in two groups of three, with a separator between them. Nothing else is on the page: no label, no button, and no message.

Use this shape when the code arrives as two groups, like 123-456. A single Input is simpler when people paste one long string. In React, Base UI moves to the next box as you type.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Input OTP anatomy: root, group, separator, slot

Usage

<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot className="bg-background" index={0} />
    <InputOTPSlot className="bg-background" index={1} />
    <InputOTPSlot className="bg-background" index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot className="bg-background" index={3} />
    <InputOTPSlot className="bg-background" index={4} />
    <InputOTPSlot className="bg-background" index={5} />
  </InputOTPGroup>
</InputOTP>

FAQ

How are the two groups made?

Each InputOTPGroup joins its slots into one block, and InputOTPSeparator draws a minus between blocks. The separator isn't a character, and index counts straight through the groups, 0 to 5.

What sets the number of digits?

maxLength sets the length; render one InputOTPSlot per character.

How does focus move between the boxes?

Typing a character fills the current box and moves to the next; Backspace clears and moves back, and the arrow keys move between boxes. Pasting a full code fills them all at once.

Does it accept letters?

Yes: without a pattern, any character is accepted. Pass a digits-only pattern, as the Numeric Only example does.

Why do the slots have bg-background?

So the boxes stay solid on a muted or tinted surface, such as a card or the preview. Drop the class when the field sits on the page background.

How do I read the code?

Pass a value and a change handler, as the Controlled example does, or read it from the form when it's submitted. The value is one string, and onChange receives the next string.

API Reference

Input OTP

Sets maxLength={6}, index={0}, index={1}, index={2}, index={3} and index={4}. The rest is on the Input OTP page.

All 20 input otp examples