Spinbutton

A spinbutton is a numeric input that lets users type a value or adjust it with increment and decrement controls.

Spinbuttons are suited for discrete numeric values such as quantities or counts. When users need to select a numeric value within a defined range, a slider may be more appropriate.

Accessibility Features

  • type="number" provides the spinbutton role and behaviour.
  • The + and − buttons can be hidden from screen readers and keyboard with aria-hidden="true" and tabindex="-1", since the input handles keyboard interaction natively. If left accessible, each needs a descriptive aria-label. A visually hidden <output> region must also announce the updated value to screen readers when the + and − buttons are pressed.

Example

Code Snippet