input-otp

input-otp is a headless, fully accessible one-time password (OTP) input component for React. It renders a single invisible native <input> element beneath a caller-defined ‘slot’ UI, so screen readers get real input semantics while developers get complete visual control over each character slot.

The library ships zero built-in styles, handles iOS/Android copy-paste-cut quirks, automatic SMS OTP retrieval via autocomplete="one-time-code", all standard keybindings, and automatically detects and repositions password-manager badges (LastPass, 1Password, Dashlane, Bitwarden) so they never overlap the input UI.

What You Get

• An <OTPInput> root component with a render prop (or Context API) exposing per-slot state: active slot, current char, placeholder char, and fake-caret flag.
• Exported regex helpers (REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS_AND_CHARS) for constraining input to digits, letters, or alphanumerics.
• Automatic password-manager badge detection and layout shifting so LastPass/1Password/Dashlane/Bitwarden badges never overlap the slot UI.
• Built-in pasteTransformer support for stripping formatting characters (like dashes) from pasted OTP codes.
• A <noscript> CSS fallback so the input still renders usably with JavaScript disabled.

Common Use Cases

• Two-factor authentication (2FA) code entry screens after login.
• SMS/email one-time passcode verification during sign-up or password reset flows.
• Backup/recovery code entry for account recovery.
• PIN-style numeric entry for banking or payment confirmation UIs.

Under The Hood

Architecture - OTPInput renders an invisible native <input> positioned absolutely (inset: 0) inside a relatively-positioned container div. It listens to document-level selectionchange events and runs a selection-reconciliation algorithm to mirror the browser’s caret/selection state into React state (mirrorSelectionStart/mirrorSelectionEnd), which a memoized contextValue then maps into per-slot {char, isActive, hasFakeCaret} objects consumed via a render prop or OTPInputContext.Provider. Pattern validation happens inline in the change/paste handlers using a memoized RegExp; password-manager badge detection is delegated to a separate usePasswordManagerBadge hook that probes document.elementFromPoint near the container’s top-right corner; a global stylesheet (injected once via a guarded getElementById('input-otp-style') check) overrides autofill/selection colors and applies iOS-specific letter-spacing fixes; a ResizeObserver keeps a --root-height CSS variable in sync for font sizing.

Tech Stack - Written in TypeScript with React (16.8–19) as the sole peer dependency and no runtime dependencies. The library builds with tsup to CJS, ESM, and .d.ts outputs, minified with sourcemaps. The repo is a pnpm + Turborepo monorepo: packages/input-otp (the library), apps/playground (a Next.js app with Playwright E2E tests across Chromium/Firefox/WebKit and mobile viewports), and apps/website (the Next.js docs site). Linting uses typescript-eslint plus eslint-plugin-react-hooks; formatting uses Prettier configured for no semicolons and single quotes.

Code Quality - The library package itself has no unit tests; instead, all testing lives in apps/playground/src/tests as eight Playwright E2E spec files (typing, rendering, selections, slot behavior, props, word deletion, autofocus, onComplete) run across multiple browsers and viewports — a reasonable trade-off given the library is fundamentally about DOM selection/focus behavior that unit tests can’t exercise well. The source is a tight five-file, ~770-line surface with consistent naming (camelCase use- prefixed hooks, PascalCase components) and centralized types in types.ts. A handful of commented-out debug style blocks remain in input.tsx, and the main component mixes selection-tracking, password-manager orchestration, and rendering in one file, but edge-case handling (iOS Safari touch-callout detection, try/catch-guarded stylesheet rule insertion) shows care.

API Design - The public surface is a single OTPInput component plus typed regex constants. It requires only maxLength, paired with either children (Context API) or a render prop (mutually exclusive via a TypeScript union), and ships sensible defaults (inputMode="numeric", pushPasswordManagerStrategy="increase-width", autoComplete="one-time-code"). The README includes a copy-paste-ready Tailwind-based Slot/FakeCaret/FakeDash example so consumers can start from a working design immediately, and onComplete removes the need to manually diff previous/next values. The render/children union is only enforced at the type level, and pattern accepts a string or RegExp without additional runtime validation.