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

Stepper

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

GitHubGitHub logocomponents/stepper
StorybookStorybook logocomponents/stepper
DesignUsageAccessibilityUpdates

Purpose

Track multi-step progress

Steppers show users how many stages a process has and which one they're currently on — reducing uncertainty in long workflows.

Allow review and return

Completed steps remain accessible, so users can navigate back to correct earlier inputs without losing later progress.

Set expectations upfront

Seeing all steps at the start lets users understand the scope of a form or process before they begin — reducing drop-off from unexpected length.

Anatomy

1

Step marker

2

Step label

3

Step content

Configuration

Horizontal

The stepper shows users how many stages a process has and which one they are currently on.

Renders a horizontal sequence of step markers and labels. Use in multi-step forms or processes to show users how many stages there are and which one they are currently on.

Playground

BETA

Structure

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: padding-2-xs under sgds/stepper means sgds/stepper/padding-2-xs.

sgds/stepper
CategoryComponent tokenSemantic tokenValuePaddingpadding-2-xssgds/padding/2-xs—padding-xlsgds/padding/xl24pxGapgap-smsgds/gap/sm12pxBorderborder-color-translucentsgds/border-color-translucent—border-color-transparentsgds/border-color-transparent—border-width-2sgds/border-width/2—Colourcolor-defaultsgds/color-default#1A1A1Acolor-fixed-lightsgds/color-fixed-light#F3F3F3color-subtlesgds/color-subtle#525252bg-translucentsgds/bg-translucent—bg-transparentsgds/bg-transparentTransparentprimary-border-color-defaultsgds/primary/border-color/default—primary-color-defaultsgds/primary/color/default—primary-color-emphasissgds/primary/color/emphasis—primary-surface-defaultsgds/primary/surface/default—primary-surface-emphasissgds/primary/surface/emphasis—

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

Show a clear journey

A good stepper helps users see where they are, what is next, and how much remains.

Do not add steps for decoration

Extra or vague steps make the journey feel longer and less clear than it is.

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

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for stepperPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

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.