Input OTP
One-time-code input with slots that spring as digits land.
An OTP input collects verification codes (2FA, email or SMS codes). It is one real input underneath, so paste, autofill from SMS and password managers all work, and each digit springs into its slot as it arrives.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/input-otp.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/input-otp.
Builds on: motion
Usage
import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
<InputOTP maxLength={6}>
<InputOTPGroup>
{[0, 1, 2, 3, 4, 5].map((i) => <InputOTPSlot key={i} index={i} />)}
</InputOTPGroup>
</InputOTP>Motion
Each digit drops into its slot with a small spring (GSAP cue-snap) as it is typed or pasted.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
InputOTP
Wraps input-otp's OTPInput (maxLength, value, onChange, onComplete, pattern).
| Prop | Type | Default | Description |
|---|---|---|---|
| containerClassName | string | — | Classes for the slot container. |
InputOTPSlot
| Prop | Type | Default | Description |
|---|---|---|---|
| index | number | — | Which character this slot shows. |
InputOTPGroup · InputOTPSeparator
Accessibility
- A single native input carries the value, so autocomplete="one-time-code" works.
- Give it an aria-label such as "Verification code".
FAQ
Also searched as: otp input react · verification code input · pin input · 2fa code input · shadcn input otp