Checkbox dropdown
Token multi-select
Transfer list
Available
Selected
Tick an option on the left. The count in the closed box is the selected-value summary
Multi-select
/ <select multiple> · aria-multiselectable="true" /
also called multiselect, multiple select, multi-select dropdown, checkbox dropdown, multi-select listbox, token multi-select, transfer list, pick list, shuttle
A multi-select is one control that holds several chosen values at once. The same job wears three faces: a closed trigger reading something like 2 selected over a list of checkbox rows, a searchable field that turns every choice into a removable chip, and a two-pane transfer list (also called a dual list selector or shuttle) with arrows moving items between Available and Selected. Under all three the accessible pattern is the same: a native <select multiple>, or a role="listbox" with aria-multiselectable="true" and aria-selected on each option. If the field also lets people invent brand-new values it is a tags input instead, and a variant that floats the ticked rows to the top of one list is just selected-first ordering, not a separate control.
If you called it…
…you meant a multi-select.
Anatomy — every part, named
- 1Selected-value summary
Select.ValueText“The text in the dropdown that says 2 selected” is the selected-value summary.
- 2Option checkbox (selected-option indicator)
role="option" aria-selected="true"“The little boxes beside each dropdown item” are the option checkboxes, the drawn form of aria-selected.
- 3Selected token and its remove button
TagsInput.Item / TagsInput.ItemDeleteTrigger“The little filter pills that appear after I choose things, each with an x” are the selected tokens and their remove buttons.
- 4Source and target lists
<Transfer dataSource targetKeys>“The two boxes, available things on the left and chosen things on the right” are the source and target lists of a transfer list.
- 5Transfer actions (move buttons)
Transfer actions“The arrow buttons between the two boxes” are the transfer actions.
Prompt — paste into your agent
Build a Multi-select with role="listbox" and aria-multiselectable="true": open it from a compact trigger that shows the selected count, keep the searchable option list open while several role="option" rows toggle aria-selected, render each selected value as a removable chip, and keep keyboard focus separate from selection. For the two-pane variant use an Ant Transfer with titled Available and Selected panes, targetKeys for the chosen items, and move buttons disabled when nothing eligible is checked.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my multi-select (role="listbox" aria-multiselectable, <select multiple>, Ant Select mode="multiple", MUI Autocomplete multiple). Rule out: the popup closing after the first pick because the option click still runs a close-on-select handler written for a single-value select; selection held as an array but compared by object identity, so re-rendered options lose their checked look; the trigger count derived from a different source than the option list and going stale; a drawn checkbox and aria-selected drifting apart, so screen readers announce the opposite of what is on screen; filtering the list silently dropping already-selected values that are no longer visible; a token remove button stealing focus or reopening the popup instead of removing just that one value; transfer-list move buttons left enabled when nothing eligible is checked. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| HTML | <select multiple> | the native primitive; read the chosen options off HTMLSelectElement.selectedOptions |
| ARIA | aria-multiselectable="true" | the defining state on a custom role="listbox" that may keep more than one option selected |
| ARIA | role="option" aria-selected | per-option selection state; APG warns that focus is not selection |
| Material UI | <Autocomplete multiple> | the searchable form; renderValue draws each chosen value as a chip |
| Ant Design | <Select mode="multiple"> | with showSearch and tagRender; mode="tags" is the different, creatable-values mode |
| Chakra UI | <Select.Root multiple> | Select.Trigger holds the Select.ValueText selection summary |
| Ant Design | <Transfer targetKeys> | the two-pane subtype; actions renders the move buttons between the lists |
| Chakra UI | TagsInput.ItemDeleteTrigger | the x inside one selected token |