Multiselects

Multiselects are user interface controls that allow users to select multiple items from a list of options. They appear in several forms, most commonly as a dropdown list with the multiple attribute in HTML, as a list of checkboxes, or as a dual-list selector. In all cases, the key distinction from single‑select controls is that more than one option may be chosen, and the interface usually conveys the current selections through visual cues such as check marks, highlighting, or a visible list of selected items.

Interactions vary by implementation. Users can typically select or toggle options with the mouse, click and drag or use Ctrl/Cmd and Shift to select ranges, and use the keyboard to navigate and toggle items. Accessibility considerations include proper labeling, focus management, and the use of ARIA roles or native semantics to convey a listbox with options and their selection state.

For long option sets, performance and usability considerations include search or filtering, grouping, and virtualized rendering. Design choices balance discoverability and space: dropdown multiselects conserve space but can be hard to discover, while inline lists or tag-based inputs provide immediate visibility of selections. Data handling generally requires the selected values to be transmitted as a collection (often as an array) when a form is submitted or when component state is serialized. Variants include tag inputs, chips, and dual‑list selectors, each with trade-offs in complexity, clarity, and ease of use.