Step indicator

A step indicator is the map above a long form. Checkout, onboarding, a tax return, a multi part upload: any flow chopped into named stages needs to say three things at once, and this component says all three. Where am I, what did I already finish, and how much is left. The third one is why people accept the flow at all. A form that reveals its length up front is a form someone will start, and a sequence of pages that could end at any moment is one they abandon.

The stages are discrete and named, which is the difference from a plain percentage. “Step 2 of 4: Shipping” tells you what is coming; “50%” does not. That also sets the limit on when the component works: it needs a fixed, ordered, knowable set of stages. Flows that branch, loop, or run to an unknown length either need the branch collapsed into one nominal step or should not claim a count at all, because a tracker that grows a fifth step while you are on the fourth is worse than none.

Mark up the stages as an ordered list, since that is what they are, and mark the one you are on with aria-current="step". Each stage needs its state announced in words, not only in colour: completed, current, and not started should all be distinguishable in a screenshot printed in black and white. Completed stages may be links back, which is a kindness in a checkout, but stages ahead should stay inert, because letting someone jump to payment before entering an address only moves the error later. On narrow screens the horizontal row usually collapses to a single line (“Step 2 of 4”) rather than shrinking the labels into nothing.

The naming here is a genuine mess. Material UI and Ant Design both call this component a Stepper, while Apple, HTML, and this dictionary use “stepper” for the plus and minus number control, which is a completely different thing. Carbon calls it a progress indicator, a phrase most people hear as a progress bar, and in everyday usage it answers to progress steps and progress tracker as well. When precision matters, say “step indicator” or “wizard steps” and expect to translate for whichever library is in the room.