Stepper
/STEP-er/ · noun · INPUT pattern · #043
Two buttons joined at the hip for small, precise adjustments — quantities, copies, guests.
Also called: number stepper, quantity selector, plus minus buttons.
You might call it
- “the plus and minus buttons”
- “a quantity selector”
- “the − 1 + buttons in a shopping cart”
- “the up and down number buttons”
- “the counter with plus and minus”
…its name is Stepper.
Common questions
What are the plus and minus buttons for a quantity called?
A stepper, also called a number stepper or quantity selector: a minus button, the current value and a plus button that change a number one step at a time. iOS calls it Stepper (UIStepper).
In code
| SwiftUI | Stepper |
|---|---|
| UIKit | UIStepper |
| Android / Flutter | No stepper component — two icon buttons around a number |
| Web (HTML / ARIA) | <input type="number"> role="spinbutton" |
Prompt for your AI coding tool
Add a stepper for the quantity: a minus button, the current number and a plus button in one row. Each tap changes the value by one within a minimum and maximum; the minus button is disabled at the minimum and plus at the maximum, holding a button repeats, and the number can also be typed. Expose it as a spin button with its current, minimum and maximum values (an <input type="number"> on the web).
More UI words to use when vibe coding →