build69 / Components / Text Inputs / input-otp

input-otp

v1.0.1Updated 20 Jul 2026

shadcn input-otp primitive (installed via `npx shadcn add input-otp`). Provides InputOTP / InputOTPGroup / InputOTPSlot / InputOTPSeparator with per-slot caret, paste support, and aria-invalid ring. Source primitive for

View source ← Back to catalog

Preview

Live · 8 stories

DefaultOpen ↗

▸Why this is recommendedotpinputshadcnprimitive+3

The default, out-of-the-box input-otp.

Recommended for+14

✓Foundation for OtpInput
✓Custom OTP layouts that need slot-level control

Tags+6

otpinputshadcnprimitiveverificationcodedefault

Features+4

InputOTP root (wraps the input-otp OTPInput)
InputOTPGroup + InputOTPSlot per-cell rendering
InputOTPSeparator
Per-slot caret + active state
Paste support
aria-invalid styling

Not recommended for−2

✕Most product surfaces (use OtpInput)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "input-otp" })

Usage

import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/inputs/input-otp';

<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
  </InputOTPGroup>
</InputOTP>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired

maxLength

Total slot count

numberyes

value

Controlled value

string—

onChange

Value change callback

function—

pattern

Regex (e.g. REGEXP_ONLY_DIGITS)