Navigation

Stepper

Shows the steps of a multi-page procedure, such as an application, and which step the user is on.

Step 1 of 4: Applicant

Also known as

Numbered circles in a row (or column) with a name under each. Finished steps show a check mark and the current one is highlighted.

Vertical: Steps stacked vertically, useful when the names are long or on narrow screens.
Clickable steps: Finished steps are links or buttons so the user can go back to them.

The display changes as the user moves through the procedure with buttons such as “Next”.
In this demo, the steps themselves are not interactive. The current step is marked with aria-current="step", and finished steps have hidden text saying so.

Key	Action
`—`	None for the step display. The demo’s Back and Next buttons use Tab and Enter / Space.

Split the task into logical steps so the user can see the whole procedure before starting.
Show the state of each step: done, current, skipped or with errors.
For a short wait such as loading, use a progress indicator. For moving between pages in a sequence, use pagination.

Tabs: A stepper shows steps completed in a fixed order; tabs can be opened in any order.
Progress bar: A stepper shows the user’s place in a multi-page procedure; a progress bar shows progress within one task.
Pagination: A stepper shows distinct steps of a procedure; pagination moves through pages of the same kind of content.
Number input: Apple’s “stepper” is the − / + control of a number input, not a step indicator.