Support the page structure
Whenever a page needs to collect structured input from users
Templates
Form
Form layouts for single-section, multi-section, and multi-step data collection.
Keep the layout consistent
For multi-section forms that benefit from labelled groupings
Use it intentionally
For a single text query — use an inline search input instead
All field types
Demonstration form showing every supported field type in one layout.
Basic · left
Single-section form, content left-aligned within the page container.
Basic · center
Single-section form centered on the page.
Basic · right
Single-section form right-aligned.
Sections · single
One labelled section grouping related fields.
Sections · two
Two labelled sections separated by spacing.
Sections · three
Three labelled sections — use for longer forms.
Multi-step · stepper
Stepper-driven form for transactional flows.
Field types · checkbox
Checkbox + checkbox-group examples, including grouped options.
Field types · radio
Radio + radio-group examples.
Field types · select
Select examples for single-value list inputs.
Field types · textarea
Textarea examples with hint and validation.
Field types · dates & quantities
Datepicker and quantity-toggle field examples.
Field types · file upload
File upload field examples with drop zone and validation.
Full-width fields
Layout where every field spans the form's full width.
Paired fields
Layout pairing fields side-by-side on wider viewports.
When to use
- Whenever a page needs to collect structured input from users
- For multi-section forms that benefit from labelled groupings
- For wizard-style flows broken into named steps
When not to use
- For a single text query — use an inline search input instead
- For decisions that should be a confirmation dialog — use a modal
Keyboard support
Use the SGDS components inside the 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/form