Layout UI

Input OTP

One-time password input with individual character slots, grouping, and separator support. Built on Base UI OTPField.

Preview

Installation

bash
npx shadcn@latest add @layout/input-otp

Usage

tsx
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@/components/ui/input-otp"

Examples

With separator

Controlled with completion

Enter your one-time code

Masked input

Guidelines for AI agents

Always set length on InputOTP equal to the total number of InputOTPSlot elements. Pass index (0-based) to each slot so Base UI knows which character to render. Wrap related slots in InputOTPGroup for connected borders. Use InputOTPSeparator between groups.

Never

  • Neverrender more InputOTPSlot elements than the length prop on InputOTP
  • Neveromit the index prop on InputOTPSlot
  • Neveruse for general text input — use Input instead
  • Neverhardcode slot border colour; it derives from --layout-input

Tokens consumed

--layout-input--layout-ring--layout-fg--layout-muted-fg--layout-duration-base