OTP with Paste Optimization

3 / 20

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Paste automatically filters to digits only.

Get your install command

Your install command, free with an account. Sign in once and every component and demo is yours.

139 components
Every demo
Copy or download
CLI install

Google GitHub

Use email insteadNo credit card

Adds components/input-otp-otp-with-paste-optimization.tsx, with Button, Input OTP and lucide-react. Then paste the demo from the Code tab.