Input OTP

One cell per character, with a drawn caret in the active one.

pulls ininput-otplucide-react@afterglow/theme

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Installation

npx shadcn@latest add @afterglow/input-otp

Composition

Component structure.

InputOTP
├── InputOTPGroup
│   └── InputOTPSlot
└── InputOTPSeparator

API Reference

InputOTP

Prop	Type	Default
containerClassName	string	-

InputOTPSlot

One character cell. index is which position of the code it draws, so a group of four is four slots numbered 0 to 3.

Prop	Type	Default
index	number	-

Everything else is input-otp's API, documented there.