Radio

Allow users to select one option from a set.

Props

name
string
The name for the radio group. Used for accessibility and change events.
value
string
The currently selected value in the radio group.
orientation
vertical | horizontal
Sets the layout direction. 'vertical' stacks items, 'horizontal' places them in a row.
Defaults to vertical.
disabled
boolean
Disables all radio items in the group.
Defaults to false.
error
boolean
Shows an error state on all radio items in the group.
Defaults to false.
size
default | compact
Sets the size of all radio items. 'compact' reduces spacing for dense layouts (V2 only).
Defaults to default.
testId
string
Sets a data-testid attribute for automated testing.
ariaLabel
string
Defines how the radio group will be announced by screen readers.
mt, mr, mb, ml
none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Apply margin to the top, right, bottom, and/or left of the component.

Events

onChange
(event: Event) => void
_change
CustomEvent
 Examples

Add a record using a drawer

const [open, setOpen] = useState(false);
<GoabxButton leadingIcon="add" onClick={() => setOpen(true)}>
        Add Record
      </GoabxButton>
      <GoabxDrawer
        maxSize="492px"
        open={open}
        heading="Add Record"
        position="right"
        onClose={() => setOpen(false)}
        actions={
          <GoabButtonGroup>
            <GoabxButton type="primary" size="compact" onClick={() => setOpen(false)}>
              Add record
            </GoabxButton>
            <GoabxButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
              Cancel
            </GoabxButton>
          </GoabButtonGroup>
        }
      >
        <GoabxFormItem label="Level of education">
          <GoabxDropdown onChange={() => {}} name="education" value="university">
            <GoabxDropdownItem value="high-school" label="High School Diploma" />
            <GoabxDropdownItem value="college" label="College Diploma" />
            <GoabxDropdownItem value="university" label="University Degree" />
            <GoabxDropdownItem value="masters" label="Master's Degree" />
            <GoabxDropdownItem value="doctorate" label="Doctorate" />
          </GoabxDropdown>
        </GoabxFormItem>
        <GoabxFormItem label="Educational institution" mt="l">
          <GoabxInput name="education" type="text" onChange={() => {}} />
        </GoabxFormItem>
        <GoabxFormItem label="Field of study" requirement="optional" mt="l">
          <GoabxInput name="fieldOfStudy" type="text" onChange={() => {}} />
        </GoabxFormItem>
        <GoabxFormItem label="Is the person currently attending?" mt="l">
          <GoabxRadioGroup name="attendTraining" orientation="horizontal" onChange={() => {}}>
            <GoabxRadioItem value="yes" label="Yes" />
            <GoabxRadioItem value="no" label="No" />
          </GoabxRadioGroup>
        </GoabxFormItem>
        <GoabxFormItem label="Start date" mt="l">
          <GoabxDatePicker onChange={() => {}} value={new Date("2022-09-01")} />
          <GoabxCheckbox name="startDateApproximate" text="Approximate date" value="y" mt="s" />
        </GoabxFormItem>
        <GoabxFormItem label="Credential received?" mt="l">
          <GoabxRadioGroup name="credentialReceived" orientation="horizontal" onChange={() => {}}>
            <GoabxRadioItem value="yes" label="Yes" />
            <GoabxRadioItem value="no" label="No" />
          </GoabxRadioGroup>
        </GoabxFormItem>
      </GoabxDrawer>
open = false;

  onClick() {
    this.open = true;
  }

  onClose() {
    this.open = false;
  }

  dropdownOnChange(event: any) {
    console.log(event);
  }

  inputOnChange(event: any) {
    console.log(event);
  }

  radioOnChange(event: any) {
    console.log(event);
  }

  dateOnChange(event: any) {
    console.log(event);
  }

  closeDrawer() {
    this.open = false;
  }
<goabx-button leadingIcon="add" (onClick)="onClick()">Add Record</goabx-button>
<goabx-drawer maxSize="492px" [open]="open" heading="Add Record" position="right" (onClose)="onClose()" [actions]="actions">
  <goabx-form-item label="Level of education">
    <goabx-dropdown (onChange)="dropdownOnChange($event)" name="education" value="university">
      <goabx-dropdown-item value="high-school" label="High School Diploma"></goabx-dropdown-item>
      <goabx-dropdown-item value="college" label="College Diploma"></goabx-dropdown-item>
      <goabx-dropdown-item value="university" label="University Degree"></goabx-dropdown-item>
      <goabx-dropdown-item value="masters" label="Master's Degree"></goabx-dropdown-item>
      <goabx-dropdown-item value="doctorate" label="Doctorate"></goabx-dropdown-item>
    </goabx-dropdown>
  </goabx-form-item>
  <goabx-form-item label="Educational institution" mt="l">
    <goabx-input name="education" type="text" (onChange)="inputOnChange($event)"></goabx-input>
  </goabx-form-item>
  <goabx-form-item label="Field of study" requirement="optional" mt="l">
    <goabx-input name="fieldOfStudy" type="text" (onChange)="inputOnChange($event)"></goabx-input>
  </goabx-form-item>
  <goabx-form-item label="Is the person currently attending?" mt="l">
    <goabx-radio-group name="attendTraining" orientation="horizontal" (onChange)="radioOnChange($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-form-item label="Start date" mt="l">
    <goabx-date-picker (onChange)="dateOnChange($event)"></goabx-date-picker>
    <goabx-checkbox name="startDateApproximate" text="Approximate date" value="y" mt="s"></goabx-checkbox>
  </goabx-form-item>
  <goabx-form-item label="Credential received?" mt="l">
    <goabx-radio-group name="credentialReceived" orientation="horizontal" (onChange)="radioOnChange($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>
  <ng-template #actions>
    <goab-button-group>
      <goabx-button type="primary" size="compact" (onClick)="closeDrawer()">Add record</goabx-button>
      <goabx-button type="tertiary" size="compact" (onClick)="closeDrawer()">Cancel</goabx-button>
    </goab-button-group>
  </ng-template>
</goabx-drawer>
const drawer = document.getElementById("record-drawer");
const openBtn = document.getElementById("open-drawer-btn");
const addBtn = document.getElementById("add-record-btn");
const cancelBtn = document.getElementById("cancel-btn");

openBtn.addEventListener("_click", () => {
  drawer.setAttribute("open", "true");
});

drawer.addEventListener("_close", () => {
  drawer.removeAttribute("open");
});

addBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

cancelBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});
<goa-button version="2" id="open-drawer-btn" leadingicon="add">Add Record</goa-button>
<goa-drawer version="2" id="record-drawer" max-size="492px" heading="Add Record" position="right">
  <goa-form-item version="2" label="Level of education">
    <goa-dropdown version="2" name="education" value="university">
      <goa-dropdown-item value="high-school" label="High School Diploma"></goa-dropdown-item>
      <goa-dropdown-item value="college" label="College Diploma"></goa-dropdown-item>
      <goa-dropdown-item value="university" label="University Degree"></goa-dropdown-item>
      <goa-dropdown-item value="masters" label="Master's Degree"></goa-dropdown-item>
      <goa-dropdown-item value="doctorate" label="Doctorate"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>
  <goa-form-item version="2" label="Educational institution" mt="l">
    <goa-input version="2" name="education" type="text"></goa-input>
  </goa-form-item>
  <goa-form-item version="2" label="Field of study" requirement="optional" mt="l">
    <goa-input version="2" name="fieldOfStudy" type="text"></goa-input>
  </goa-form-item>
  <goa-form-item version="2" label="Is the person currently attending?" mt="l">
    <goa-radio-group version="2" name="attendTraining" orientation="horizontal">
      <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-form-item version="2" label="Start date" mt="l">
    <goa-date-picker version="2"></goa-date-picker>
    <goa-checkbox version="2" name="startDateApproximate" text="Approximate date" value="y" mt="s"></goa-checkbox>
  </goa-form-item>
  <goa-form-item version="2" label="Credential received?" mt="l">
    <goa-radio-group version="2" name="credentialReceived" orientation="horizontal">
      <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>
  <div slot="actions">
    <goa-button-group>
      <goa-button version="2" id="add-record-btn" type="primary" size="compact">Add record</goa-button>
      <goa-button version="2" id="cancel-btn" type="tertiary" size="compact">Cancel</goa-button>
    </goa-button-group>
  </div>
</goa-drawer>

Add and edit lots of filters

const [open, setOpen] = useState(false);
<GoabxButton onClick={() => setOpen(true)}>Filters</GoabxButton>
      <GoabxDrawer
          heading="Filters"
          open={open}
          onClose={() => setOpen(false)}
          position="right"
          actions={
            <GoabButtonGroup>
              <GoabxButton type="primary" size="compact" onClick={() => setOpen(false)}>
                Apply filters
              </GoabxButton>
              <GoabxButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
                Cancel
              </GoabxButton>
            </GoabButtonGroup>
          }
        >
          <GoabxFormItem label="Entry status">
            <GoabCheckboxList name="entryStatus" onChange={() => {}}>
              <GoabxCheckbox name="draft" text="Draft" value="draft" />
              <GoabxCheckbox name="published" text="Published" value="published" />
            </GoabCheckboxList>
          </GoabxFormItem>
          <GoabxFormItem label="Assigned to - Region" mt="l">
            <GoabCheckboxList name="region" onChange={() => {}}>
              <GoabxCheckbox name="calgary" text="Calgary" value="calgary" />
              <GoabxCheckbox name="central" text="Central" value="central" />
              <GoabxCheckbox name="edmonton" text="Edmonton" value="edmonton" />
              <GoabxCheckbox name="north" text="North" value="north" />
              <GoabxCheckbox name="south" text="South" value="south" />
            </GoabCheckboxList>
          </GoabxFormItem>
          <GoabxFormItem label="Assigned to" mt="l">
            <GoabxDropdown name="assignedTo" onChange={() => {}}>
              <GoabxDropdownItem value="1" label="Person 1" />
              <GoabxDropdownItem value="2" label="Person 2" />
            </GoabxDropdown>
          </GoabxFormItem>
          <GoabxFormItem label="Date taken" mt="l">
            <GoabxRadioGroup name="dateTaken" onChange={() => {}}>
              <GoabxRadioItem value="24" label="Last 24 hours" />
              <GoabxRadioItem value="72" label="Last 72 hours" />
            </GoabxRadioGroup>
          </GoabxFormItem>
      </GoabxDrawer>
open = false;
  assignedTo = "";
  takenBy = "";

  onClick() {
    this.open = true;
  }

  onClose() {
    this.open = false;
  }

  radioOnChange(event: any) {
    console.log(event);
  }

  onChangeAssignedTo(e: any) {
    this.assignedTo = e.value as string;
  }

  closeDrawer() {
    this.open = false;
  }
<goabx-button (onClick)="onClick()">Filters</goabx-button>
<goabx-drawer heading="Filters" [open]="open" (onClose)="onClose()" position="right" [actions]="actions">
  <goabx-form-item label="Entry status">
    <goab-checkbox-list name="entryStatus" (onChange)="onCheckboxChange($event)">
      <goabx-checkbox name="draft" text="Draft" value="draft"></goabx-checkbox>
      <goabx-checkbox name="published" text="Published" value="published"></goabx-checkbox>
    </goab-checkbox-list>
  </goabx-form-item>
  <goabx-form-item label="Assigned to - Region" mt="l">
    <goab-checkbox-list name="region" (onChange)="onCheckboxChange($event)">
      <goabx-checkbox name="calgary" text="Calgary" value="calgary"></goabx-checkbox>
      <goabx-checkbox name="central" text="Central" value="central"></goabx-checkbox>
      <goabx-checkbox name="edmonton" text="Edmonton" value="edmonton"></goabx-checkbox>
      <goabx-checkbox name="north" text="North" value="north"></goabx-checkbox>
      <goabx-checkbox name="south" text="South" value="south"></goabx-checkbox>
    </goab-checkbox-list>
  </goabx-form-item>
  <goabx-form-item label="Assigned to" mt="l">
    <goabx-dropdown [value]="assignedTo" name="assignedToData" (onChange)="onChangeAssignedTo($event)">
      <goabx-dropdown-item value="1" label="Person 1"></goabx-dropdown-item>
      <goabx-dropdown-item value="2" label="Person 2"></goabx-dropdown-item>
    </goabx-dropdown>
  </goabx-form-item>
  <goabx-form-item label="Date taken" mt="l">
    <goabx-radio-group name="dateTaken" (onChange)="radioOnChange($event)">
      <goabx-radio-item value="24" label="Last 24 hours"></goabx-radio-item>
      <goabx-radio-item value="72" label="Last 72 hours"></goabx-radio-item>
    </goabx-radio-group>
  </goabx-form-item>
  <ng-template #actions>
    <goab-button-group>
      <goabx-button type="primary" size="compact" (onClick)="closeDrawer()">Apply filters</goabx-button>
      <goabx-button type="tertiary" size="compact" (onClick)="closeDrawer()">Cancel</goabx-button>
    </goab-button-group>
  </ng-template>
</goabx-drawer>
const drawer = document.getElementById("filters-drawer");
const openBtn = document.getElementById("open-filters-btn");
const applyBtn = document.getElementById("apply-filters-btn");
const cancelBtn = document.getElementById("cancel-btn");

openBtn.addEventListener("_click", () => {
  drawer.setAttribute("open", "true");
});

drawer.addEventListener("_close", () => {
  drawer.removeAttribute("open");
});

applyBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

cancelBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});
<goa-button version="2" id="open-filters-btn">Filters</goa-button>
<goa-drawer version="2" id="filters-drawer" heading="Filters" position="right">
  <goa-form-item version="2" label="Entry status">
    <goa-checkbox-list name="entryStatus">
      <goa-checkbox version="2" name="draft" text="Draft" value="draft"></goa-checkbox>
      <goa-checkbox version="2" name="published" text="Published" value="published"></goa-checkbox>
    </goa-checkbox-list>
  </goa-form-item>
  <goa-form-item version="2" label="Assigned to - Region" mt="l">
    <goa-checkbox-list name="region">
      <goa-checkbox version="2" name="calgary" text="Calgary" value="calgary"></goa-checkbox>
      <goa-checkbox version="2" name="central" text="Central" value="central"></goa-checkbox>
      <goa-checkbox version="2" name="edmonton" text="Edmonton" value="edmonton"></goa-checkbox>
      <goa-checkbox version="2" name="north" text="North" value="north"></goa-checkbox>
      <goa-checkbox version="2" name="south" text="South" value="south"></goa-checkbox>
    </goa-checkbox-list>
  </goa-form-item>
  <goa-form-item version="2" label="Assigned to" mt="l">
    <goa-dropdown version="2" name="assignedTo">
      <goa-dropdown-item value="1" label="Person 1"></goa-dropdown-item>
      <goa-dropdown-item value="2" label="Person 2"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>
  <goa-form-item version="2" label="Date taken" mt="l">
    <goa-radio-group version="2" name="dateTaken">
      <goa-radio-item value="24" label="Last 24 hours"></goa-radio-item>
      <goa-radio-item value="72" label="Last 72 hours"></goa-radio-item>
    </goa-radio-group>
  </goa-form-item>
  <div slot="actions">
    <goa-button-group>
      <goa-button version="2" id="apply-filters-btn" type="primary" size="compact">Apply filters</goa-button>
      <goa-button version="2" id="cancel-btn" type="tertiary" size="compact">Cancel</goa-button>
    </goa-button-group>
  </div>
</goa-drawer>

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>

Give background information before asking a question

const [selectedValue, setSelectedValue] = useState<string>("");

  const handleChange = (event: GoabRadioGroupOnChangeDetail) => {
    setSelectedValue(event.value as string);
  };

  const handleSubmit = () => {
    console.log("Selected:", selectedValue);
  };
<GoabxLink leadingIcon="arrow-back" size="small" mb="none">
        Back
      </GoabxLink>

      <GoabText as="h2" mt="xl" mb="m">Current school status</GoabText>
      <GoabText mt="none" mb="s">
        School can encompass foundational programs that help individuals gain basic skills for
        further learning and living, such as literacy and numeracy courses. It also includes
        skills and employment training programs, designed to equip you with specific skills for
        the job market.
      </GoabText>
      <GoabText mt="none" mb="s">
        Post-secondary education, such as Bachelor's, Master's, or Doctoral degrees, and
        continuing education courses for professional or personal development, are also
        categorized under 'school'.
      </GoabText>
      <GoabText mt="none" mb="xl">
        Contact your provider if you're concerned about your school status.
      </GoabText>

      <GoabxFormItem label="Are you currently in school?">
        <GoabxRadioGroup
          name="school"
          ariaLabel="are you currently in school?"
          onChange={handleChange}>
          <GoabxRadioItem value="yes" label="Yes" />
          <GoabxRadioItem value="no" label="No" />
        </GoabxRadioGroup>
      </GoabxFormItem>

      <GoabxButton type="submit" mt="2xl" onClick={handleSubmit}>
        Save and continue
      </GoabxButton>
  );
}
h2.section-title {
  margin-bottom: var(--goa-space-l);
}
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);
}
:host a.back-link + h2 {
  margin-top: var(--goa-space-2xl);
}
selectedValue = "";

  onChange(event: GoabRadioGroupOnChangeDetail): void {
    this.selectedValue = event.value as string;
  }

  onSubmit(): void {
    console.log("Selected:", this.selectedValue);
  }
<goabx-link leadingIcon="arrow-back" size="small" mb="none">
  Back
</goabx-link>

<goab-text as="h2" mt="xl" mb="m">Current school status</goab-text>
<goab-text mt="none" mb="s">
  School can encompass foundational programs that help individuals gain basic skills for
  further learning and living, such as literacy and numeracy courses. It also includes
  skills and employment training programs, designed to equip you with specific skills for
  the job market.
</goab-text>
<goab-text mt="none" mb="s">
  Post-secondary education, such as Bachelor's, Master's, or Doctoral degrees, and
  continuing education courses for professional or personal development, are also
  categorized under 'school'.
</goab-text>
<goab-text mt="none" mb="xl">
  Contact your provider if you're concerned about your school status.
</goab-text>

<goabx-form-item label="Are you currently in school?">
  <goabx-radio-group
    name="school"
    ariaLabel="are you currently in school?"
    (onChange)="onChange($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" (onClick)="onSubmit()">
  Save and continue
</goabx-button>
const radioGroup = document.getElementById('school-radio');
const submitBtn = document.getElementById('submit-btn');
let selectedValue = '';

radioGroup.addEventListener('_change', (e) => {
  selectedValue = e.detail.value;
});

submitBtn.addEventListener('_click', () => {
  console.log('Selected:', selectedValue);
});
<goa-link leadingicon="arrow-back" size="small" mb="none">
  Back
</goa-link>

<goa-text as="h2" mt="xl" mb="m">Current school status</goa-text>
<goa-text mt="none" mb="s">
  School can encompass foundational programs that help individuals gain basic skills for
  further learning and living, such as literacy and numeracy courses. It also includes
  skills and employment training programs, designed to equip you with specific skills for
  the job market.
</goa-text>
<goa-text mt="none" mb="s">
  Post-secondary education, such as Bachelor's, Master's, or Doctoral degrees, and
  continuing education courses for professional or personal development, are also
  categorized under 'school'.
</goa-text>
<goa-text mt="none" mb="xl">
  Contact your provider if you're concerned about your school status.
</goa-text>

<goa-form-item version="2" label="Are you currently in school?">
  <goa-radio-group version="2" id="school-radio" name="school" arialabel="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" id="submit-btn" type="submit" mt="2xl">
  Save and continue
</goa-button>

Include descriptions for items in a checkbox list

const [selected, setSelected] = useState("1");
<GoabxFormItem label="How do you want to sign in?">
      <GoabxRadioGroup
        name="selectOne"
        value={selected}
        onChange={(event) => setSelected(event.value)}
      >
        <GoabxRadioItem
          value="1"
          label="Sign in as a business"
          description="Use the account associated with the business"
        />
        <GoabxRadioItem
          value="2"
          label="Sign in as an individual"
          description="If you don't have a Alberta.ca login, you can create one"
        />
      </GoabxRadioGroup>
    </GoabxFormItem>
form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      selectOne: ["1"],
    });
  }
<goabx-form-item label="How do you want to sign in?" [formGroup]="form">
  <goabx-radio-group name="selectOne" formControlName="selectOne">
    <goabx-radio-item
      value="1"
      label="Sign in as a business"
      [description]="optionOneDescription">
      <ng-template #optionOneDescription>
        Use the account associated with the business
      </ng-template>
    </goabx-radio-item>
    <goabx-radio-item
      value="2"
      label="Sign in as an individual"
      [description]="optionTwoDescription">
      <ng-template #optionTwoDescription>
        If you don't have a Alberta.ca login, you can create one
      </ng-template>
    </goabx-radio-item>
  </goabx-radio-group>
</goabx-form-item>
document.querySelector("goa-radio-group").addEventListener("_change", (e) => {
  console.log("Selected:", e.detail.value);
});
<goa-form-item version="2" label="How do you want to sign in?">
  <goa-radio-group version="2" name="selectOne" value="1">
    <goa-radio-item value="1" label="Sign in as a business">
      <span slot="description">Use the account associated with the business</span>
    </goa-radio-item>
    <goa-radio-item value="2" label="Sign in as an individual">
      <span slot="description">If you don't have a Alberta.ca login, you can create one</span>
    </goa-radio-item>
  </goa-radio-group>
</goa-form-item>

Reveal input based on a selection

const [contactMethod, setContactMethod] = useState("");
  const [checkboxSelection, setCheckboxSelection] = useState<string[]>([]);
<GoabxFormItem
        label="How would you like to be contacted?"
        helpText="Select one option"
      >
        <GoabxRadioGroup
          name="contactMethod"
          value={contactMethod}
          onChange={(e) => setContactMethod(e.value)}
        >
          <GoabxRadioItem
            value="email"
            label="Email"
            reveal={
              <GoabxFormItem label="Email address">
                <GoabxInput name="email" onChange={() => {}} value="" />
              </GoabxFormItem>
            }
          />
          <GoabxRadioItem
            value="phone"
            label="Phone"
            reveal={
              <GoabxFormItem label="Phone number">
                <GoabxInput name="phoneNumber" onChange={() => {}} value="" />
              </GoabxFormItem>
            }
          />
          <GoabxRadioItem
            value="text"
            label="Text message"
            reveal={
              <GoabxFormItem label="Mobile phone number">
                <GoabxInput name="mobilePhoneNumber" onChange={() => {}} value="" />
              </GoabxFormItem>
            }
          />
        </GoabxRadioGroup>
      </GoabxFormItem>

      <GoabxFormItem label="How would you like to be contacted?" mt="xl">
        <GoabCheckboxList
          name="contactMethods"
          value={checkboxSelection}
          onChange={(e) => setCheckboxSelection(e.values || [])}
        >
          <GoabxCheckbox
            name="email"
            text="Email"
            value="email"
            reveal={
              <GoabxFormItem label="Email address">
                <GoabxInput name="email" onChange={() => {}} value="" />
              </GoabxFormItem>
            }
          />
          <GoabxCheckbox
            name="phone"
            text="Phone"
            value="phone"
            reveal={
              <GoabxFormItem label="Phone number">
                <GoabxInput name="phoneNumber" onChange={() => {}} value="" />
              </GoabxFormItem>
            }
          />
          <GoabxCheckbox
            name="text"
            text="Text message"
            value="text"
            reveal={
              <GoabxFormItem label="Mobile phone number">
                <GoabxInput name="mobilePhoneNumber" onChange={() => {}} value="" />
              </GoabxFormItem>
            }
          />
        </GoabCheckboxList>
      </GoabxFormItem>
form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      contactMethod: [""],
      phoneNumber: [""],
      emailAddress: [""],
      emailContactMethod: [false],
      phoneContactMethod: [false],
      textContactMethod: [false],
    });
  }
<goabx-form-item [formGroup]="form" label="How would you like to be contacted?" helpText="Select one option">
  <goabx-radio-group name="contactMethod" formControlName="contactMethod">
    <goabx-radio-item label="Email" value="email" [reveal]="emailReveal">
      <ng-template #emailReveal>
        <goabx-form-item label="Email address">
          <goabx-input name="email" formControlName="emailAddress"></goabx-input>
        </goabx-form-item>
      </ng-template>
    </goabx-radio-item>
    <goabx-radio-item value="phone" label="Phone" [reveal]="phoneReveal">
      <ng-template #phoneReveal>
        <goabx-form-item label="Phone number">
          <goabx-input name="phone" formControlName="phoneNumber"></goabx-input>
        </goabx-form-item>
      </ng-template>
    </goabx-radio-item>
    <goabx-radio-item value="text" label="Text message" [reveal]="textReveal">
      <ng-template #textReveal>
        <goabx-form-item label="Mobile phone number">
          <goabx-input name="mobile" formControlName="phoneNumber"></goabx-input>
        </goabx-form-item>
      </ng-template>
    </goabx-radio-item>
  </goabx-radio-group>
</goabx-form-item>

<goabx-form-item [formGroup]="form" label="How would you like to be contacted?" mt="xl">
  <goab-checkbox-list name="contactMethods" formControlName="contactMethods">
    <goabx-checkbox name="email" text="Email" value="email" [reveal]="checkEmailReveal">
      <ng-template #checkEmailReveal>
        <goabx-form-item label="Email address">
          <goabx-input name="email" formControlName="emailAddress"></goabx-input>
        </goabx-form-item>
      </ng-template>
    </goabx-checkbox>
    <goabx-checkbox name="phone" text="Phone" value="phone" [reveal]="checkPhoneReveal">
      <ng-template #checkPhoneReveal>
        <goabx-form-item label="Phone number">
          <goabx-input name="phone" formControlName="phoneNumber"></goabx-input>
        </goabx-form-item>
      </ng-template>
    </goabx-checkbox>
    <goabx-checkbox name="text" text="Text message" value="text" [reveal]="checkTextReveal">
      <ng-template #checkTextReveal>
        <goabx-form-item label="Mobile phone number">
          <goabx-input name="mobile" formControlName="phoneNumber"></goabx-input>
        </goabx-form-item>
      </ng-template>
    </goabx-checkbox>
  </goab-checkbox-list>
</goabx-form-item>
<goa-form-item version="2" label="How would you like to be contacted?" helptext="Select one option">
  <goa-radio-group version="2" name="contactMethod" id="radio-contact">
    <goa-radio-item value="email" label="Email">
      <div slot="reveal">
        <goa-form-item version="2" label="Email address">
          <goa-input version="2" name="email"></goa-input>
        </goa-form-item>
      </div>
    </goa-radio-item>
    <goa-radio-item value="phone" label="Phone">
      <div slot="reveal">
        <goa-form-item version="2" label="Phone number">
          <goa-input version="2" name="phone"></goa-input>
        </goa-form-item>
      </div>
    </goa-radio-item>
    <goa-radio-item value="text" label="Text message">
      <div slot="reveal">
        <goa-form-item version="2" label="Mobile phone number">
          <goa-input version="2" name="mobile"></goa-input>
        </goa-form-item>
      </div>
    </goa-radio-item>
  </goa-radio-group>
</goa-form-item>

<goa-form-item version="2" label="How would you like to be contacted?" mt="xl">
  <goa-checkbox-list name="contactMethods">
    <goa-checkbox version="2" name="emailContact" text="Email">
      <div slot="reveal">
        <goa-form-item version="2" label="Email address">
          <goa-input version="2" name="emailInput"></goa-input>
        </goa-form-item>
      </div>
    </goa-checkbox>
    <goa-checkbox version="2" name="phoneContact" text="Phone">
      <div slot="reveal">
        <goa-form-item version="2" label="Phone number">
          <goa-input version="2" name="phoneInput"></goa-input>
        </goa-form-item>
      </div>
    </goa-checkbox>
    <goa-checkbox version="2" name="textContact" text="Text message">
      <div slot="reveal">
        <goa-form-item version="2" label="Mobile phone number">
          <goa-input version="2" name="mobileInput"></goa-input>
        </goa-form-item>
      </div>
    </goa-checkbox>
  </goa-checkbox-list>
</goa-form-item>

Review and action

<GoabGrid minChildWidth="315px">
      <GoabContainer accent="thin" type="non-interactive">
        <GoabText size="heading-m" mt="none" mb="m">Appearance details</GoabText>
        <GoabGrid minChildWidth="200px" gap="m">
          <GoabBlock direction="column" gap="xs">
            <GoabText size="body-s" color="secondary" mt="none" mb="none">Accused name</GoabText>
            <GoabText size="body-m" mt="none" mb="none">Doe, John Scott</GoabText>
          </GoabBlock>

          <GoabBlock direction="column" gap="xs">
            <GoabText size="body-s" color="secondary" mt="none" mb="none">Date of birth</GoabText>
            <GoabText size="body-m" mt="none" mb="none">Mar 14, 2021</GoabText>
          </GoabBlock>

          <GoabBlock direction="column" gap="xs">
            <GoabText size="body-s" color="secondary" mt="none" mb="none">Court location</GoabText>
            <GoabText size="body-m" mt="none" mb="none">Calgary</GoabText>
          </GoabBlock>

          <GoabBlock direction="column" gap="xs">
            <GoabText size="body-s" color="secondary" mt="none" mb="none">Upcoming appearance date(s)</GoabText>
            <GoabText size="body-m" mt="none" mb="none">Sep 20, 2021</GoabText>
          </GoabBlock>
        </GoabGrid>

        <GoabText size="heading-xs" mt="l" mb="s">Docket number(s) &amp; charges</GoabText>
        <GoabContainer type="non-interactive" padding="compact">
          <GoabText size="heading-xs" mt="none" mb="xs">1
    h3.review-h3 {
      margin-bottom: var(--goa-space-m);
    }
    label.review-label {
      font: var(--goa-typography-body-s);
      color: var(--goa-color-text-secondary);
    }
    .review-content {
      font: var(--goa-typography-body-m);
    }
    p.review-content {
      margin-bottom: 0;
    }
    h5.review-h5 {
      font: var(--goa-typography-body-m);
      color: var(--goa-color-text-secondary);
      margin-top: var(--goa-space-m);
      margin-bottom: var(--goa-space-m);
    }
    h6.review-h6 {
      font: var(--goa-typography-heading-s);
      margin-top: 0;
      margin-bottom: 0;
    }
  `,
  ],
})
export class ReviewAndActionComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      case: ["
form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      case: [""],
      reason: [""],
      message: [""],
    });
  }

  onClick(): void {
    console.log("Confirm clicked!");
  }
<goab-grid minChildWidth="315px">
  <goab-container accent="thin" type="non-interactive">
    <goab-text size="heading-m" mt="none" mb="m">Appearance details</goab-text>
    <goab-grid minChildWidth="200px" gap="m">
      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Accused name</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Doe, John Scott</goab-text>
      </goab-block>

      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Date of birth</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Mar 14, 2021</goab-text>
      </goab-block>

      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Court location</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Calgary</goab-text>
      </goab-block>

      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Upcoming appearance date(s)</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Sep 20, 2021</goab-text>
      </goab-block>
    </goab-grid>

    <goab-text size="heading-xs" mt="l" mb="s">Docket number(s) &amp; charges</goab-text>
    <goab-container type="non-interactive" padding="compact">
      <goab-text size="heading-xs" mt="none" mb="xs">1) 12345678</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goab-text>
    </goab-container>

    <goab-container type="non-interactive" padding="compact">
      <goab-text size="heading-xs" mt="none" mb="xs">2) 12345678</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goab-text>
    </goab-container>
  </goab-container>

  <goab-container accent="thin" width="content">
    <form [formGroup]="form">
      <goab-text size="heading-m" mt="none" mb="m">Adjournment request</goab-text>
      <goab-text size="body-m" mt="none" mb="none">
        Keep track of the individuals who are placed in lodges and may qualify for the Lodge
        Assistance Program subsidy.
      </goab-text>

      <goabx-form-item label="Case history and new request" mt="l">
        <goabx-radio-group name="case" orientation="horizontal" formControlName="case">
          <goabx-radio-item value="grant" label="Grant"></goabx-radio-item>
          <goabx-radio-item value="deny" label="Deny"></goabx-radio-item>
        </goabx-radio-group>
      </goabx-form-item>

      <goabx-form-item label="Reason to deny" mt="l">
        <goabx-dropdown name="reason" width="100%" formControlName="reason">
          <goabx-dropdown-item value="1" label="Incomplete Application"></goabx-dropdown-item>
          <goabx-dropdown-item value="2" label="Eligibility Criteria Not Met"></goabx-dropdown-item>
          <goabx-dropdown-item value="3" label="Documentation Verification Failure"></goabx-dropdown-item>
        </goabx-dropdown>
      </goabx-form-item>

      <goabx-form-item label="Message" mt="l">
        <goabx-textarea name="message" [rows]="5" width="100%" formControlName="message"></goabx-textarea>
      </goabx-form-item>

      <goabx-button mt="xl" (onClick)="onClick()">Confirm adjournment</goabx-button>
    </form>
  </goab-container>
</goab-grid>
document.getElementById("confirm-btn").addEventListener("_click", () => {
  console.log("Confirm clicked!");
});
<goa-grid minchildwidth="315px">
  <goa-container accent="thin" type="non-interactive">
    <goa-text size="heading-m" mt="none" mb="m">Appearance details</goa-text>
    <goa-grid minchildwidth="200px" gap="m">
      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Accused name</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Doe, John Scott</goa-text>
      </goa-block>

      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Date of birth</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Mar 14, 2021</goa-text>
      </goa-block>

      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Court location</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Calgary</goa-text>
      </goa-block>

      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Upcoming appearance date(s)</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Sep 20, 2021</goa-text>
      </goa-block>
    </goa-grid>

    <goa-text size="heading-xs" mt="l" mb="s">Docket number(s) &amp; charges</goa-text>
    <goa-container type="non-interactive" padding="compact">
      <goa-text size="heading-xs" mt="none" mb="xs">1) 12345678</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goa-text>
    </goa-container>

    <goa-container type="non-interactive" padding="compact">
      <goa-text size="heading-xs" mt="none" mb="xs">2) 12345678</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goa-text>
    </goa-container>
  </goa-container>

  <goa-container accent="thin" width="content">
    <form>
      <goa-text size="heading-m" mt="none" mb="m">Adjournment request</goa-text>
      <goa-text size="body-m" mt="none" mb="none">
        Keep track of the individuals who are placed in lodges and may qualify for the Lodge
        Assistance Program subsidy.
      </goa-text>

      <goa-form-item version="2" label="Case history and new request" mt="l">
        <goa-radio-group version="2" name="case" orientation="horizontal">
          <goa-radio-item value="grant" label="Grant"></goa-radio-item>
          <goa-radio-item value="deny" label="Deny"></goa-radio-item>
        </goa-radio-group>
      </goa-form-item>

      <goa-form-item version="2" label="Reason to deny" mt="l">
        <goa-dropdown version="2" name="reason" width="100%">
          <goa-dropdown-item value="1" label="Incomplete Application"></goa-dropdown-item>
          <goa-dropdown-item value="2" label="Eligibility Criteria Not Met"></goa-dropdown-item>
          <goa-dropdown-item value="3" label="Documentation Verification Failure"></goa-dropdown-item>
        </goa-dropdown>
      </goa-form-item>

      <goa-form-item version="2" label="Message" mt="l">
        <goa-textarea version="2" name="message" rows="5" width="100%"></goa-textarea>
      </goa-form-item>

      <goa-button version="2" id="confirm-btn" mt="xl">Confirm adjournment</goa-button>
    </form>
  </goa-container>
</goa-grid>

Set a max width on a long radio item

const [selectOne, setSelectOne] = useState<string>("1");
<form>
      <GoabxFormItem label="Select one option">
        <GoabxRadioGroup
          name="selectOne"
          value={selectOne}
          onChange={(e: GoabRadioGroupOnChangeDetail) => setSelectOne(e.value)}>
          <GoabxRadioItem
            value="1"
            label="Option one which has a very long label with lots of text"
            maxWidth="300px"
          />
          <GoabxRadioItem value="2" label="Option two" />
          <GoabxRadioItem value="3" label="Option three" />
        </GoabxRadioGroup>
      </GoabxFormItem>
    </form>
selectOne = "1";

  onRadioChange(event: GoabRadioGroupOnChangeDetail): void {
    this.selectOne = event.value;
  }
<form>
  <goabx-form-item label="Select one option">
    <goabx-radio-group
      name="selectOne"
      [value]="selectOne"
      (onChange)="onRadioChange($event)">
      <goabx-radio-item
        value="1"
        label="Option one which has a very long label with lots of text"
        maxWidth="300px">
      </goabx-radio-item>
      <goabx-radio-item value="2" label="Option two"></goabx-radio-item>
      <goabx-radio-item value="3" label="Option three"></goabx-radio-item>
    </goabx-radio-group>
  </goabx-form-item>
</form>
document.querySelector('goa-radio-group').addEventListener('_change', (e) => {
  e.target.value = e.detail.value;
});
<form>
  <goa-form-item version="2" label="Select one option">
    <goa-radio-group version="2" name="selectOne" value="1">
      <goa-radio-item
        value="1"
        label="Option one which has a very long label with lots of text"
        max-width="300px">
      </goa-radio-item>
      <goa-radio-item value="2" label="Option two"></goa-radio-item>
      <goa-radio-item value="3" label="Option three"></goa-radio-item>
    </goa-radio-group>
  </goa-form-item>
</form>

Show a list to help answer a question

const handleChange = (event: GoabRadioGroupOnChangeDetail) => {
    console.log("value is", event.value);
  };
<form>
      <GoabxFormItem
        label="Do you have additional education expenses?"
        helpText="You can request funding for these now or at any time during your program."
        mb="m">
        <GoabxRadioGroup name="additional" onChange={handleChange}>
          <GoabxRadioItem label="Yes" value="yes" name="additional" />
          <GoabxRadioItem label="No" value="no" name="additional" />
        </GoabxRadioGroup>
      </GoabxFormItem>

      <GoabDetails heading="What are additional education expenses?">
        <GoabBlock gap="m" mt="m">
          <div>
            <strong>Examples of education expenses</strong>
            <ul className="goa-unordered-list">
              <li>Laptop and computer hardware</li>
              <li>Computer apps and subscriptions</li>
              <li>Home internet</li>
              <li>Testing and exam fees</li>
              <li>Work or school clothing, like work boots</li>
            </ul>
          </div>
          <div>
            <strong>Do not include</strong>
            <ul className="goa-unordered-list">
              <li>Tuition</li>
              <li>Mandatory fees</li>
              <li>Books and supplies</li>
              <li>School association fees</li>
            </ul>
          </div>
        </GoabBlock>
      </GoabDetails>
    </form>
form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      additional: [""]
    });
  }

  onRadioChange(event: Event): void {
    const detail = (event as CustomEvent).detail;
    console.log("value is", detail.value);
  }
<form [formGroup]="form">
  <goabx-form-item
    label="Do you have additional education expenses?"
    helpText="You can request funding for these now or at any time during your program."
    mb="m">
    <goabx-radio-group name="additional" (onChange)="onRadioChange($event)">
      <goabx-radio-item label="Yes" value="yes" name="additional"></goabx-radio-item>
      <goabx-radio-item label="No" value="no" name="additional"></goabx-radio-item>
    </goabx-radio-group>
  </goabx-form-item>

  <goab-details heading="What are additional education expenses?">
    <goab-block gap="m" mt="m">
      <div>
        <strong>Examples of education expenses</strong>
        <ul class="goa-unordered-list">
          <li>Laptop and computer hardware</li>
          <li>Computer apps and subscriptions</li>
          <li>Home internet</li>
          <li>Testing and exam fees</li>
          <li>Work or school clothing, like work boots</li>
        </ul>
      </div>
      <div>
        <strong>Do not include</strong>
        <ul class="goa-unordered-list">
          <li>Tuition</li>
          <li>Mandatory fees</li>
          <li>Books and supplies</li>
          <li>School association fees</li>
        </ul>
      </div>
    </goab-block>
  </goab-details>
</form>
document.querySelector('goa-radio-group').addEventListener('_change', (e) => {
  console.log('value is', e.detail.value);
});
<form>
  <goa-form-item version="2"
    label="Do you have additional education expenses?"
    helptext="You can request funding for these now or at any time during your program."
    mb="m">
    <goa-radio-group version="2" name="additional">
      <goa-radio-item label="Yes" value="yes" name="additional"></goa-radio-item>
      <goa-radio-item label="No" value="no" name="additional"></goa-radio-item>
    </goa-radio-group>
  </goa-form-item>

  <goa-details heading="What are additional education expenses?">
    <goa-block gap="m" mt="m">
      <div>
        <strong>Examples of education expenses</strong>
        <ul class="goa-unordered-list">
          <li>Laptop and computer hardware</li>
          <li>Computer apps and subscriptions</li>
          <li>Home internet</li>
          <li>Testing and exam fees</li>
          <li>Work or school clothing, like work boots</li>
        </ul>
      </div>
      <div>
        <strong>Do not include</strong>
        <ul class="goa-unordered-list">
          <li>Tuition</li>
          <li>Mandatory fees</li>
          <li>Books and supplies</li>
          <li>School association fees</li>
        </ul>
      </div>
    </goa-block>
  </goa-details>
</form>

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 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>

Show more information to help answer a question

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

      <GoabxFormItem
        mt="xl"
        label="Do you pay for child care?"
        labelSize="large"
        helpText="Examples of child care are daycares, day homes and baby-sisters."
      >
        <GoabxRadioGroup
          name="child-care"
          ariaLabel="Do you pay for child care?"
          onChange={() => {}}
        >
          <GoabxRadioItem value="yes" label="Yes" />
          <GoabxRadioItem value="no" label="No" />
        </GoabxRadioGroup>
      </GoabxFormItem>

      <GoabDetails heading="Why are we asking this question?" mt="l">
        <p>We ask this question to determine if you are eligible for child care benefits.</p>
      </GoabDetails>

      <GoabxButton type="submit" mt="2xl">
        Save and continue
      </GoabxButton>
onRadioChange(event: Event): void {
    console.log("Radio changed:", event);
  }
<goabx-link leadingIcon="arrow-back" size="small" mb="none">
  Back
</goabx-link>

<goabx-form-item
  mt="xl"
  label="Do you pay for child care?"
  labelSize="large"
  helpText="Examples of child care are daycares, day homes and baby-sisters.">
  <goabx-radio-group
    name="child-care"
    ariaLabel="Do you pay for child care?"
    (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>

<goab-details heading="Why are we asking this question?" mt="l">
  <p>We ask this question to determine if you are eligible for child care benefits.</p>
</goab-details>

<goabx-button type="submit" mt="2xl">Save and continue</goabx-button>
<goa-link leadingicon="arrow-back" size="small" mb="none">
  Back
</goa-link>

<goa-form-item version="2"
  mt="xl"
  label="Do you pay for child care?"
  labelsize="large"
  helptext="Examples of child care are daycares, day homes and baby-sisters.">
  <goa-radio-group version="2"
    name="child-care"
    arialabel="Do you pay for child care?">
    <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-details heading="Why are we asking this question?" mt="l">
  <p>We ask this question to determine if you are eligible for child care benefits.</p>
</goa-details>

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

States

Submit

When you must disable a button or input:

  • Provide nearby text explaining what needs to happen first
  • Consider showing the element enabled with validation on submit instead
  • Use aria-describedby to link the disabled element to explanatory text
Don't
Don't disable buttons or inputs without explaining why. Disabled controls can be confusing and users may not understand why they can't interact with an element.

Other

The form item automatically associates the label with the input for screen readers, ensuring your form is accessible.

Do
Use a form item wrapper on all inputs to add a label, helper text, error message, and more.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.