Input OTP animation
An invalid code shakes once; typing stays instant. Works on Base UI and Radix through <Cuts />.
with <Cuts />
What moves
| When | What you see | Timing | How |
|---|---|---|---|
| The code turns invalid | The slots shake once | 240 ms | Automatic |
The active slot moves as you type, so it stays instant.
Install
Input OTP is shadcn's own component. With <Cuts /> in your root layout (Quick start), there's nothing else to add:
npx shadcn add input-otpTurn it off
Put data-cut="none" on a input otp (or anything around it) to keep shadcn's own motion there. <Cuts responses="none" /> turns off every response across the app and keeps the cuts. With reduced motion, movement becomes a short fade or nothing.