Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Core Elements
When to use
Use a multi-select dropdown when the user has the option to pick more than one attribute to modify the data results.
Do
Use in cases were choice making is easy and convenient for the user.
Don't
Don’t use multi-select for conflicting selections
Overflow Content
Overflow content is typically reduced to fit a space or reduce repetition. Truncation is a way to indicate that overflow content is continued.
Do
If the text is too long for one line, truncate and add an ellipsis (…). In truncated options, hovering triggers a tooltip with the full label text.
Don't
Avoid having multiple lines of text in a dropdown.
Resetting options
If used as a filter or have a long list of options, each category should have a way to clear all selected options at once without having to interact with each individual item. Clearing filters returns the filters to their original default starting state.
Do
If multiple categories have been applied to the same data set then there should also be a way to dismiss all filters across all categories at once.
Don't
Avoid making to interact with each individual item to dismiss all selections.
Provide good placement
In general, it is not advisable to position a dropdown so that it exceeds the bottom of the contained space as the dropdown should always expand downwards (with the exception of pagination).
Do
Leave sufficient space for the dropdown to expand downwards.
Don't
Avoid positioning a dropdown where it can be truncated by the bottom of the container.
Support maximum selection limits
When a maximum number of selections is enforced, users should still be able to review and update their choices after reaching the limit. Restrict additional selections without preventing users from removing existing ones.
Do
Disable only the remaining unselected options once the maximum selection limit is reached.
Don't
Avoid disabling the entire multi-select component when the maximum selection limit is reached.
Select-all Feature
Label Formatting
Descriptive and counter labels are present within the select-all feature to provide additional context and awareness to the user as they navigate through multi-select dropdown lists.
Do
In order to clearly highlight the function of the select-all feature we recommend stating this through "all options" along with a counter of items selected and the total available
Don't
Vague or unclear labelling within the select-all may confuse users
Selected State
The select-all counter by it’s very nature is connected to the options of a list. A action made in the menu has a knock on effect to the selected state of the select-all feature.
Do
If items are selected in the menu, this should be visualized through the select-all feature too, irrespective of whether the user interacted with the select-all feature or not.
Don't
Showing a select-all selection status that is independent of the selected state of the menu options, may confuse users and incorrectly suggest that the select-all feature is not tied to the menu options
Sticky Interaction
To provide better emphasis to users who are navigating particularly lengthy menu lists, the sticky interaction provides a degree permanence to the select-all feature.
Do
The sticky interaction should be used on large menu lists to fix the select-all feature to the top, and ensure it is readily at hand for the user.
Don't
Avoid showing large menu lists without the select-all feature's sticky behavior. Without this, a user is required to scroll to the top of this 200+ menu to select all the items.
Related Components & Patterns