Input OTP

Accessible one-time password component with copy paste functionality. Built on top of input-otp.

Same shadcn/ui API
Supports iOS + Android copy-paste-cut
Automatic OTP code retrieval from transport (e.g SMS)
Supports screen readers (a11y)
Automatically optimizes for password managers
Animated with Motion
Works with form validation
Easy to customize

Built with:

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

Input OTP

Installation

Examples

Pattern

Separator

Form Validation

Enter your license key