input-otp

Accessible, unstyled one-time-password input for React — the OTP field used by the shadcn/ui component.

input-otp

React

Accessible, unstyled one-time-password input for React — the OTP field used by the shadcn/ui component.

npm GitHub Docs

Fit

Bundle (gzip)

3.9 kB

9.6 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Multi-box OTP / verification code inputs look simple but are a nightmare to build well: caret movement between boxes, paste handling, backspace behavior, mobile autofill from SMS, and screen-reader support all have to work together. Most hand-rolled versions break on at least one.

What It Does

input-otp renders a single hidden input under the hood, so browser and OS one-time-code autofill "just works," while giving you full control over how each slot looks. It handles paste, keyboard navigation, and accessibility, and it's the exact primitive shadcn/ui wraps for its OTP component.

Installation

bash

npm install input-otp

Usage Example

jsx

import { OTPInput } from 'input-otp';

export function VerifyCode() {
  return (
    <OTPInput
      maxLength={6}
      render={({ slots }) => (
        <div className="flex gap-2">
          {slots.map((slot, i) => (
            <div key={i} className="h-12 w-10 border rounded flex items-center justify-center">
              {slot.char ?? (slot.hasFakeCaret ? '|' : '')}
            </div>
          ))}
        </div>
      )}
    />
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.