Multi select

A multi select is a select whose answer is a set rather than a value. Everything else follows from that one change. The list cannot close on the first pick, because the reader is not finished; each option has to show whether it is in or out, which is why the rows carry checkboxes; and the field has to show a set, which is why the chosen values sit in it as removable tokens.

Those tokens are the part that catches people out. A field holding three of them is taller than a field holding none, so a form built around a one line control starts shuffling everything below it as the reader chooses. Decide the shape up front: reserve the room the tokens will take, or keep them to one line and overflow into a “+3 more” token, or move them out of the field entirely into a row of applied filters underneath. What you must not do is let the page jump every time someone answers.

The names split by which half the system emphasises. Cloudscape calls it a multiselect, Fluent calls the version with a text input a tag picker, and a control that filters as you type is often called a multi combobox. It is worth keeping this term apart from tag input, where the values are invented by the person typing rather than chosen from a list, and from a transfer list, which is the two column answer for picking dozens out of hundreds. When the whole list fits on screen and the field is not competing for room, plain checkboxes beat all of them.

The accessibility work is mostly about not losing state. The popup is a listbox with aria-multiselectable="true" and aria-selected on every option, not just the chosen ones, so the reader can hear that an option is off. Keep the popup open as picks accumulate, and keep the reader where they were in it. Every token needs a removal that is reachable without a pointer, whether that is a labelled button (“Remove failed”) or Backspace from the end of the field, and the running total is worth announcing, because in a control like this the count is the answer.