Input OTP for React Aria

Separate slots for a one-time code, one character in each.

Use it when the code has a fixed length and a stray character should be refused. An arbitrary string from a password manager fits a single Input. In React, React Aria moves focus between the slots and fills them on paste.

Installation

Anatomy

InputOTP
├── InputOTPGroup
│   ├── InputOTPSlot
│   └── InputOTPSlot
├── InputOTPSeparator
└── InputOTPGroup
    ├── InputOTPSlot
    └── InputOTPSlot

Usage

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

const InputOTPDemo = () => (
  <InputOTP defaultValue="123456" maxLength={6}>
    <InputOTPGroup>
      <InputOTPSlot index={0} />
      <InputOTPSlot index={1} />
      <InputOTPSlot index={2} />
      <InputOTPSlot index={3} />
      <InputOTPSlot index={4} />
      <InputOTPSlot index={5} />
    </InputOTPGroup>
  </InputOTP>
);

Accessibility

Demos

Pattern

Letters are refused, which is what an SMS code wants. Paste still fills from the slot that has focus, and the label says the field is digits only. Use a digit restriction for any code that cannot contain a letter. Switch to alphanumeric when the issuer mixes letters and numbers, or the person will be stuck on the first character.

Separator

The six slots are split into pairs, with a visual minus between the groups. The separator is not an extra character, and the indexes keep counting straight through, from 0 to 5. Use the break when the code is printed in groups, such as 12 34 56, so the screen matches the message. A single group is clearer when the code has no grouping.

Disabled

The code is already filled, and disabled stops further edits while leaving the digits readable. Use that for a verified value, a backup code, or a field that unlocks only after another step. Do not disable the slots to express an error. People need to correct a wrong code, not stare at a faded one.

Controlled

Whatever is typed shows up again under the slots, empty state included, so you can see the value your state is holding. Keep the code in state when you check it as the person types, enable a button at the right length, or clear it after a failed attempt. If you only read the code on submit, you do not need to control it.

Invalid

Every slot is marked aria-invalid, and the code starts as zeros so the error styling is obvious before anyone types. Put the reason in text next to the field. Color on the boxes is not enough, especially for a code the person just copied. Use this after a rejected attempt, and clear it once the next code is accepted.

Four Digits

Four slots, digits only and no separator, fit a PIN or a short authenticator prompt rather than a six-digit email code. Use the shorter length when the issuer really sends four characters. Adding two empty slots just in case makes people wonder if the code was cut off. The indexes are still 0 through 3.

Alphanumeric

Letters and digits are both accepted, and a separator splits the six slots into two groups of three. Use this when the code from the email or the authenticator app actually contains letters. A digits-only field will reject the first letter and look broken. Keep the separator only if the code is shown to people in those groups.

Form

The code sits in a verification card addressed to a specific email, with a label, a resend button, and a full-width verify button. Resend is type button so it does not submit the step. required is on the field for when this card is a real form. Use the whole card when checking the code is the entire screen, not one line among many.

Rtl

The label is Arabic and the field direction is right to left, but the slots themselves stay left to right. A one-time code is a sequence of characters, not a sentence, and reversing the boxes would make the pasted code land in the wrong order. Set dir on the field for the label, and ltr on the control. Do the same for a PIN.

FAQ

API Reference