Multi-selects are used for lists of options that aren’t exclusive to each other. Users can select all, none, or multiple options within a list.
Multi-selects are used for large lists of options. If the list is small, consider using a checkbox fieldset, depending on space and the purpose of the multi-select. Label and option items are the only required inputs for the multi-select component. All other additions below are optional and depend on the situation.
Variations
Standard multi-select
Use a multi-select when a user can select multiple items.
Standard multi-select with search
A multi-select with a search bar allows the user to filter the list of options using a keyword that is at least three letters long. Use this when the user has to select from a very long list of options.
Standard multi-select with option groups
A multi-select with groups allows the user to select subsets of options by a grouping variable.
Standard multi-select with disabled options
Use this variation when a user cannot select or deselect a certain option or options within the multi-select menu.
Disabled multi-select
This variation does not allow the user to change the value of the multi-select. The multi-select’s value will not be submitted when in a form.
Readonly multi-select
This variation does not allow the user to change the value of the multi-select. The multi-select’s value will be submitted when in a form.
Multi-select with tags
This variation replaces the standard "_ out of _ selected" text with tags. Up to three tags will be displayed. If more than three options are selected a "+ _ more" tag will appear alongside the first three tags.
Multi-select with a custom placeholder
This variation shows a custom placeholder instead of listing selected option tags. This variation should be used when the placeholder is more important than showing what was selected or when the selected options are seen within the page. For example, this variation is used for the column selector within the table. Custom placeholder can be used with custom options.
Multi-select with custom options
This variation shows custom options. This variation should be used if additional content is needed in each option. An example of this would be a status filter where the status icon is shown with the option text. Custom options can be used with custom placeholder.