formstexulinot agent-emittableapp
NumberField
number-field
A numeric value with optional steppers, min, max and locale formatting.
Forms with the wiring documented, not guessed. Form controls take labels, descriptions and error text through props, and their keyboard and screen-reader behavior is documented in the accessibility notes below — generated from the manifest, not hand-maintained. The repository’s behavior suite holds the underlying patterns on Chromium, WebKit and a Pixel 7.
Live examples
Quantity
Quantity
Loading demo…
In your theme
This page renders in the site theme, enterprise-neutral. Every one of the 210 library themes re-colors every component through the --tx-* contract. The three below carry real token values from the library, rendered at build — no island, no extra requests.
Violet
backgroundsurfaceprimaryaccentborder
Monochrome
backgroundsurfaceprimaryaccentborder
Accessible Dark Contrast
backgroundsurfaceprimaryaccentborder
Props
| Name | Kind | Required | Default | Description |
|---|---|---|---|---|
value | number | no | — | The value, or null when empty (bind:value) |
min | number | no | — | — |
max | number | no | — | — |
step | number | no | 1 | — |
disabled | boolean | no | false | — |
readOnly | boolean | no | false | — |
required | boolean | no | false | — |
name | string | no | — | — |
size | enum (sm, md, lg) | no | "md" | — |
display | enum (input, output) | no | "input" | — |
commit | enum (enter, blur, input) | no | "enter" | When typed text commits: Enter and blur, blur only, or every keystroke |
onValueChange | event | no | — | — |
class | string | no | — | — |
Keyboard
| Key | Action |
|---|---|
A | A labelled spinbutton; steppers are named Increment and Decrement. |
Accessibility
- A labelled spinbutton; steppers are named Increment and Decrement.
Evidence for number-field
Latest committed gates for number-field (as of 2026-10-23). Static snapshot — not live CI.
Behavior
checkedscenario number-field
Rows in tests/behavior/scenarios/number-field.spec.ts, held to the WAI-ARIA APG pattern, run on Chromium and WebKit, and its touch rows on the Pixel 7.
Size (gzip)
texuli/number-field · budget 12.0 KiB
Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.
Axe
documented
tests/e2e/site-component-pages.spec.tsdocs/quality (a11y-*)
Site component pages axe gate; package-level a11y docs under docs/quality when present.
Browsers
chromiumwebkitmobile
Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.
When to use
Use when
- A quantity, amount or count the person types or steps
Don’t use when
Prefer another component
- A time of day (use time-field)
- A PIN or code (use pin-input)