Get startedFoundationsComponentsTemplatesBlocksAIStories
Browse Templates

Templates

Overview

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

Configuration

Default

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

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

DateVersionDescriptionTBDTBDForm page pattern updates will be documented here.

Roadmap

Planned itemStatusTargetFuture improvements for form pagePlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #ask-sgds-v3

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/templates/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.

Past VersionsSGDS v1SGDS v2