Number Field

Accessibility

Import NumberField, NumberFieldLimitEdge, NumberFieldSize from @prepared911/ui/number-field.

The input is a spinbutton with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext (the formatted value with its affixes). The rolling digits are aria-hidden; the input is the only accessible value.
The label, description and error are wired like Field: aria-describedby, aria-errormessage and aria-invalid. While the limit note shows it is added to aria-describedby, and while a typed value is past a limit and has warned the input also carries aria-invalid.
Step buttons are real buttons named by decrementLabel and incrementLabel. At a limit they carry aria-disabled and stay focusable. Keyboard or assistive activation takes exactly one step.
Button steps and limits are announced in a polite live region through valueAnnouncement. Typed values above max announce at once; under min after a short delay.
Arrow, Page, Home and End keys step and jump; Enter commits a draft; Escape reverts it.
The description stays one plain run of text while its words animate, so aria-describedby reads it whole.
roll={false} changes nothing for assistive technology: the input is still the only accessible value.
Reduced motion removes the strain, shake, note travel, recenter, glyph press scale, word motion and scrub follow; a brief color change remains.

Error announcement. An error that appears or changes after the control mounts is announced politely once, unless it comes from a submit attempt that the enclosing Form speaks for with its focus move or summary. A cleared error announces nothing. A Form opts out with announceFieldErrors={false}.

Input purpose

NumberField defaults autocomplete="off" so browser history does not cover the spinbutton. When the number is information about the user (a birth year, a card expiry month), pass the purpose token as autoComplete (WCAG 1.3.5); it replaces the default.

Number Field / API and Development

Pagination / Usage

On this page

Input purpose

Number Field

Accessibility

Import NumberField, NumberFieldLimitEdge, NumberFieldSize from @prepared911/ui/number-field.

The input is a spinbutton with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext (the formatted value with its affixes). The rolling digits are aria-hidden; the input is the only accessible value.
The label, description and error are wired like Field: aria-describedby, aria-errormessage and aria-invalid. While the limit note shows it is added to aria-describedby, and while a typed value is past a limit and has warned the input also carries aria-invalid.
Step buttons are real buttons named by decrementLabel and incrementLabel. At a limit they carry aria-disabled and stay focusable. Keyboard or assistive activation takes exactly one step.
Button steps and limits are announced in a polite live region through valueAnnouncement. Typed values above max announce at once; under min after a short delay.
Arrow, Page, Home and End keys step and jump; Enter commits a draft; Escape reverts it.
The description stays one plain run of text while its words animate, so aria-describedby reads it whole.
roll={false} changes nothing for assistive technology: the input is still the only accessible value.
Reduced motion removes the strain, shake, note travel, recenter, glyph press scale, word motion and scrub follow; a brief color change remains.

Input purpose

Number Field / API and Development

Pagination / Usage

On this page

Input purpose