input-otp

One-time-password input boxes.

status: partial js: consumer support: baseline

Preview

…

<div class="otp"><input class="otp-input" maxlength="1" pattern="[0-9]">…</div>

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/input-otp.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add input-otp

Visual boxes; auto-advance needs JS; per-input aria-label + group label

.otp .otp-input .otp-separator .otp-sm .otp-lg

base/tokens