Back to all examples

Show a section title on a question page

ReactAngularWeb Components
<GoabLink leadingIcon="arrow-back" size="small" mb="none">
        Back
      </GoabLink>

      <GoabText as="h3" size="body-m" mt="xl" mb="m" color="secondary">Personal information</GoabText>

      <GoabFormItem label="Do you currently live in Canada?" labelSize="large">
        <GoabRadioGroup
          name="canada"
          ariaLabel="Do you currently live in Canada?"
          onChange={() => {}}>
          <GoabRadioItem value="yes" label="Yes" />
          <GoabRadioItem value="no" label="No" />
        </GoabRadioGroup>
      </GoabFormItem>

      <GoabButton type="submit" mt="2xl">
        Save and continue
      </GoabButton>

Show a section title on a question page to help users understand which part of the form they are completing.

When to use

Use this pattern when:

  • Building multi-section forms where context helps users
  • Users need to know which category of questions they are answering
  • The form is divided into logical sections like “Personal information”
  • Following the one-question-per-page pattern for government services

Considerations

  • Use a subdued text color for the section title to differentiate from the question
  • Include a back link for navigation to previous questions
  • The section title should appear above the question
  • Use consistent spacing between the back link, section title, and question
  • Keep section titles concise and descriptive