# Stepper

> A stepper is a control with a minus and a plus that changes a value one step at a time. A step indicator is a different thing that shows where someone is in a flow; iOS has the first and Material 3 has neither.

Page: https://www.appetiteui.com/glossary/stepper. Stepper vs progress steps: counter and step indicator. Also called Quantity stepper, Counter, Progress steps, Step indicator.

## Why it matters

The word stands for two components, and a spec that says stepper can mean either. A counter changes a number, a step indicator reports progress through a flow, and they are built differently.

Apple notes that the stepper does not show the value itself, so it has to sit next to a field that does.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Stepper | No stepper or step indicator | Stepper and Progress Steps |
| Stepper in the file | 92 by 32 pill | None in the file | See below |
| Step indicator in the file | None for a flow | None in the file | See below |

## In Appetite UI

The Input page holds Stepper at 107 by 36 at sm and 123 by 44 at md, so the md buttons meet the 44 pt target. Progress Steps is a separate component, numbered circles joined by a 2 rule, 272 wide, with a check on finished steps.

## Example

A cart row has a stepper beside the quantity, 1, with a minus and a plus. A checkout flow shows Progress Steps over its three screens: Address, Payment, Review.

## Common mistakes

- A stepper with no visible value. Put it next to the field it changes.
- A stepper for a large range. Pair it with a field.
- Using a step indicator for a short flow of two screens.
- Using it as navigation back through the flow. Use Back.

## Questions

### What is the difference between a stepper and a step indicator?

A stepper changes a value by one step with a minus and a plus. A step indicator shows which step of a flow the person is on.

### Should I pair a stepper with a text field?

Yes when large changes are likely. Apple says a stepper works alone for small changes and people appreciate a field to type a specific value.

## Sources

1. [Apple Human Interface Guidelines: Steppers](https://developer.apple.com/design/human-interface-guidelines/steppers)
2. [Apple Human Interface Guidelines: Page controls](https://developer.apple.com/design/human-interface-guidelines/page-controls)

## Related

- Docs: [Input](https://www.appetiteui.com/docs/input)
- Docs: [Progress Steps](https://www.appetiteui.com/docs/progress-steps)
- Glossary: [Text field](https://www.appetiteui.com/glossary/text-field)
- Glossary: [Page control](https://www.appetiteui.com/glossary/page-control)
- Glossary: [Slider](https://www.appetiteui.com/glossary/slider)