Input OTP

One-time-code input — auto-advance, backspace-back, arrows, full-code paste, SMS autofill, grouping and masking.

3 files · 161 locdeps: clsx, tailwind-merge

Check your email

Enter the 6-digit code — try 424242 (paste works too).

Waiting for code…

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/input-otp.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs input-otp

import { InputOTP } from "@/components/opus/ui/input-otp";

<InputOTP length={6} groups={[2]} onComplete={verify} />

Prop	Type	Default	Description
length	number	6	Slots.
value / onValueChange / onComplete	string	—	Code + completion callback.
mode	"numeric" \| "alphanumeric"	"numeric"	Accepted characters.
groups	number[]	—	Separator after these indices.
mask / invalid	boolean	—	Password dots / error style.