OTP with Error State

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

Hint: Try entering 123456

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-error-state.tsx, with Input OTP. Then paste the demo from the Code tab.