Stepper

A progress indicator that breaks a long process, like filling in a long form, into a sequence of steps.

Also called: stepper, steps, step indicator, progress steps, step 1 of 3, wizard, multi-step form, multistep form, step by step, numbers in circles, numbered steps, checkout steps

What it is for

It makes a big task feel lighter by not showing everything at once. It shows how many steps there are, which one you’re on, and lets you go back to the ones you’ve finished.

Where you see it

• Checkout — order stages: Cart → Delivery → Payment
• Sign-up — multi-step onboarding or building a detailed profile
• Financial services — filling in an application

What it is called in code

• stepper
• wizard
• aria-current="step"

See also

• Loading indicators — Anything that shows the site is busy: a progress bar, a spinning icon, or gray placeholders where content will appear.
• Text input — A field where a person types something in: letters, numbers, symbols.
• Breadcrumbs — A small trail of links that shows the path from the home page to where you are now.