Controlled

5 / 10

[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; } }

Enter your one-time password.

Get your install command

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

104 components
Every demo
Copy or download
CLI install

Google GitHub

Use email insteadNo credit card

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