Show process progress
Steppers show where users are in a multi-step form or workflow.
Components
Stepper
Steppers are used to inform users which step they are at in a form or a process.
Support review
Completed steps can stay available for checking or correcting earlier inputs.
Set expectations
Showing the steps helps users understand the length of the process.
1
Step indicator
2
Label
3
Description (optional)
4
Connection line
Orientation
Steppers can be laid out horizontally or vertically depending on the surrounding layout.
Steps run left to right, best for top-of-page progress trackers.
Active step
Sets the current step. Use with sgds-step descriptions to communicate the user's position within a multi-step process.
Active state on a step in the middle of the flow.
Step state
Each sgds-step can be shown in its default, disabled, or completed state.
Use the default state for available steps in the current process.
Click behaviour
Steps can be static, clickable, or limited to adjacent-step navigation.
Use when users should move through the process using separate next or previous controls.
Markers
Stepper markers can use numbers or icons based on each sgds-step.
Numbered markers show the position of each step in the sequence.
Description
sgds-step supports optional description content below each step label.
Use descriptions when step labels need more context.
Design tokens used
Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.
sgds-padding-2-xs—sgds-padding-xl24pxsgds-gap-sm12pxsgds-border-width-2Width variessgds-dimension-128—sgds-dimension-2—sgds-dimension-32—sgds-icon-size-md—sgds-outline-focus—sgds-outline-offset-focus—When to use
- Use stepper when users need to understand the stages of a multi-step process.
- Use it when knowing the current step helps users judge progress and prepare for what comes next.
When not to use
- Do not use stepper for short tasks that do not need explicit progress.
- Do not add more steps than users need to understand the journey.
Review details
Back
Continue
Use a stepper for sequential, multi-step processes
Steppers suit linear flows like application forms or sign-ups where each step depends on the previous one.
Overview
Documents
Status
Do not use a stepper for parallel views
If users can visit sections in any order, use tabs or sidenav. A stepper implies progress through a workflow.
Step 1 of 3: Start the application
Show all steps upfront
Reveal the full set of steps from the start so users can estimate effort and decide whether to begin.
Eight crowded steps make progress hard to scan.
Do not pile on too many steps
Long steppers reduce completion. Group related steps into phases or use progressive disclosure.
Built-in accessibility
- Steppers communicate progress through a sequence of steps.
- Clickable stepper items support Enter when the component is configured as clickable.
Labels and content
- Use clear step names that match the task.
- Keep the current step state accurate.
Focus and interaction
- If steps are clickable, users should be able to reach them in order.
- Do not make future steps clickable when users must complete earlier steps first.
TabShift+TabEnterHave suggestions or feedback?
Share them with us on Slack → #ask-sgds-v3
Found a bug or issue?
Report it on GitHub Issues → sgds/components/stepper