OTP Input React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import OtpInput from @/components/ui/otp-input.

import { useState } from "react"
import OtpInput, { type OtpStatus } from "@/components/ui/otp-input"

export function Demo() {
  const [status, setStatus] = useState<OtpStatus>("idle")

  return (
    <OtpInput
      length={6}
      size="md"
      status={status}
      onChange={() => setStatus("idle")}
      onComplete={(code) => setStatus(checkCode(code) ? "success" : "error")}
    />
  )
}

Props

• lengthdefault 6
  number

  How many boxes to render, so a 4 digit code is length={4}. Any count works.

• sizedefault "md"
  "sm" | "md" | "lg"

  Overall scale of the boxes. Maps to 40px (sm, 44px on touch screens), 48px (md), and 56px (lg), and carries the text, caret, and gaps with it. In a container narrower than the row, the boxes shrink evenly and stay square, so 8 slots still fit a 360px phone.

• typedefault "numbers"
  "numbers" | "letters" | "both"

  Which characters a slot accepts. Anything else is ignored, including on paste.

• statusdefault "idle"
  "idle" | "success" | "error"

  Drives the feedback state. Success traces a green ring around each box in turn, error rings them red and shakes the row once.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Slot corners as a share of the slot, so they shrink with it and match the success ring: square, half, the original 20 / 25 / 29% per size, rounder, or circles.

• surfacedefault ""
  string

  Any CSS color for the slot fill. Empty uses #F4F4F9 light, #262626 dark.

• textColordefault ""
  string

  Any CSS color for the characters and the caret. Empty is black on light pages, white on dark ones.

• successColordefault "#34C759"
  string

  Any CSS color for the ring drawn around each slot on success.

• errorColordefault "#FF3B30"
  string

  Any CSS color for the ring shown on error.

• maskdefault false
  boolean

  Hides the characters, like a password field.

• disableddefault false
  boolean

  Blocks input and dims every slot.

• autoFocusdefault false
  boolean

  Focuses the first slot on mount.

• slotLabeldefault ""
  string

  Accessible name template for each slot; {index} and {length} fill in, e.g. "Cifra {index} din {length}". Empty reads "Digit 1 of 6" (or "Character" for letters).

• value
  string

  The current code. Pass it to control the input yourself; leave it out to let the component track its own state.

• defaultValuedefault ""
  string

  Starting code when the input is uncontrolled.

• onChange
  (value: string) => void

  Fires on every edit with the full code so far.

• onComplete
  (value: string) => void

  Fires once the last slot is filled.

• className
  string

  Extra classes for the row that wraps the slots.

• slotClassName
  string

  Extra classes for each slot, for sizing and colors.

FAQ

Used in

More React input components