Show a simple progress indicator 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">Question 3 of 9</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>

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

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);
}

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">Question 3 of 9</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">Question 3 of 9</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>