i

Number input

Entering · researched

A field for entering numbers, with steppers to raise or lower the value.

molecule

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

InputNumber native: partly antd 6.6.5
Variants
outlined, borderless, filled, underlined
Sizes
large, medium, small
States documented
disabled, error
Accessibility guidance
no

Div wrapper around an input with role=spinbutton and up/down step controls (mode input or spinner).

1 corrected on re-read
  • states_documented: ["error"] → ["disabled","error"] InputNumber API: disabled; status error|warning

docs ↗ · code ↗

Carbon

Number input native: yes @carbon/react 1.117.0
Variants
—
Sizes
sm, md, lg
States documented
default, hover, focus, disabled, error, loading
Accessibility guidance
yes

Renders an input (type number or text) with stepper buttons. FluidNumberInput is a separate fluid-style export (instance).

2 corrected on re-read
  • states_documented: ["hover","focus","disabled","error"] → ["default","hover","focus","disabled","error","loading"] States table: Enabled, Hover, Focus, Error, Warning, Disabled, Skeleton, Read-only
  • urls: {"docs_url":"https://carbondesignsystem.com/components/number-input/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/NumberInput"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/number-input/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/NumberInput"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/components/number-input/guidelines; code URL 200

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. No number input with steppers. Text input page covers numeric entry using the Input component with inputmode/spellcheck options and prefix/suffix; no stepper control.

Material Web

Text field, type="number" subset native: yes @material/web 2.5.0
Variants
filled, outlined
Sizes
—
States documented
disabled, error
Accessibility guidance
yes

Index missed it. No separate component: md-*-text-field renders a native input; with type=number the browser's own spinner shows, hidden with no-spinner, and stepUp/stepDown methods are documented. Prefix/suffix example uses type=number. Accessibility section covers text fields in general.

docs ↗ · code ↗

Primer

absentPrimer does not ship this component. Nothing is drawn in its place.

No NumberInput component. Docs for TextInput state it may be used as a number input by passing type="number" (native input), so only the native element is available. Checked: primer.style/product/components/ index, internal-components list, ui-patterns, packages/react/src tree (incl. deprecated/, experimental/, internal/).

Spectrum

Number field native: partly @spectrum-web-components/button 1.12.4
Variants
—
Sizes
S, M, L, XL
States documented
default, hover, focus, disabled, error
Accessibility guidance
no

Docs from the rsp page; sizes from NumberField.json. S2/v3 build on React Aria NumberField (an input with spinbutton semantics plus stepper buttons); SWC 1st-gen sp-number-field and spectrum-css stepper/number field exist. Installed SWC 1.12.4 has number-field. The rsp page has no accessibility section.

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

Checked the docs component index and status page and the develop packages/ tree (88 entries, matching installed 3.14.0): no number-input component or package; Text input page documents only the generic usa-input (guidance says avoid splitting numbers), Input mask constrains formats, and type=number appears only inside Memorable date styles. No stepper control exists.

Platform facts

Native elementinput type=numberSpec: represents a control for setting the value to a string representing a number. MDN: step default 1, min/max, step=any; the browser may show stepper arrows; use only for incremental numbers (not postal or card numbers; use text with inputmode=numeric). APG Spinbutton: role spinbutton, aria-valuenow/min/max, aria-valuetext, aria-invalid true if outside range. Native input needs no ARIA.
Baseline—
APG patternspinbutton
ARIA role—
Shipped by4 of 7 systems

Anatomy

  1. label — APG Spinbutton: visible label via aria-labelledby, else aria-label; HTML label.
  2. text field — APG: 'a text field that displays the current value'.
  3. increase button optional — APG: 'an increase button'; usually not focusable, keys do the job.
  4. decrease button optional — APG: 'a decrease button'.

Keys the APG binds

  • Up ArrowIncreases the value.
  • Down ArrowDecreases the value.
  • HomeIf the spinbutton has a minimum value, sets the value to its minimum.
  • EndIf the spinbutton has a maximum value, sets the value to its maximum.
  • Page Up (Optional)Increases the value by a larger step than Up Arrow.
  • Page Down (Optional)Decreases the value by a larger step than Down Arrow.
  • If the spinbutton text field allows directly editing the value, the following keys are supportedStandard single line text editing keys appropriate for the device platform.
  • Printable CharactersType characters in the textbox.

The seven states

default Empty or holding a number.
hover Pointer-only CSS state; not defined by APG or HTML.
focus APG: focus remains on the text field during operation.
active Pressed state while the pointer or key is down; CSS :active. Not defined by APG.
disabled disabled attribute on the native input.
error MDN: :invalid when outside min/max or off step; APG: aria-invalid set to true if outside the allowed range.
loading n/a — Not defined by APG or HTML.

Every cell was read twice, the second time from raw sources by a separate pass. 3 of 35 fields changed on the second read — open any “corrected” note to see what it said before.