OTP with Enhanced Focus Management

2 / 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; } }

Click anywhere on the input to focus and type.

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-enhanced-focus-management.tsx, with Input OTP and Label. Then paste the demo from the Code tab.