Steppers are best used for keeping the user on track when completing a specific task. Dividing the end goal into smaller, sub-tasks, increases the percentage of success as each task is completed.
Stepper in a project creation flow
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Stepper |
Progress tracker tasks must have three or more steps. The tracker shows users where they are in the process |
On top of the container where the form/ survey is being shown |
If the stepper is non-linear, the user can navigate through the process by selecting steps. |
Anatomy
Structure
|
|
|
marker (done) |
Step of the process that the user already provide needed information |
|
marker (active) |
Step of the process that the user is in |
|
marker (undone) |
Step of the process that the user still needs to provide information |
|
bar (done) |
The done bar indicates the path the user has concluded |
|
bar (undone) |
The undone bar indicates the path the user still has to take |
Sizes and Spaces
|
The overall width of the stepper can vary accordingly with the design.
A rule of thumb is that you shouldn't force filling the width of the container. To a container that goes from one edge to the other, the stepper can have from 50 to 80% of that area. |
Properties
Properties for the marker
|
Property |
Value |
Description |
|---|---|---|
|
State |
active done undone |
The active state refers to the step the user is currently in. The done state refers to the filled with success steps. Lastly, the undone state refers to steps yet to be done. |
Properties for the stepper
|
Property |
Value |
Description |
|---|---|---|
|
Linear |
true false |
If true, the marker of the stepper become numbered and doesn't allow the user to jump from that are not consecutive. E.g. the user cannot go to step 3 from step 1. |
|
Label |
true false |
If true, the label will appear beneath the marker. |
Behaviour
Interaction
Responsiveness
Max-width on each breakpoint
|
Component |
Extra-large >1366px |
Large 1366px |
Medium 1024px |
Small 768px |
Extra-small 428px |
|
Stepper |
50% |
50% |
50% |
50% |
80% |
Guidelines
|
|
|
|