Ask a user one question at a time

<GoabxLink leadingIcon="arrow-back" size="small">
        <a href="#">Back</a>
      </GoabxLink>
      <GoabxFormItem
        mt="xl"
        label="Are you currently in school?"
        labelSize="large"
        helpText="School includes foundational, skills and employment training, micro-credentials, post-secondary and continuing education.">
        <GoabxRadioGroup name="school" ariaLabel="are you currently in school?" 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);
}

selectedValue = "";

  onSchoolChange(event: Event): void {
    const detail = (event as CustomEvent).detail;
    this.selectedValue = detail.value;
  }

<goabx-link leadingIcon="arrow-back" size="small">
  <a href="#">Back</a>
</goabx-link>
<goabx-form-item
  mt="xl"
  label="Are you currently in school?"
  labelSize="large"
  helpText="School includes foundational, skills and employment training, micro-credentials, post-secondary and continuing education.">
  <goabx-radio-group name="school" ariaLabel="are you currently in school?" (onChange)="onSchoolChange($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">
  <a href="#">Back</a>
</goa-link>
<goa-form-item version="2"
  mt="xl"
  label="Are you currently in school?"
  labelsize="large"
  helptext="School includes foundational, skills and employment training, micro-credentials, post-secondary and continuing education.">
  <goa-radio-group version="2" name="school" aria-label="are you currently in school?">
    <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>