Input OTP

uistable

Input OTP — from shadcn/ui (radix-nova style).

npx shadcn add @krawma/input-otp

npm: input-otp@^1.4.2, lucide-react@^1.22.0 · registry: @krawma/utils

Preview

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

States

focus-visibledisabledcomplete

Keyboard

BackspaceArrowLeftArrowRightDelete

Depends on

utils

Purpose

A segmented one-time-code / PIN input (built on input-otp) — one visible slot per character, for verification codes and short numeric secrets.

Anatomy

InputOTP (owns the value + maxLength) › InputOTPGroup › InputOTPSlot (one per digit), with InputOTPSeparator between groups.

Style

No variants — token-backed slots; the active slot shows a caret, filled slots the entered character.

Behavior & functionality

Controlled (value + onChange) with a fixed maxLength; typing advances, Backspace moves back, paste distributes across slots.
Fire onComplete when all slots are filled.

Accessibility

Renders a single logical input under the hood — screen readers treat it as one field; label it (aria-label) and set inputMode/autoComplete="one-time-code".
Arrows / Backspace move between slots; the focused slot is indicated.

Do / Don't

✅ Set autoComplete="one-time-code" and act on onComplete.
❌ Don't use for general numeric entry — use number-input.