Multiple Select

Multiple select allows users to make a multiple selection from a dropdown list of five or more items. For fewer than five items consider using checkboxes.  

On this page

Best Practices

Use Multiple Select
  • To let a user choose more than one option from a dropdown list
  • When you have six or options to choose from
  • If you would like to save vertical space
  • If the list is populated from a data source and unaware of how many options there will be
  • With optional hint text to provide additional instructions
Don’t Use Multiple Select
  • To reduce vertical space
  • If there are five or less options, consider checkbox for multi selection

Variations

Multi Select Variations
VariationDescription
ListedNumber of selected items are filled in input field.
TagsOptional dismissible tags can be used outside of dropdown, providing visibility and quick action to dismiss a selection. Best used for filters.

Recommendations

Select labels are required and should be short, clear and descriptive. It should be easy for the users to understand what they are selecting.  

Do This
Multi Select Do This
Don’t Do This
Multi Select Don't Do This

When writing labels, use sentence case, not title case or all caps (unless using a proper noun). 

Do This
Multi Select Do This
Don’t Do This
Multi Select Don't Do This

Avoid ending labels in colons or commas.

Do This
Multi Select Do This
Don’t Do This
Multi Select Don't Do This

List the options in alphabetical order or any other order which makes sense. 

Do This
Multi Select Do This
Don’t Do This
Multi Select Don't Do This

Avoid long dropdowns that require scrolling because they make it difficult to view all items immediately. If you have too many items to include, consider using an autocomplete field that customers can type in to filter results, such as search input with typeahead. 

Do This
Multi Select Do This
Don’t Do This
Multi Select Don't Do This

If there are five or less options, consider using checkbox for multi selection. 

Do This
Multi Select Do This
Don’t Do This
Multi Select Don't Do This

Avoid adding error within the dropdown, display it below the input field. 

Do This
Multi Select Do This
Don’t Do This
Multi Select Don't Do This

Behavior

  1. On hover we have introduced a blue, so a user can identify easily between hover and selected. With elements right next to each other the focus ring will be inside 4px of the visual element.
  2. Selected item will have check icon and gray background filled in to let user know that selection is selected.
  3. Selected hover highlights in blue similar to hover with the addition of check icon within checkbox.
Multi Select Behavior

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.