component · forms
Stepper
also called spin button (fluent), spinbutton (aria-apg), number input (community), quantity selector (community), input stepper (nngroup)
A small two part control with minus and plus that nudges a number up or down one step at a time.
A stepper is the control for numbers you adjust rather than enter. Two guests becomes three, quantity one becomes two, the font goes up a point: moves of one known unit, made by pressing a target instead of selecting text and retyping it. That is its entire case. It wins where the range is short, the step is obvious, and the starting value is usually close to the answer, which is also why it is the default number control on touch, where a numeric keyboard is an interruption and a plus button is not.
It loses everywhere else. Twelve presses to reach twelve is worse than typing twelve, so a stepper over a wide range needs a field you can also type into, which is what most web implementations actually ship: a number field with increment and decrement buttons attached. Hold to repeat helps and does not rescue it. Keep the ends honest as well: at the minimum the minus should be visibly unavailable rather than silently inert, and the value should never step past a limit and quietly clamp without saying so.
The accessible name for this control is spinbutton, and the ARIA pattern of
that name is what a hand built one has to satisfy: role="spinbutton" with
aria-valuemin, aria-valuemax, aria-valuenow, and arrow keys that step it,
plus Home and End for the limits. A native <input type="number"> brings all of
that and the mobile keyboard with it, at the cost of browser-drawn arrows that
are almost impossible to style consistently, which is why so many teams rebuild
the control by hand.
The word has a notorious collision. In Material UI, Ant Design, and much of the React ecosystem, a Stepper is the numbered progress track across the top of a wizard, which this site files under step indicator. Apple, the HTML specification, and Nielsen Norman all use “stepper” for the plus and minus control, and the two components have nothing in common. In a mixed codebase, say “quantity stepper” or “spin button” when you mean this one and “step indicator” or “progress steps” when you mean the other, and never rely on “stepper” alone to be understood.
Which word?
| If you want | say |
|---|---|
| adjusting a number by small known increments | stepper |
| showing progress through a numbered flow | step indicator |
| picking a value where the range matters more than the number | slider |
| the iOS drum you spin to pick a value | wheel picker |
| moving something by exact steps with the keyboard | nudge |
Implementations
Specimens illustrate the concept; for production use, start here.
| hig | Steppers |
| aria-apg | Spinbutton |
| carbon | Number input |
| base-ui | Number field |