Get startedFoundationsComponentsTemplatesBlocksAIStories
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.
Browse Components

Components

AccordionAlertBadgeBreadcrumbButtonCard groupCardIcon cardImage cardThumbnail cardCheckboxClose buttonCombo boxDatepickerDescription listDividerDrawerDropdownFile uploadFooterIcon buttonIcon listInputLinkMainnavMastheadModalOverflow menuPaginationProgress barQuantity toggleRadioSelectSidebarSidenavSkeletonSpinnerStepperSubnavSwitchSystem bannerTabTableTable of contentsTextareaToastTooltip

Stepper

Steppers are used to inform users which step they are at in a form or a process.

GitHub
Storybook
DesignUsageAccessibilityUpdates

Purpose

Show process progress

Steppers show where users are in a multi-step form or workflow.

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.

Anatomy

1

Step indicator

2

Label

3

Slot (optional)

4

Connection line

Configuration

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 to communicate the user's position within a multi-step process.

Active state on a step in the middle of the flow.

Clickable steps

Completed steps can be clickable so users can go back to earlier parts of the flow.

Use when users should move through the process using separate next or previous controls.

Markers

Stepper markers can use numbers or icons based on the step metadata.

Numbered markers show the position of each step in the sequence.

Structure

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.

CategoryTokenValueWhere it's usedPaddingsgds-padding-2-xs—Space between the left and right edges of the component and its contentsgds-padding-2-xs—Space between the top and bottom edges of the component and its contentsgds-padding-xl24pxOuter spacing of the stepper itemGapsgds-gap-sm12pxSpacing between items of the stepper itemBordersgds-border-width-2Width variesBorder of the stepper markerSizesgds-dimension-128—Maximum width of the stepper detailsgds-dimension-2—Height of the stepper item; width of the stepper itemsgds-dimension-32—Width of the stepper item; height of the stepper itemsgds-icon-size-md—Size of the completed step marker iconOutlinesgds-outline-focus—Focus outline of the stepper item when keyboard-focusedsgds-outline-offset-focus—Focus-outline offset of the stepper item when keyboard-focused

Usage

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.

Best practices

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.

Accessibility considerations

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.

Keyboard interaction

KeyInteractionTabMoves focus from the clickable step to the next focusable element.Shift+TabMoves focus to the previous interactive element.EnterActivates the focused focused step.

Updates

DateVersionDescription

Roadmap

Planned itemStatusTargetFuture enhancements for stepperPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #ask-sgds-v3

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/stepper

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.

Past VersionsSGDS v1SGDS v2