Show a section title on a question page

<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>
onRadioChange(event: Event): void {
    const detail = (event as CustomEvent).detail;
    console.log("Selected:", detail.value);
  }
<goab-link leadingIcon="arrow-back" size="small" mb="none">
  Back
</goab-link>

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

<goab-form-item label="Do you currently live in Canada?" labelSize="large">
  <goab-radio-group
    name="canada"
    ariaLabel="Do you currently live in Canada?"
    (onChange)="onRadioChange($event)">
    <goab-radio-item value="yes" label="Yes"></goab-radio-item>
    <goab-radio-item value="no" label="No"></goab-radio-item>
  </goab-radio-group>
</goab-form-item>

<goab-button type="submit" mt="2xl">
  Save and continue
</goab-button>
document.querySelector('goa-radio-group').addEventListener('_change', (e) => {
  console.log('Selected:', e.detail.value);
});
<goa-link leadingicon="arrow-back" size="small" mb="none">
  Back
</goa-link>

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

<goa-form-item version="2" label="Do you currently live in Canada?" labelsize="large">
  <goa-radio-group version="2" name="canada" aria-label="Do you currently live in Canada?">
    <goa-radio-item value="yes" label="Yes"></goa-radio-item>
    <goa-radio-item value="no" label="No"></goa-radio-item>
  </goa-radio-group>
</goa-form-item>

<goa-button version="2" type="submit" mt="2xl">
  Save and continue
</goa-button>

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
View old example docs