Checkbox list

A multiple selection input.

Props

name
string
The name for the checkbox list group. Used as group identifier in change events.
value
string[]
Array of currently selected checkbox values.
Defaults to [].
disabled
boolean
Disables all checkboxes in the list.
Defaults to false.
error
boolean
Shows an error state on all checkboxes in the list.
Defaults to false.
testId
string
Sets a data-testid attribute for automated testing.
maxWidth
string
Sets the maximum width of the checkbox list container.
Defaults to none.
size
default | compact
Sets the size of the checkbox list. 'compact' reduces spacing between items.
Defaults to default.
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 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>

Filter a list using a push drawer

const [open, setOpen] = useState(false);
<div style={{ display: "flex", minHeight: "480px" }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "1rem",
            marginBottom: "1rem",
          }}
        >
          <h3 style={{ flex: 1, margin: 0 }}>All cases</h3>
          {!open && (
            <GoabxButton
              type="secondary"
              size="compact"
              leadingIcon="filter"
              onClick={() => setOpen(true)}
            >
              Filters
            </GoabxButton>
          )}
        </div>

        <GoabxTable width="100%">
          <table width="100%">
            <thead>
              <tr>
                <th>Status</th>
                <th>Name</th>
                <th>File number</th>
                <th>Act</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <GoabxBadge type="success" content="Completed" />
                </td>
                <td>Gilbert Barton</td>
                <td>24567-9876</td>
                <td>Traffic safety act</td>
              </tr>
              <tr>
                <td>
                  <GoabxBadge type="information" content="New" />
                </td>
                <td>Brynn Hurley</td>
                <td>98765-3456</td>
                <td>Trespass to premises act</td>
              </tr>
              <tr>
                <td>
                  <GoabxBadge type="midtone" content="In review" />
                </td>
                <td>Marco Silva</td>
                <td>34521-7890</td>
                <td>Gaming, liquor, and cannabis act</td>
              </tr>
              <tr>
                <td>
                  <GoabxBadge type="success" content="Completed" />
                </td>
                <td>Dana Chen</td>
                <td>55123-4567</td>
                <td>Traffic safety act</td>
              </tr>
              <tr>
                <td>
                  <GoabxBadge type="information" content="New" />
                </td>
                <td>Amira Hassan</td>
                <td>67890-1234</td>
                <td>Trespass to premises act</td>
              </tr>
            </tbody>
          </table>
        </GoabxTable>
      </div>

      <GoabxPushDrawer
        heading="Filters"
        width="260px"
        open={open}
        onClose={() => setOpen(false)}
      >
        <GoabxFormItem label="Act">
          <GoabxCheckboxList name="act" onChange={() => {}}>
            <GoabxCheckbox name="traffic" text="Traffic safety act" size="compact" />
            <GoabxCheckbox
              name="gaming"
              text="Gaming, liquor, and cannabis act"
              size="compact"
            />
            <GoabxCheckbox
              name="trespass"
              text="Trespass to premises act"
              size="compact"
            />
          </GoabxCheckboxList>
        </GoabxFormItem>
        <GoabxFormItem label="Status" mt="l">
          <GoabxDropdown name="status" onChange={() => {}} value="" size="compact">
            <GoabxDropdownItem value="" label="All statuses" />
            <GoabxDropdownItem value="new" label="New" />
            <GoabxDropdownItem value="in-review" label="In review" />
            <GoabxDropdownItem value="completed" label="Completed" />
          </GoabxDropdown>
        </GoabxFormItem>
      </GoabxPushDrawer>
    </div>
const filtersDrawer = document.getElementById("filters-drawer");
const openFiltersBtn = document.getElementById("open-filters-btn");

openFiltersBtn.addEventListener("_click", () => {
  filtersDrawer.setAttribute("open", "true");
  openFiltersBtn.style.display = "none";
});

filtersDrawer.addEventListener("_close", () => {
  filtersDrawer.removeAttribute("open");
  openFiltersBtn.style.display = "";
});
<div style="display: flex; min-height: 480px">
  <div style="flex: 1; min-width: 0">
    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem">
      <h3 style="flex: 1; margin: 0">All cases</h3>
      <goa-button
        version="2"
        id="open-filters-btn"
        type="secondary"
        size="compact"
        leadingicon="filter"
        >Filters</goa-button
      >
    </div>

    <goa-table version="2" width="100%">
      <table width="100%">
        <thead>
          <tr>
            <th>Status</th>
            <th>Name</th>
            <th>File number</th>
            <th>Act</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <goa-badge version="2" type="success" content="Completed"></goa-badge>
            </td>
            <td>Gilbert Barton</td>
            <td>24567-9876</td>
            <td>Traffic safety act</td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="information" content="New"></goa-badge></td>
            <td>Brynn Hurley</td>
            <td>98765-3456</td>
            <td>Trespass to premises act</td>
          </tr>
          <tr>
            <td>
              <goa-badge version="2" type="midtone" content="In review"></goa-badge>
            </td>
            <td>Marco Silva</td>
            <td>34521-7890</td>
            <td>Gaming, liquor, and cannabis act</td>
          </tr>
          <tr>
            <td>
              <goa-badge version="2" type="success" content="Completed"></goa-badge>
            </td>
            <td>Dana Chen</td>
            <td>55123-4567</td>
            <td>Traffic safety act</td>
          </tr>
          <tr>
            <td><goa-badge version="2" type="information" content="New"></goa-badge></td>
            <td>Amira Hassan</td>
            <td>67890-1234</td>
            <td>Trespass to premises act</td>
          </tr>
        </tbody>
      </table>
    </goa-table>
  </div>

  <goa-push-drawer version="2" id="filters-drawer" heading="Filters" width="260px">
    <goa-form-item version="2" label="Act">
      <goa-checkbox-list name="act">
        <goa-checkbox
          version="2"
          name="traffic"
          text="Traffic safety act"
          size="compact"
        ></goa-checkbox>
        <goa-checkbox
          version="2"
          name="gaming"
          text="Gaming, liquor, and cannabis act"
          size="compact"
        ></goa-checkbox>
        <goa-checkbox
          version="2"
          name="trespass"
          text="Trespass to premises act"
          size="compact"
        ></goa-checkbox>
      </goa-checkbox-list>
    </goa-form-item>
    <goa-form-item version="2" label="Status" mt="l">
      <goa-dropdown version="2" name="status" size="compact">
        <goa-dropdown-item value="" label="All statuses"></goa-dropdown-item>
        <goa-dropdown-item value="new" label="New"></goa-dropdown-item>
        <goa-dropdown-item value="in-review" label="In review"></goa-dropdown-item>
        <goa-dropdown-item value="completed" label="Completed"></goa-dropdown-item>
      </goa-dropdown>
    </goa-form-item>
  </goa-push-drawer>
</div>

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.