Multi-select

Multi-select is an input pattern that allows users to choose more than one item from a set of options. The appropriate implementation depends on the number of options, the frequency of selection, and the display context.

What is multi-select in UX design?

Multi-select refers to any interface pattern that allows users to select more than one item from a set of options. It appears in several forms: checkbox groups in forms where multiple items from a list can be selected simultaneously, multi-select dropdowns that expand to show a checkable list while displaying selected items as chips or a count, tag input fields where users add multiple values one at a time, and list or table interfaces where rows can be checked for bulk actions. The appropriate implementation depends heavily on how many options exist, how many the user is likely to select, and what they will do with the selection.

How do you choose between multi-select patterns?

Checkbox groups work well for small sets of options, typically up to eight, where users benefit from seeing all options simultaneously before making selections. Multi-select dropdowns work for larger option sets where showing all options simultaneously would take too much space. Tag inputs work for freeform or user-defined values where the option set is either very large or open-ended. List multi-select with row checkboxes works for data tables where users are selecting records for bulk actions. The key question is whether users need to see all options before selecting, which favors visible checkboxes, or whether they know what they want and benefit from search, which favors tag inputs or searchable dropdowns.

What are the accessibility requirements for multi-select?

Each selectable item must have an accessible label. The group of items must have a group label. The selected state of each item must be communicated programmatically. For checkbox groups, standard HTML checkbox elements with associated labels handle most accessibility requirements natively. For custom implementations, ARIA listbox with aria-multiselectable="true" and aria-selected on each option communicates the multi-select behavior to screen readers. Selected items displayed as chips must be individually removable by keyboard and each remove button must have a descriptive label. The total number of selected items should be communicated when useful.

Related terms

Related guides