Multiselect Combobox

A multiselect combobox allows users to choose multiple options from a dropdown list simultaneously. It can be used whenever users must choose from a known, limited set of values where more than one option applies, similarly to a checkbox group.

The native <select multiple> element provides a similar function as a multiselect combobox but renders as a scrollable listbox rather than a dropdown, so it is not demonstrated here.

Accessibility Features

  • A multiselect combobox has a similar structure and keyboard behaviour as the custom select-only combobox with a few exceptions:
  • aria-multiselectable="true" on the listbox communicates that multiple options can be selected.
  • An <output> element announces the number of selected options to screen readers. aria-describedby associates the output with the input.
  • Selected options are rendered as <button> elements, making them individually focusable and removable via keyboard. aria-label="Remove [option]" communicates the purpose and action to screen readers.
  • Space and Enter toggle selection of the focused option without closing the dropdown.
  • Pressing Backspace removes the last selected option.

Example

Code Snippet