input-otp

_{Clerk — the easiest way to add authentication to your application}

_{Evomi — residential proxies from $0.49}

HTML has no one-time-password control. There is no <input type="otp">, so most products build one out of six separate inputs wired together with keydown handlers that shuffle focus between them — and quietly lose SMS autofill, screen reader support, partial paste, undo, and half the keyboard along the way.

input-otp renders exactly one real text input, paints it invisible, and hands you the state to draw whatever you want on top. Everything the browser gives a text field keeps working, because there is still a text field.

• SMS autofill — autocomplete="one-time-code" only means something on a single field
• Screen readers — one control, one name, one value, one caret, one tab stop
• Every keybinding you didn't implement — select-all, word-delete, shift-arrow ranges, undo, the iOS long-press menu
• Real paste — including a partial paste into the middle of a half-filled code
• Form semantics — one name, one entry in FormData, a real <label> that focuses it
• Unstyled — no theme, no class names to override, no CSS to import
• Small — zero dependencies, React 16.8 → 19 (see the size badge above)

npm install input-otp

maxLength is the number of slots. render receives them and returns your markup — that's the whole contract.

'use client'
import { OTPInput } from 'input-otp'

export function VerificationCode() {
  return (
    <OTPInput
      maxLength={6}
      containerClassName="group flex items-center"
      render={({ slots }) => (
        <div className="flex">
          {slots.map((slot, idx) => (
            <Slot key={idx} {...slot} />
          ))}
        </div>
      )}
    />
  )
}

Each slot tells you what to draw:

import type { SlotProps } from 'input-otp'

function Slot({ char, placeholderChar, isActive, hasFakeCaret }: SlotProps) {
  return (
    <div
      className={cn(
        'relative flex h-14 w-12 items-center justify-center',
        'border-y border-r border-border first:rounded-l-md first:border-l last:rounded-r-md',
        'text-[1.375rem] font-medium tabular-nums transition-all duration-200',
        'outline outline-0 outline-foreground/80',
        isActive && 'z-10 outline-2', // this slot is being edited
      )}
    >
      {char ?? placeholderChar}
      {hasFakeCaret && <FakeCaret />} {/* the real caret is transparent */}
    </div>
  )
}

The full, copy-pasteable slot component (with the caret keyframe and the Stripe-style dash) is in Installation.

shadcn/ui's input-otp component wraps this library with pre-composed parts. Same engine, <InputOTPSlot index={0} /> instead of a render prop:

npx shadcn@latest add input-otp

The API is five props. The value is the list of things that go wrong when one invisible input has to behave like six boxes — and the fix for each:

Each of these — and a dozen more — is written up with the reasoning and the exact code in Edge cases.

type OTPInputProps = {
  maxLength: number                       // number of slots — required

  render?: (props: RenderProps) => React.ReactNode
  children?: React.ReactNode              // …or compose and read OTPInputContext

  value?: string
  onChange?: (newValue: string) => unknown   // a string, not an event
  onComplete?: (...args: any[]) => unknown // fires once, on the transition to full;
                                           // receives the value as a string (narrows in 2.0)

  pattern?: string | RegExp               // gates every change; no default
  placeholder?: string                    // per-slot placeholder characters
  pasteTransformer?: (pasted: string) => string

  containerClassName?: string             // the visible wrapper
  // className goes to the invisible input

  textAlign?: 'left' | 'center' | 'right'          // default 'left'
  inputMode?: 'numeric' | 'text' | ...             // default 'numeric'
  pushPasswordManagerStrategy?: 'increase-width' | 'none'
  noScriptCSSFallback?: string | null
  nonce?: string                          // for CSP style-src — applied to the injected <style> tag
}

interface SlotProps {
  char: string | null
  placeholderChar: string | null
  isActive: boolean
  hasFakeCaret: boolean
}

Every other <input> attribute is forwarded — name, required, disabled, autoFocus, aria-*, data-* — and ref points at the real input. spellCheck defaults to false (browsers would underline a full code as a typo); pass spellCheck yourself to override.

Full reference: input-otp.rodz.dev/docs/api.

pnpm install
pnpm build:lib          # tsup → packages/input-otp/dist
pnpm dev:playground     # the Playwright target, port 3039
pnpm test               # Playwright, all browsers

Tests live in apps/playground/src/tests. Note that the iOS code path, SMS autofill and password manager badges cannot be covered headlessly — see Mobile & platforms.

• Clerk — the easiest way to add authentication to your application
• Evomi — residential proxies from $0.49