Steppers from the Kombai gallery: a restaurant app's party size, a homeware store's product quantity and a hydration tracker's daily target.
What is a stepper?
A stepper is a pair of minus and plus buttons around a number. Each press changes the number by one step, and the buttons stop at a minimum and a maximum. It suits small counts that people change by a few, like guests, seats or portions.
- The current number sits between the buttons, so people see what they are changing.
- At a limit, the minus or plus button dims and stops working.
Steppers show up across checkout, cart, product detail and pricing screens.
When to use a stepper
- Small countsGuests, seats, portions or items, where people change the number by a few.
- A sensible defaultThe value starts close to what most people want, like 1 item or 2 adults.
- Tight spacesCart lines and filter rows, where a slider or a field wouldn't fit.
When not to use one
- Large or exact numbersFor a step goal or a loan amount, use a text field, or pair one with the stepper.
- Wide rangesTo pick a value between two far-apart ends, use a slider.
- Steps in a processThe numbered row at the top of a wizard is a progress indicator, not a stepper.
Anatomy of a stepper
This one works. Press minus or plus, or tab to a number and use the Up and Down Arrow keys.
Adults
Ages 13 or above
Children
Ages 2 to 12
2 guests
- Default
- At the minimum
- Disabled
- Keyboard focus
- LabelNames what is counted
- HintOptional, like an age range
- Minus buttonSteps down, dims at the minimum
- ValueThe current number
- Plus buttonSteps up, dims at the maximum
- StatesDefault, at the limit, disabled, focus
Stepper variants
We sorted every stepper design in the Kombai gallery, set aside the numbered step trackers that share the category, and found five patterns. Browse all 50 web and 30 mobile designs.
1. Inline steppers
The default. A compact minus, number and plus at the end of a row in a settings list, a form or a table.
2. Guest counters
One stepper per kind of guest, each with an age range under the label, so a booking adds up in one place.
3. Goal steppers
One big value between wide minus and plus buttons, with a hint below, for a target people set once.
4. Steppers on cards
Small steppers on product or add-on tiles, so each extra gets its own count without opening anything.
5. Steppers with units
The value carries its unit, like 45 min, 3 nights or 4 times a day, so people know what one step means.
Where steppers show up
Carts and product pages
A quantity beside the Add to cart button, and again on every line of the cart.
Filters
Guests, bathrooms or years of experience, set as a minimum count above the results button.
Seats and plans
The number of seats on a team plan, with the price updating beside it.
Recipes
Portions that scale the ingredient list and the shopping basket.
Stepper vs similar components
Build notes
- Make the number a role="spinbutton" with aria-valuenow, aria-valuemin and aria-valuemax.
- Up and Down Arrow change the value. Home and End jump to the minimum and the maximum.
- Name the buttons for what they do, like "Add adult", since a plus sign has no name of its own.
- Disable the minus button at the minimum and the plus button at the maximum.
- Pair the stepper with a text field when people may need a value far from the default.
- <input type="number"> steps on its own, but skip it for codes and card numbers.
FAQ
What is the difference between a stepper and a slider?
A stepper changes a number by one step per press and shows the exact value, which suits small counts like guests. A slider sets a value anywhere in a range by dragging, which suits rough values like a price ceiling.
Should people be able to type the number?
When large changes are likely, yes. Apple's guidelines suggest pairing a stepper with a text field in that case, like the number of copies on a print screen. For counts that rarely go past a handful, the buttons are enough.
Is a stepper the same as the steps at the top of a form?
No. The same word is used for the numbered row at the top of a multi-step form, like 1 Cart, 2 Shipping, 3 Payment. That is a progress indicator. This page covers the minus and plus control.
How does a stepper work with a keyboard?
In the spin button pattern, the number takes focus. The Up and Down Arrow keys change it by one step, Home and End jump to the minimum and the maximum, and Page Up and Page Down can take bigger steps.
Related terms
All glossary terms · Browse 50 web and 30 mobile stepper designs