Select one or more from a list of options

React

Angular

Web Components

const [selectedOptions, setSelectedOptions] = useState<string[]>([]);

<GoabFormItem
      label="How would you like to be contacted?"
      helpText="Choose all that apply"
    >
      <GoabCheckboxList
        name="contactPreferences"
        value={selectedOptions}
        onChange={(e) => setSelectedOptions(e.detail.value)}
      >
        <GoabCheckbox name="email" text="Email" value="email" />
        <GoabCheckbox name="phone" text="Phone" value="phone" />
        <GoabCheckbox name="text" text="Text message" value="text" />
      </GoabCheckboxList>
    </GoabFormItem>

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