PinInput

A one-time code entered one character per cell.

Import
import { PinInput } from '@texuli/primitives/pin-input';
Pattern
Text input
Size budget
4.0 KiB gzip for @texuli/primitives/pin-input
Reference
packages/primitives/docs/prim-pin-input.md

Live demo

Loading the PinInput demo…

Anatomy

PinInput anatomy: each box holds the parts inside it.
  • PinInput.Root
    • PinInput.Cell

Behavior checks

tests/behavior/scenarios/pin-input.spec.ts runs 10 rows against the PinInput scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 10 rows
  1. one named text field, offered for one-time-code autofill
  2. typing digits fills the code
  3. characters outside the pattern are refused
  4. the code stops at its length
  5. Backspace removes the last character
  6. filling the last cell reports the code once
  7. pasting a code fills every cell and completes it
  8. pasting a code with spaces ("123 456") fills it
  9. a click or tap on the cells focuses the field
  10. axe finds no violations, empty and filled

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.0 KiB gzip for @texuli/primitives/pin-input (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).