Show a section title on a question page

<GoabxLink leadingIcon="arrow-back" size="small" mb="none">
        Back
      </GoabxLink>

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

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

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

a.back-link::before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 24px;
  vertical-align: middle;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link:visited::before,
a.back-link:hover::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link {
  margin-top: var(--goa-space-m);
}

h3.section-title {
  margin-bottom: 0;
  color: var(--goa-color-text-secondary);
}

a.back-link + h3 {
  margin-top: var(--goa-space-2xl);
}

onRadioChange(event: Event): void {
    const detail = (event as CustomEvent).detail;
    console.log("Selected:", detail.value);
  }

<goabx-link leadingIcon="arrow-back" size="small" mb="none">
  Back
</goabx-link>

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

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

<goabx-button type="submit" mt="2xl">
  Save and continue
</goabx-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