When to use
A stepper is ideal for use in scenarios where a process requires users to complete multiple sequential steps. It is particularly useful in multi-step forms, such as account registration, checkout processes, surveys, and onboarding workflows.
By breaking down complex tasks into manageable steps, it helps users understand their progress, reduces cognitive load, and improves overall user experience. The visual feedback provided by the stepper encourages users to complete the process, as they can see how many steps remain and which step they are currently on. This makes it an effective tool for guiding users through a structured, step-by-step interaction.
Behaviour
As mentioned, a stepper indicates the number of steps and displays the progress made by the user (in other words show the remaining steps). When an individual step is complete, it is marked as complete as the state of the indicator changes (see States on the Overview page). The user is able to navigate to a previous step to view inserted data or make edits.
Specific behaviour is dependent on the type of logic applied in terms of order. The process could either be a strict linear process (which can be seen as the default as this would be usual behaviour) or a non-linear process.
Linear vs non-linear
A linear process means that the user should follow the steps in a strict linear order, starting from step 1. A non-linear process means that the user can decide in which order to complete them. As stated, a linear process is default and the usual behaviour.
Placement
A stepper is used for relatively lengthy processes that require insight in terms of the total steps and progress being made. Therefore, the focus lies on step completion which usually means that there is no other, potentially conflicting, content on the page. This means that in general a page starts directly with the stepper component, especially when a horizontal layout is applied. A vertical layout has a less over arching feeling - there might be other descriptive content above it on a page.
The stepper width depends on context. In general it occupies the full width of the containing content area.
Accessibility considerations (optional)
…