Otp Field

Live preview

Installation

pnpm dlx shadcn@latest add @sc1m/otp-field

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

import { OTPField, OTPFieldInput } from "@/components/ui/otp-field";

Composition

Every part is a separate export. OTPField owns state; the rest are presentational and must appear in this order.

OTPField└── OTPFieldInput

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

<DemoOTPField />

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Otp Field — see its reference for the full keyboard map.

• Disabled parts mute their contents rather than the element, keeping the focus ring at full strength where the part stays focusable.

Design tokens

The component reads semantic tokens only — no raw colour, radius, or duration appears in its source. Override the token, not the component.

Source

src/components/ui/otp-field/otp-field.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.