composite pattern · Selection and suggestions

Multi-select

A selection control that keeps several values from one option set, often using checked options, removable chips, or a persistent selected-items list.

reviewpublishedV1 field note

Decisive boundary

Multi-select describes a multiple-value contract; use Select for one fixed value and Checkbox Group when all choices should stay visible.

Definition and intent

What is a Multi-select UI pattern?

Use the behavior, not the silhouette

A selection control that keeps several values from one option set, often using checked options, removable chips, or a persistent selected-items list. The term is used here as a composite pattern made from multiple controls or regions that must work together. That distinction prevents a visual resemblance from silently deciding focus, keyboard, modality, or dismissal behavior.

Let users choose and review several values from the same option set without duplicating one control per value. A good implementation preserves that job while making the trigger, open state, close path, and responsive behavior observable to users.

Know when the label is wrong

The fastest way to identify a pattern is often to reject the nearest alternative. For Multi-select, the boundary is: Multi-select describes a multiple-value contract; use Select for one fixed value and Checkbox Group when all choices should stay visible.

Do not implement it as Single Select when several values are valid, and Autocomplete when free-form creation rather than list selection is the main requirement. If those requirements describe the real task better, use the related pattern page or the full Selection and suggestions comparison before writing code.

Decision process

Decide before choosing a component

Record these requirements in plain language. A library component name is not a substitute for the contract.

Confirm the user job

Let users choose and review several values from the same option set without duplicating one control per value.

Define opening and closing

Focus or activation opens the option list; native controls may remain open while modifier keys select items. Escape, focus movement, outside interaction, or an explicit Done action according to the chosen control.

Specify access behavior

Focus remains in the field or listbox while options are selected; removable values expose reachable remove controls. Arrow keys move through options, Space or Enter changes selection, and every selected value can be reviewed and removed without a pointer.

Reject the near miss

Single Select when several values are valid, and Autocomplete when free-form creation rather than list selection is the main requirement.

Behavior contract

What must survive the build

trigger: Focus or activation opens the option list; native controls may remain open while modifier keys select items.
dismissal: Escape, focus movement, outside interaction, or an explicit Done action according to the chosen control.
modality: Non-modal form control.
focus: Focus remains in the field or listbox while options are selected; removable values expose reachable remove controls.
keyboard: Arrow keys move through options, Space or Enter changes selection, and every selected value can be reviewed and removed without a pointer.
interactive: Contains a list of options and may expose search, check indicators, chips, clear, or select-all actions.
persistence: All selected values remain visible or otherwise reviewable before form submission.
placement: Inline form field with an anchored listbox, native multiple select, or two-pane transfer list.
mobile: Prefer a full-width list or native control when a small popup cannot show selected values and touch targets clearly.

Failure modes

Common wrong builds

Hiding selected values after the popup closes.
Removing chips without an accessible keyboard action.
Using a checkbox-looking menu while only one value can actually persist.

Observable checks

Verify the result

Several values can remain selected at once.
Every selected value is visible or reviewable.
Keyboard users can select and remove values.
The accessible name and selected state are announced.
The mobile layout exposes comfortable option and removal targets.

Coding-agent handoff

Implementation brief template

Pattern: Multi-select
Purpose: Let users choose and review several values from the same option set without duplicating one control per value.
Trigger: Focus or activation opens the option list; native controls may remain open while modifier keys select items.
Dismissal behavior: Escape, focus movement, outside interaction, or an explicit Done action according to the chosen control.
Modality: Non-modal form control.
Focus behavior: Focus remains in the field or listbox while options are selected; removable values expose reachable remove controls.
Keyboard behavior: Arrow keys move through options, Space or Enter changes selection, and every selected value can be reviewed and removed without a pointer.
Interactive content: Contains a list of options and may expose search, check indicators, chips, clear, or select-all actions.
Placement: Inline form field with an anchored listbox, native multiple select, or two-pane transfer list.
Mobile behavior: Prefer a full-width list or native control when a small popup cannot show selected values and touch targets clearly.
Do not implement as: Single Select when several values are valid, and Autocomplete when free-form creation rather than list selection is the main requirement.
Acceptance checks:
- Several values can remain selected at once.
- Every selected value is visible or reviewable.
- Keyboard users can select and remove values.
- The accessible name and selected state are announced.
- The mobile layout exposes comfortable option and removal targets.

Claim-level references

Sources, not a confidence score

01SelectMaterial UI · Official component documentation

Multiple selection, selected-value arrays, indicators, and chips

02The select elementMDN Web Docs · Platform documentation

Selection from a predefined option list

Frequently asked questions

Multi-select UI pattern questions

Direct answers based on the reviewed behavior contract above.

What is a Multi-select in web UI?

A selection control that keeps several values from one option set, often using checked options, removable chips, or a persistent selected-items list. In this reference set it is a composite pattern made from multiple controls or regions that must work together.

When should I use a Multi-select?

Let users choose and review several values from the same option set without duplicating one control per value. The decisive boundary to confirm is this: Multi-select describes a multiple-value contract; use Select for one fixed value and Checkbox Group when all choices should stay visible.

What keyboard and focus behavior does a Multi-select need?

Arrow keys move through options, Space or Enter changes selection, and every selected value can be reviewed and removed without a pointer. Focus remains in the field or listbox while options are selected; removable values expose reachable remove controls. These statements describe the reviewed expectation, but the final implementation still needs testing in the component library and browser you ship.

How should a Multi-select behave on mobile?

Prefer a full-width list or native control when a small popup cannot show selected values and touch targets clearly. Its modality is a separate requirement: Non-modal form control.

How do I verify a Multi-select implementation?

Start with observable checks: Several values can remain selected at once. Every selected value is visible or reviewable. Keyboard users can select and remove values. Then verify the remaining checks and compare the result with the linked source guidance.