shadcn-syntax-input-otp
shadcn ui : Input OTP primitive
The InputOTP family wraps the input-otp library by guilhermerodz and renders a one-time-password input as a row of fixed-width slots that mimic individual character boxes while remaining a single accessible text input under the hood. Every claim in this skill traces to the canonical source at apps/v4/registry/new-york-v4/ui/input-otp.tsx in shadcn-ui/ui, the official docs at https://ui.shadcn.com/docs/components/radix/input-otp, and the upstream library at https://github.com/guilhermerodz/input-otp.
Quick Reference
| Primitive | Wraps | Role |
|---|---|---|
InputOTP |
OTPInput from input-otp |
Root container, owns maxLength, value, onChange, pattern, onComplete, autoComplete, disabled |
InputOTPGroup |
plain div |
Visual group of consecutive slots ; combine multiple groups with InputOTPSeparator between them |
InputOTPSlot |
plain div reading from OTPInputContext |
One visible character box, requires index: number matching its position 0 to maxLength - 1 |
InputOTPSeparator |
plain div with role="separator" and a MinusIcon |
Visual divider between two InputOTPGroup instances |
Install : pnpm dlx shadcn@latest add input-otp (CLI copies components/ui/input-otp.tsx and installs the input-otp peer dependency).
When to use this skill
Use InputOTP for any flow where the user must enter a short, fixed-length code character-by-character with visible per-character boxes :