# OTP Input

> Verification code input with auto-advance, backspace navigation, full paste support, and animated states. Each digit box auto-focuses the next on entry. Backspace clears and moves back. Paste fills all fields instantly. Animated focus ring with subtle glow, pop animation when a digit lands, blinking cursor in empty focused box. Error state triggers shake animation. Success state pulses each digit sequentially. Optional separator dash between groups. Masked mode for PIN entry. Three sizes. Fires onComplete when all digits are filled. Built on Framer Motion.

- Author: [Yad Hakim](https://21st.dev/@dev.yadhakim)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@dev.yadhakim/components/otp-input

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dev.yadhakim/otp-input?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt