UX Patterns Guide
Back to compare picker

Checkboxes vs multi-select: choosing a selection control

By UX Patterns GuideWorked decision updated Editorial method

Use visible checkboxes when people benefit from comparing a short set of independent choices. Consider a searchable multi-select when the list makes that comparison impractical and people can identify items by name. Keep the selected set reviewable in either design.

Checkbox group live exampleMulti-select live example

Worked decision · constructed example

Should people see every choice or search for a known item?

A facilities request has four service options: cleaning, repairs, security, and catering. A second field assigns the request to locations from a list of 180 buildings. Both fields allow several selections, but they present different finding and review problems.

Try Checkbox group →Try Multi-select →
The same multiple-selection rule can need different controls
FieldProposed controlState to make visible
Four servicesA labelled checkbox group with a hint explaining multiple selection.All options and checked values remain visible together.
180 building namesA searchable multi-select with a persistent selected-items summary.Searching changes available matches while previous selections remain reviewable.
Remove a buildingA named remove action for that selected building.Only the intended building leaves the selected set.
Submit the requestA review of the chosen services and locations.The submitted values match the selections the person could inspect.

Why this choice

There is no universal option-count cutoff. The four services invite comparison, while location assignment is often a known-item search. Prototype both controls if location names are unfamiliar or users need to compare attributes rather than recognize names.

Where the decision changes

A native multiple select, a listbox, and a chip-based searchable picker have different interaction models. Specify the actual control rather than treating the word multi-select as a complete accessibility contract. Do not place independently operable buttons or checkboxes inside listbox options.

Try these checks

  1. Select two services using only the keyboard and verify the group label is available.
  2. Choose a building, search for another, and verify the first remains selected.
  3. Remove one selection and confirm the remaining values are preserved.
  4. Check the chosen control with touch, keyboard, and assistive technology before adopting it.

What the sources support

  • GOV.UK documents grouped multiple choices and explanatory hints. GOV.UK: Checkboxes ↗

  • APG distinguishes focus from selection and warns that listbox options do not support nested interactive controls. W3C APG: Listbox ↗

These source claims were checked on . The scenario and decision analysis are illustrative; the checks are a test plan, not reported results from a user study.

Compare the full pattern contracts
Dimension Checkbox groupMulti-select
UI or UX UI + UX - Multiple-choice form controlUI + UX - Multi-value picker widget
UI guidance Render visible native checkboxes with labels, checked states, group legend, select-all-that-apply hint, and group validation state.Render a filter input, open option list, selected-value chips, remove controls, checked option states, clear-all control, and validation state.
UX guidance Let users choose independent options and review the selected set before submitting.Help users choose multiple values from a large, compact, or dynamic option set.
Good UI Visible checkboxes with large hit areas, persistent labels, group legend, and aligned helper text.Selected values are shown as removable chips or checked rows with clear labels.
Bad UI Tiny custom boxes that are hard to target.Selected values hidden inside a closed dropdown.
Good UX Clicking the label toggles the checkbox.Selection limits and duplicates are handled before submit.
Bad UX Using checkboxes for mutually exclusive choices.Removing a value is impossible by keyboard.
Best fit Users can choose zero, one, or many options.Users choose many values from a long predefined list.
Avoid when Only one option can be selected.The set is short and independent choices should stay visible.
Required state Unchecked option state.Open filtered option list state.
Accessibility burden Use programmatic labels for every checkbox.Expose selected state for options and labels for remove controls.
Common misuse Using checkboxes for mutually exclusive choices.Hiding selected values inside a closed menu.

Checkbox group

UI or UX
UI + UX - Multiple-choice form control
UI guidance
Render visible native checkboxes with labels, checked states, group legend, select-all-that-apply hint, and group validation state.
UX guidance
Let users choose independent options and review the selected set before submitting.
Good UI
Visible checkboxes with large hit areas, persistent labels, group legend, and aligned helper text.
Bad UI
Tiny custom boxes that are hard to target.
Good UX
Clicking the label toggles the checkbox.
Bad UX
Using checkboxes for mutually exclusive choices.
Best fit
Users can choose zero, one, or many options.
Avoid when
Only one option can be selected.
Required state
Unchecked option state.
Accessibility burden
Use programmatic labels for every checkbox.
Common misuse
Using checkboxes for mutually exclusive choices.

Multi-select

UI or UX
UI + UX - Multi-value picker widget
UI guidance
Render a filter input, open option list, selected-value chips, remove controls, checked option states, clear-all control, and validation state.
UX guidance
Help users choose multiple values from a large, compact, or dynamic option set.
Good UI
Selected values are shown as removable chips or checked rows with clear labels.
Bad UI
Selected values hidden inside a closed dropdown.
Good UX
Selection limits and duplicates are handled before submit.
Bad UX
Removing a value is impossible by keyboard.
Best fit
Users choose many values from a long predefined list.
Avoid when
The set is short and independent choices should stay visible.
Required state
Open filtered option list state.
Accessibility burden
Expose selected state for options and labels for remove controls.
Common misuse
Hiding selected values inside a closed menu.
Decision rules
  • Prefer checkbox groups when a short set of independent choices can remain visible and users need to compare or toggle several options directly.
  • Prefer multi-select when the option set is long, searchable, dynamic, or compact enough that selected values need chip-style review outside the open list.
  • Keep selected values reviewable before the user commits the form; for checkbox groups the list itself can be the review surface, while multi-select needs an explicit selected-value surface.
Inspect live examples
Checkbox groupMulti-select
Failure modes
  • Collapsing a short critical choice set into a hidden control.
  • Using many checkboxes for a long list without search or grouping.

Saved items