NumberField

A locale-aware number input with step buttons.

Import
import { NumberFieldRoot, NumberFieldDecrement, NumberFieldInput, NumberFieldIncrement } from '@texuli/primitives/number-field';
Pattern
Spinbutton (WAI-ARIA APG)
Size budget
6.0 KiB gzip for @texuli/primitives/number-field
Reference
packages/primitives/docs/prim-number-field.md

Live demo

Loading the NumberField demo…

Anatomy

NumberField anatomy: each box holds the parts inside it.
  • NumberFieldRoot
    • NumberFieldDecrement
    • NumberFieldInput
    • NumberFieldIncrement

Behavior checks

tests/behavior/scenarios/number-field.spec.ts checks the NumberField scenario in the browser (6 checks) on Chromium, WebKit and the Pixel 7.

  • the APG keys step, page, and jump to the bounds; Tab skips the steppers
  • typing commits a number for the locale, and letters are refused
  • a mouse press steps, keeps focus in the field, and repeats while held
  • a touch tap steps without moving focus into the field (no keyboard pops up)
  • the form submits the numbers, not the formatted text
  • axe finds no violations, at rest and at a bound

Limits

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