# NumberField

> A numeric value with optional steppers, min, max and locale formatting. Forms with the wiring documented, not guessed. Catalog id number-field.

Language: en
Canonical: https://texuli.com/component-pages/number-field/
Markdown: https://texuli.com/component-pages/number-field.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML.
Last Updated: 2026-11-13

---

[Components](https://texuli.com/component-pages/) NumberField

forms texuli not agent-emittable app

`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.

- Violetlight mode · AA contrast`background`
- `surface`
- `primary`
- `accent`
- `border`

[Open Theme Studio](https://texuli.com/theme-studio/)
- Monochromelight mode · AA contrast`background`
- `surface`
- `primary`
- `accent`
- `border`

[Open Theme Studio](https://texuli.com/theme-studio/)
- Accessible Dark Contrastdark mode · AAA contrast`background`
- `surface`
- `primary`
- `accent`
- `border`

[Open Theme Studio](https://texuli.com/theme-studio/)

## Props

Public props for NumberField

| 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

Keyboard behavior for NumberField

| 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

checked scenario `number-field`

6 checks

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.ts`
- `docs/quality (a11y-*)`

Site component pages axe gate; package-level a11y docs under docs/quality when present.

### Browsers

- `chromium`
- `webkit`
- `mobile`

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)

## Related

- [`field`](https://texuli.com/component-pages/field/)
- [`input`](https://texuli.com/component-pages/input/)
- [`pin-input`](https://texuli.com/component-pages/pin-input/)

## For agents

The live preview, prop editor and copyable code run in the browser. The component manifest holds the same props, events, examples and guidance as data. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md).

MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)):

- `component.get`: Read a component manifest with `{"id":"number-field"}`.
- `example.search`: Find component examples.
- `catalog.search`: Search the component catalog.

Docs:

- [number-field component doc (Markdown)](https://texuli.com/llms/components/number-field.md)
- [Component docs for agents (llms.txt)](https://texuli.com/llms/llms.txt)
- [Catalog manifest snapshot (JSON)](https://texuli.com/catalog/catalog.json)
- [texuli README](https://github.com/DailybotHQ/texuli/blob/main/packages/texuli/README.md)
- [@texuli/catalog README](https://github.com/DailybotHQ/texuli/blob/main/packages/catalog/README.md)