Input OTP

One-time-code input with slots, over input-otp.

InputOTP is a verification-code input: keyboard- and paste-driven, styled slot groups, screen-reader friendly.

Installation

import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@iammikz/srui";

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

Type or paste a code

Exports

Export	Notes
`InputOTP`	Root; `maxLength` (code length), `value`/`onChange`, `pattern` (default digits), `autoFocus`
`InputOTPGroup`	Slot cluster
`InputOTPSlot`	One character cell — `index` required; shows caret/caret-blink when active
`InputOTPSeparator`	The dash between groups

Accessibility

The input itself is screen-reader-only; slots announce as labelled cells and the caret blink is disabled under prefers-reduced-motion.