Input OTP

A one-time code input with one slot per character and paste support.

Verification code

When to use

Use when: Entering a one-time code of fixed length.
Avoid when: The code length varies, or people will paste long tokens; use Input.

Installation

bunx shelf add input-otp

The source lands in src/components/ui/input-otp.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as InputOTP from "@/components/ui/input-otp";
import { Label } from "@/components/ui/label";

<Label htmlFor="code">Verification code</Label>
<InputOTP.Root id="code" length={6}>
  {Array.from({ length: 6 }, (_, index) => (
    <InputOTP.Slot key={index} aria-label={index ? `Character ${index + 1} of 6` : undefined} />
  ))}
</InputOTP.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.