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

Form page

A single-page form layout for collecting information from users across one focused step.

Figma
DesignUsageAccessibilityUpdates

Purpose

Support the page structure

For single-topic forms where all fields can be shown on one screen

Keep the layout consistent

When the form is short enough not to need a stepper (under 8 fields)

Use it intentionally

For multi-step forms — use the stepper page template instead

Anatomy

Contact details

All fields are required unless marked optional.

Select agency GovTech
Submit Cancel
1

sgds-input (used)

2

sgds-select (used)

3

sgds-button (used)

4

sgds-breadcrumb (used)

Configuration

Default

A simple form page with a heading, description, fields, and submission actions.

Contact details

All fields are required unless marked optional.

Select agency GovTech
Submit Cancel

Playground

BETA

Contact details

All fields are required unless marked optional.

Select agency GovTech
Submit Cancel

Structure

Component tokens

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

sgds/form-page
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

  • For single-topic forms where all fields can be shown on one screen
  • When the form is short enough not to need a stepper (under 8 fields)

When not to use

  • For multi-step forms — use the stepper page template instead
  • When the form requires conditional branching based on user answers

Accessibility considerations

Keyboard support

Use the SGDS components inside the form page 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 form page 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 form pagePlannedTBD

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/form-page

Singapore Government Design System

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