Input OTP

Free

Accessible one-time password input built on the input-otp library. A single invisible input rendered as individual character slots, with copy-paste support, pattern validation, and an animated caret on the active slot.

Installation

Install via CLI

npx @moontra/moonui-cli add input-otp

Usage

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

Examples

Basic 6-Digit Code

A six character one-time password input. Type to fill the slots, or paste the full code — it is distributed across the slots automatically.

Digits Only Pattern

Restrict input with the pattern prop. The REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, and REGEXP_ONLY_DIGITS_AND_CHARS constants are re-exported for common cases.

With Separator

Split the slots into multiple groups and place an InputOTPSeparator between them — a common layout for verification codes formatted as 123-456.

Controlled

Use value and onChange to control the input. This example shows live progress and a confirmation message once all six characters are entered.