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>

Use checkboxes to let users select one or more options from a list when multiple selections are valid.

When to use

Use this pattern when:

Users can select multiple options from a predefined list
All options that apply should be selected
The list of options is relatively short (up to ~7 items)
Each option is independent of the others

Considerations

Use clear, concise labels for each option
Include help text like “Choose all that apply” to indicate multiple selection
Consider the order of options (most common first, alphabetical, etc.)
For longer lists, consider a different component like multi-select dropdown
Ensure adequate touch targets for mobile users