Skip to content

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

Free

Numeric Only OTP Input OTP for React

A six-digit code field limited to digits, with a note that phones should show the numeric keyboard.

Six boxes in two groups of three. Under them a line says Numeric keyboard on mobile devices. Letters are not accepted.

Use digits only when the code is numeric. A single Input fits a long key that mixes letters and digits. In React, Base UI fills the boxes when a full code is pasted.

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

<div className="flex flex-col gap-2">
  <InputOTP inputMode="numeric" maxLength={6} pattern={DIGITS_ONLY}>
    <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>
  <p className="text-muted-foreground text-sm">
    Numeric keyboard on mobile devices.
  </p>
</div>

FAQ

How is the field limited to digits?

pattern is ^\d+$, a regular expression string that every character must match.

How does the phone show the number pad?

inputMode is numeric on InputOTP, which passes it to its input.

What happens when a code with spaces is pasted?

Characters that aren't digits are rejected, so paste a clean code. The Paste Optimization example strips everything but the digits before filling the field.

Can phones fill in the code from an SMS?

Yes, when the field has autocomplete one-time-code, which the component sets, iOS and Android offer the code from a recent message.

How is the field split?

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 is the line under the field?

A paragraph in text-sm text-muted-foreground, Numeric keyboard on mobile devices. It's a note for the demo; in a real form, say where the code was sent.

API Reference

Input OTP

Sets inputMode="numeric", maxLength={6}, pattern={DIGITS_ONLY}, index={0}, index={1} and index={2}. The rest is on the Input OTP page.

All 20 input otp examples