InputOTP

One-time password input component with configurable length, separators, and slot groups. Commonly used for 2FA verification codes.

Import

Live Demo

One-time password input with configurable groups.

Simple 6-digit

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

With separator (2+2+2)

Props

Name	Type	Default	Description
maxLength	number	—	Maximum number of characters
containerClassName	string	—	CSS class for the container

Examples

Simple 6-Digit

With Separator (2+2+2)

Grouped format common in verification codes.