Multi-select
多选框组
Aliases:多选多选下拉可多选的选择框多选框multi select
What is it
A control for picking several values from one option set, echoing the chosen ones as removable chips. Unlike a single select, the panel stays open after each pick and every chip can be removed on its own. Fits tags, permissions and filter facets; pair it with search when the set is large.
Name disambiguation
Colloquially "multi-select" may mean a plain checkbox; this entry covers the list-plus-chips composite control.
Interactive playground
Try it. Make an informed choice.Complete a multi-select and chip-remove once with mouse and once with keyboard.
Loading lab…
What to look for
- 01Each selected item can be removed individually
- 02Empty / no-result states are explained
✓ When to use
- Several values must be committed at once — tags, permissions, filter facets
- Selections must stay visible and individually removable
- A fixed option set that may grow large and need search or grouping
✕ When not to use
- Only one value is allowed — select or combobox states that better
- Fewer than 5 options with no echo needed — visible checkboxes are faster
- Values are free-form inventions rather than list picks — use a tag input
Variants
Chip echo
标签回显
Selected values sit in the control as removable chips
Checkbox list
复选列表
Options laid out as checkboxes — what you see is what you get
Dual listbox
双列表
Two panes with transfer buttons for managing large selections
Implementation
flex-wrapscrollLay chips out with flex-wrap so the control grows with the selection; park the listbox below with max-height and overflow-y-auto. Picking keeps the panel open, Escape collapses it and outside click closes it. Mark choices with aria-selected, and keep each chip's remove button focusable.
Platform API
role="listbox"aria-multiselectablearia-selectedIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| ARIA APG | Listbox (multi-select) |
| shadcn/ui | Combobox (multiple) |
| React Select | isMulti |
Related concepts
A collapsed single-line control holding a set of mutually exclusive options; expanding the panel reveals them and the chosen value stays on the trigger. More space-efficient than radios, suited to more than 5 options; the panel can scroll, group or search, and picking one closes it.
ComponentsAlternativeA text field paired with a list of suggestions. People type to narrow a set, then commit a value with pointer or keyboard. Typed text, the active suggestion and the committed selection are separate states. Provide a clear empty result and a way to clear the field when nothing matches.
ComponentsAlternativePressing Enter or typing a separator turns the current text into a removable chip; chips line up inside the field while the caret stays at the end. It mixes free typing with per-item management — common for recipients, hashtags, file names and filter terms. Backspace removes the last chip, the × removes a specific one.
ComponentsSimilarNot to be confused with
Select commits one value; multi-select accumulates many and echoes them as chips
Combobox searches and commits one value; multi-select manages a set