Components / input-otp

input-otp

One-time-password input boxes.

status: partial js: consumer support: baseline

Preview

Markup

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

Install

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

Accessibility

Classes

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

Dependencies

base/tokens