Multi-Selects

A multi-select is a form element that allows users to select multiple options from a dropdown list.

Overview

Use multi-selects with input group containers to present a menu of options with multiple selections. Both multi-selects and filters allow users to select multiple options from a list. Use multi-selects for form fields and filter rows and use the filter component for standalone filters.

There are two sizes of multi-selects: small and medium, with medium being the default. The ['medium'] size has a tablet/mobile breakpoint of 1024 px. On tablet and mobile screens, it will shrink to better fit the limited content area while still retaining a large touch target area. Use ['small'] only with specific components, such as data tables.

Design and Layout

Anatomy

ElementDescription
1. Multi-select The multi-select component. Use with Input Group containers.
2. Selected items List of selected items. The selectionCutOff prop controls the number of items that will display in the input box. For narrow fields, keep the number low to ensure other elements display correctly.
3. Additional selected values The total number of additional selected values will be indicated in parentheses following the list of selected values.
4. Text search Multi-selects are filterable. When the filterable prop is set to true (default), the list of options will be filtered by the search text.
5. Select all When the showSelectAll prop is set to true (default), the “Select All” option will display.
6. Options An array of strings or objects to be used as dropdown choices.

Style Variations

Multi-selects have different colors, effects, and line weights depending on their state. These differences provide visual feedback to users and enhance usability.

STATEEXAMPLE
Default
Focus
Error
Disabled

Dos and Don'ts

Do
  • Do use multi-selects for form fields with more than five options. Use a checkbox group for questions with five options or fewer.
Don't
  • Don't use multi-selects for standard form fields if there are fewer than six options. Instead, use a checkbox group. Multi-selects with fewer than four options may be used for filters and compact UIs, such as an editable data cell.
Do
  • Do organize multi-selects into filter rows.

Installation

Props

Events