MultiSelect

The MultiSelect component allows users to select multiple options from a predefined list. It is especially useful when a user needs to apply multiple filters in a data grid or select multiple categories within a form.

Maturity level - under review, subject to change - use with caution

View the React component implementation details and all variants in Storybook.

Component examples

Guidance

When to use the MultiSelect component

Use the MultiSelect component when:

  • Users need to choose more than one item from a list of options.
  • You are implementing filtering functionality, especially in Data Grids.
  • The list has between 6 and 20 options, and screen space is limited.

When to consider something else

  • Fewer than 6 options: Use checkboxes presented in the form rather than a MultiSelect.
  • Single selection only: Use a Select component or Radio buttons.

Usability guidance

  • Keep option labels short and scannable.
  • Keep placeholder text concise and meaningful. Avoid overly long placeholder text. If the placeholder is too long, it may be truncated within the input field, which can negatively affect readability and user experience.
  • If the MultiSelect is a filter, use the slim size and display selected items clearly, either inside the field or below it as Chips.
  • Avoid dependent options. Avoid making options in one MultiSelect menu change based on the input to another. Users often don’t understand how choosing an item in one impacts another.

Accessibility

  • Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.
  • Always use a label. Make sure your MultiSelect element has a label. Don’t replace it with the default menu option (for example, removing the “Lung-RADS” label and just having the menu read “Select Lung-RADS score” by default).
  • Always provide a unique ID prop. A unique ID ensures proper association between the label, input, and any ARIA attributes, making the component reliably navigable for assistive technologies.
  • Always provide a placeholder prop. Use a clear placeholder to guide users on what to select before any choices are made.