--- title: "Stepper UI: anatomy, variants and examples | Kombai" description: "A stepper changes a number one step at a time with minus and plus buttons, like the guests on a booking or the items in a cart." canonical_url: https://kombai.com/glossary/stepper/ author: "The Kombai Team" --- # Stepper A stepper changes a number one step at a time with minus and plus buttons, like the guests on a booking or the items in a cart. - Also called: quantity picker, number input - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/stepper/), [30 mobile designs](https://kombai.com/gallery/mobile/stepper/) - [Bramblewick](https://kombai.com/gallery/inspirations/stepper-ios-25/) (Mobile) - [Junstad](https://kombai.com/gallery/inspirations/stepper-web-39/) (Web) - [Tarnside](https://kombai.com/gallery/inspirations/stepper-ios-19/) (Mobile) ## 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. ## When to use stepper - **Small counts.** Guests, seats, portions or items, where people change the number by a few. - **A sensible default.** The value starts close to what most people want, like 1 item or 2 adults. - **Tight spaces.** Cart lines and filter rows, where a slider or a field wouldn't fit. ## When not to use one - **Large or exact numbers.** For a step goal or a loan amount, use a text field, or pair one with the stepper. - **Wide ranges.** To pick a value between two far-apart ends, use a slider. - **Steps in a process.** The numbered row at the top of a wizard is a progress indicator, not a stepper. ## Anatomy 1. **Label**: Names what is counted 2. **Hint**: Optional, like an age range 3. **Minus button**: Steps down, dims at the minimum 4. **Value**: The current number 5. **Plus button**: Steps up, dims at the maximum 6. **States**: Default, at the limit, disabled, focus ## Variants We sorted every stepper design in the Kombai gallery, set aside the numbered step trackers that share the category, and found five patterns. ### 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. - [Quayline](https://kombai.com/gallery/inspirations/stepper-ios-15/) (Mobile) - [Sternway](https://kombai.com/gallery/inspirations/stepper-ios-13/) (Mobile) - [Quenora](https://kombai.com/gallery/inspirations/stepper-web-20/) (Web) ### 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. - [Roadstead](https://kombai.com/gallery/inspirations/stepper-ios-12/) (Mobile) - [Duvenkade](https://kombai.com/gallery/inspirations/stepper-web-5/) (Web) - [Lantvoorde](https://kombai.com/gallery/inspirations/stepper-web-33/) (Web) ### 3. Goal steppers One big value between wide minus and plus buttons, with a hint below, for a target people set once. - [Saltmark](https://kombai.com/gallery/inspirations/stepper-ios-11/) (Mobile) - [Gorse](https://kombai.com/gallery/inspirations/stepper-ios-8/) (Mobile) - [Peldrin Studio](https://kombai.com/gallery/inspirations/stepper-web-49/) (Web) ### 4. Steppers on cards Small steppers on product or add-on tiles, so each extra gets its own count without opening anything. - [Loamhurst](https://kombai.com/gallery/inspirations/stepper-ios-23/) (Mobile) - [Screebank](https://kombai.com/gallery/inspirations/stepper-ios-18/) (Mobile) - [Deckla](https://kombai.com/gallery/inspirations/stepper-web-16/) (Web) ### 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. - [Firnwell](https://kombai.com/gallery/inspirations/stepper-ios-17/) (Mobile) - [Dovekie](https://kombai.com/gallery/inspirations/stepper-ios-21/) (Mobile) - [Badminton](https://kombai.com/gallery/inspirations/stepper-web-34/) (Web) ## Where steppers show up ### Carts and product pages A quantity beside the Add to cart button, and again on every line of the cart. - [Runnelford Ledger Store](https://kombai.com/gallery/inspirations/stepper-web-22/) (Web) - [Jarnley's](https://kombai.com/gallery/inspirations/stepper-web-12/) (Web) - [Jalda](https://kombai.com/gallery/inspirations/stepper-web-14/) (Web) ### Filters Guests, bathrooms or years of experience, set as a minimum count above the results button. - [Thistlebank](https://kombai.com/gallery/inspirations/stepper-ios-27/) (Mobile) - [Juneberry](https://kombai.com/gallery/inspirations/stepper-ios-9/) (Mobile) - [Alvenly](https://kombai.com/gallery/inspirations/stepper-web-26/) (Web) ### Seats and plans The number of seats on a team plan, with the price updating beside it. - [Dresvik](https://kombai.com/gallery/inspirations/stepper-web-35/) (Web) - [Rylark](https://kombai.com/gallery/inspirations/stepper-web-21/) (Web) - [Orvello](https://kombai.com/gallery/inspirations/stepper-web-18/) (Web) ### Recipes Portions that scale the ingredient list and the shopping basket. - [Warmfront](https://kombai.com/gallery/inspirations/stepper-ios-16/) (Mobile) - [Marjoram](https://kombai.com/gallery/inspirations/stepper-ios-10/) (Mobile) - [Cairnwell](https://kombai.com/gallery/inspirations/stepper-ios-4/) (Mobile) ## Stepper vs similar components | | [Stepper](https://kombai.com/glossary/stepper/) | [Slider](https://kombai.com/glossary/slider/) | [Text field](https://kombai.com/glossary/text-field/) | [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) | |---|---|---|---|---| | Changes | One step per press | Freely, by dragging | By typing | By picking from a list | | Range | Small, a few steps | Wide, between two ends | Any value | A fixed set of options | | Best for | Guests, seats, quantities | Price ranges and volume | Exact or large numbers | Long lists of values | ## 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. - 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 - [Slider](https://kombai.com/glossary/slider/) - [Text field](https://kombai.com/glossary/text-field/) - [Segmented control](https://kombai.com/glossary/segmented-control/) - [Progress indicator](https://kombai.com/glossary/progress-indicator/) ## References - [WAI-ARIA Authoring Practices: Spinbutton pattern](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) - [Apple Human Interface Guidelines: Steppers](https://developer.apple.com/design/human-interface-guidelines/steppers) - [MDN: The number input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number)