Checkbox

Let the user select one or more options.

Props

name
string
Unique name to identify the checkbox.
checked
boolean
Marks the checkbox item as selected.
Defaults to false.
indeterminate
boolean
Shows a mixed/partial selection state. Used for 'Select All' checkboxes when some items are selected.
Defaults to false.
text
string
Label shown beside the checkbox.
value
string
The value binding.
disabled
boolean
Disable this control. It will not receive focus or events.
Defaults to false.
error
boolean
Shows an error on the checkbox item.
Defaults to false.
testId
string
Sets a data-testid attribute for automated testing.
ariaLabel
string
Defines how the text will be translated for the screen reader. If not specified it will fall back to the name.
description
string
Additional description text displayed below the checkbox label.
revealarialabel
string
Text announced by screen readers when the reveal slot content is displayed.
maxWidth
string
Sets the maximum width of the checkbox.
Defaults to none.
size
default | compact
Sets the size of the checkbox. 'compact' reduces spacing for dense layouts.
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
onRevealChange
(event: Event) => void
_revealChange
CustomEvent

Slots

description
Named slot for content
reveal
Named slot for content
 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>

Include a link in the helper text of an option

<GoabxFormItem label="How would you like to be contacted?">
      <GoabCheckboxList name="contact-options">
        <GoabxCheckbox
          name="email"
          text="Email"
          value="email"
          description={
            <span>
              Help text with a <a href="#">link</a>.
            </span>
          }
        />
        <GoabxCheckbox name="phone" text="Phone" value="phone" />
        <GoabxCheckbox name="text" text="Text message" value="text" />
      </GoabCheckboxList>
    </GoabxFormItem>
optionOne = true;
  optionTwo = false;
  optionThree = false;
<goabx-form-item label="How would you like to be contacted?">
  <goab-checkbox-list name="contact-options">
    <goabx-checkbox
      name="email"
      text="Email"
      value="email"
      [description]="descriptionTemplate">
      <ng-template #descriptionTemplate>
        <span>Help text with a <a href="#">link</a>.</span>
      </ng-template>
    </goabx-checkbox>
    <goabx-checkbox name="phone" text="Phone" value="phone"></goabx-checkbox>
    <goabx-checkbox name="text" text="Text message" value="text"></goabx-checkbox>
  </goab-checkbox-list>
</goabx-form-item>
<goa-form-item version="2" label="How would you like to be contacted?">
  <goa-checkbox-list name="contact-options">
    <goa-checkbox version="2" name="email" text="Email" value="email">
      <span slot="description">Help text with a <a href="#">link</a>.</span>
    </goa-checkbox>
    <goa-checkbox version="2" name="phone" text="Phone" value="phone"></goa-checkbox>
    <goa-checkbox version="2" name="text" text="Text message" value="text"></goa-checkbox>
  </goa-checkbox-list>
</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>

Select one or more from a list of options

const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
<GoabxFormItem
      label="How would you like to be contacted?"
      helpText="Choose all that apply"
    >
      <GoabCheckboxList
        name="contactPreferences"
        value={selectedOptions}
        onChange={(e) => setSelectedOptions(e.detail.value)}
      >
        <GoabxCheckbox name="email" text="Email" value="email" />
        <GoabxCheckbox name="phone" text="Phone" value="phone" />
        <GoabxCheckbox name="text" text="Text message" value="text" />
      </GoabCheckboxList>
    </GoabxFormItem>
selectedOptions: string[] = [];

  onSelectionChange(event: { detail: { value: string[] } }): void {
    this.selectedOptions = event.detail.value;
  }
<goabx-form-item
  label="How would you like to be contacted?"
  helpText="Choose all that apply">
  <goab-checkbox-list
    name="contactPreferences"
    [value]="selectedOptions"
    (onChange)="onSelectionChange($event)">
    <goabx-checkbox name="email" text="Email" value="email"></goabx-checkbox>
    <goabx-checkbox name="phone" text="Phone" value="phone"></goabx-checkbox>
    <goabx-checkbox name="text" text="Text message" value="text"></goabx-checkbox>
  </goab-checkbox-list>
</goabx-form-item>
const checkboxList = document.querySelector("goa-checkbox-list");
let selectedOptions = [];

checkboxList.addEventListener("_change", (e) => {
  selectedOptions = e.detail.value;
  console.log("Selected options:", selectedOptions);
});
<goa-form-item version="2"
  label="How would you like to be contacted?"
  helptext="Choose all that apply">
  <goa-checkbox-list name="contactPreferences">
    <goa-checkbox version="2" name="email" text="Email" value="email"></goa-checkbox>
    <goa-checkbox version="2" name="phone" text="Phone" value="phone"></goa-checkbox>
    <goa-checkbox version="2" name="text" text="Text message" value="text"></goa-checkbox>
  </goa-checkbox-list>
</goa-form-item>

Types

Go to homepage
Don't
Don't use Button for simple navigation (use Link), toggling state (use Toggle or Checkbox), or minor utility functions (use Icon Button).

Content

Do
Start all checkbox labels with a capital letter.
Don't
Don't include punctuation after checkbox labels.

Other

Do
Use checkboxes when the user can select more than one option.

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.

Positioning

Do
Put the checkbox input to the left of the label.
Do
List checkbox options vertically.
Don't
Don't list options horizontally when showing more than two options.

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