NumberInput

A field for a number. A text input - so what is typed is the user's until it is settled - that reads and writes the number in its locale, clamps it to a range, and steps by the arrow keys, Home/End,...

Accessibility

  • A role="spinbutton" text input with aria-valuenow, aria-valuemin and aria-valuemax: the number and its range are announced; name it with a FormLabel or aria-label.
  • The step buttons are aria-labelled (give them text in the app's language) and out of the tab order; the keys do the same.
  • error sets aria-invalid; helper text is read as the field's description.