Support the page structure
When a form has more than 8 fields and benefits from being broken into logical steps
Templates
Multi-step form
A paginated form layout for complex data collection that benefits from being broken into sequential 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
Default
A multi-step form with a stepper indicator, step content, and navigation buttons.
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
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.
TabShift+TabEnterSpaceHave suggestions or feedback?
Share them with us on Slack → #ask-sgds-v3
Found a bug or issue?
Report it on GitHub Issues → sgds/templates/multi-step-form