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

Multi-step form

A paginated form layout for complex data collection that benefits from being broken into sequential steps.

Figma
DesignUsageAccessibilityUpdates

Purpose

Support the page structure

When a form has more than 8 fields and benefits from being broken into logical steps

Keep the layout consistent

When different sections of the form require different levels of user attention

Use it intentionally

For simple forms that fit on one page — use the form page template instead

Anatomy

Personal details

Back Next
1

sgds-stepper (used)

2

sgds-input (used)

3

sgds-button (used)

4

sgds-breadcrumb (used)

Configuration

Default

A multi-step form with a stepper indicator, step content, and navigation buttons.

Personal details

Back Next

Playground

BETA

Personal details

Back Next

Structure

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: padding-lg under sgds/multi-step-form means sgds/multi-step-form/padding-lg.

sgds/multi-step-form
CategoryComponent tokenSemantic tokenValuePaddingpadding-lgsgds/padding/lg20pxGapgap-smsgds/gap/sm12pxBorderborder-color-mutedsgds/border-color-muted#DFDFDFborder-radius-mdsgds/border-radius/md8pxborder-width-1sgds/border-width/11pxColourcolor-defaultsgds/color-default#1A1A1Asurface-defaultsgds/surface-default#FFFFFF

Usage

When to use

  • When a form has more than 8 fields and benefits from being broken into logical steps
  • When different sections of the form require different levels of user attention
  • For complex transactional flows like applications or registrations

When not to use

  • For simple forms that fit on one page — use the form page template instead

Accessibility considerations

Keyboard support

Use the SGDS components inside the multi-step form pattern so keyboard behaviour stays predictable.

Check focus order and action placement in the surrounding page context, especially when the pattern groups multiple interactive elements together.

Tab order

  • Move focus into the pattern.
  • Navigate through interactive elements in visual order.
  • Confirm any revealed or supporting content remains reachable.
  • Continue to the next interactive element on the page.

Keyboard interaction

KeyInteractionTabMoves focus through the interactive elements inside the multi-step form pattern.Shift+TabMoves focus to the previous interactive element.EnterActivates the focused action or confirms the current selection when supported.SpaceActivates focused controls when the contained SGDS component supports toggling or selection.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture improvements for multi-step formPlannedTBD

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/patterns/multi-step-form

Singapore Government Design System

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