O T P

The only lit, all-in-one Input OTP component you’ll find online. Easy to use, highly customizable, and packed with features.

Basic

Here’s the basic usage of the Input OTP component.

Preview

Code

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

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add otp

Separator

To include a separator between the OTP input groups, use the InputOTPSeparator component.

Preview

Code

Controlled

To control the Input OTP component, utilize the value and onChange props.

Preview

Code

Enter your one-time password.

Textarea Number Field