Multi-select

The Multi‑select allows users to select multiple options from a single input. It can also support bulk selection and filtering where needed. 

Basic

This example shows the basic Multi-select component without additional functionality.

Select all

This example shows the Multi-select component with select-all functionality.

With descriptions

This example shows the Multi-select component with item descriptions.

Section titles

This example shows the Multi-select component with section titles to categorise items into groups.

Filtering

This example shows the Multi-select component with filtering functionality to narrow down the list of items to choose from.

All functions

This example shows the Multi-select component with all functions displayed.

Single select

The single select variant of the Multi-select component should only be used when the items in the list require styling or filtering – otherwise the recommendation is to use a regular Select component. 

Basic

This example shows the basic single-select variant without additional functionality.

Section titles

This example shows the single-select variant with section titles to categorise items into groups.

With descriptions

This example shows the Single-select component with item descriptions.

Filtering

This example shows the single-select variant with filtering functionality to narrow down the list of items to choose from.

All functions

This example shows the single-select variant with all functions displayed.

Fixed widths

Sizes

Multi-selects come in four different sizes (heights) with the default being Medium 36px. Ensure when you are designing forms that you alway use the same size across element types.

User experience

The Multi‑select component introduces more complexity than a regular Select component, so it's design focusses on clarity, predictability and accessibility. Like every component in the Design System, decisions are driven by what will provide the most robust solution across a wide range of scenarios. 

When to use 

Use the Multi‑select when users need to choose more than one option from a defined set, and when those choices need to be reviewed, changed or removed without friction. This component also allows the items listed in the menu to be filtered, have simple styling and multiple lines of text. 

If the list of options is short and it makes sense in the interface, consider using checkboxes instead. 

Visibility and affordance of selection 

The Multi‑select is designed with a clear and persistent selected state, ensuring users can quickly understand: 

• what has been selected 
• how many items are selected 
• how to remove or change a selection 

The component also clearly communicates that multiple selections are allowed through strong visual affordance. This includes: 

• clear focus and active states 
• strong selected states that persist 
• immediate feedback when items are added or removed 

Together, these cues reinforce user control, reduce uncertainty and help prevent selection errors. 

Visual design

Like all components in the design system, the Multi‑select is designed to be simple, unobtrusive and accessible. Visually, it aligns in both size and style with other input and select components to ensure consistency across the system.