Multiselect
Control that allows users to select multiple options from a dropdown menu.
Multiselect components enable users to select one or more checkboxes from a menu. This component combines an input field and multiselect listbox to ensure users can find and select options quickly.
Also known as: Multi-select menu, multiple select dropdown, multi-select combobox, multi-option selector, multi-selector.
Anatomy
A. Label (required): Text summarizing the options available for selection.
B. Inline message (optional): Brief text describing the field label in more detail.
C. Chevron icon button (required): UI icon button that expands or collapses menu.
D. Input (required): Text field enabling users to enter text to filter menu options.
E. Option (required): Selectable text representing a single option.
F. Menu (required): Container displaying list of options that includes scrollbar as needed.
G. Removable compact chip (required): Chip component representing a selected option.
H. Select and clear all buttons (optional): Button pair allowing users to select or clear all options.
Usage
| Component | When to use | When not to use |
|---|---|---|
| Default multiselect | To present a list of options where the user can select one or multiple. For long lists where all options can’t be viewed at once or require scrolling. If users would benefit from entering text to filter or search the list of options. If space is limited and displaying options in a collapsible menu would help. | If users can only select one option. Use a Combobox instead. For short lists where all options can be viewed without scrolling. Use a Checkbox group instead. To present a list of actions. Use a Dropdown menu instead. |
| Multiselect with select/Clear all buttons | If users might want to select all or most options. | If users won’t likely select all or most options. |
Best practices
- Use checkbox states for multiselect options to ensure they appear visually different when selected and unselected.
- Ensure users can select anywhere within a checkbox or associated option label to choose an option.
- List options in a logical order, either alphabetically or according to the most common or likely selection.
- Ensure multiselect components appear collapsed on page load to save space.
- Follow Checkbox guidance for implementing checkboxes within the menu.
Do Ensure the dropdown menu stays open until users manually close it or remove focus from the field.
Don't Collapse the option menu automatically after the user makes a selection, as this may disorient or frustrate users.
Select/clear all buttons
Multiselect components can optionally include select all/clear all controls. These enable users to easily select or unselect all options.
- Include select/clear all controls in any case where users may want to select all or most options in the menu.
- Use destructive styling for the “clear all” control to prevent accidental clearing.
Chevron direction
The chevron UI icon button enables users to manually expand or collapse the menu. The direction it points should indicate what happens when it’s selected.
Collapsed
The chevron should point down when the menu is collapsed.
- Allow users to expand the menu by selecting anywhere in the input field, not just the chevron icon.
Expanded
The chevron should point up when the menu is expanded.
- Allow users to collapse the menu by removing focus from the field, not just by using the chevron icon.
Empty state
Empty states occur when text in the input field doesn’t match any menu options. This helps guide users with useful feedback about their input.
- Use clear language to inform users that their input doesn’t match any options, as users may misinterpret an empty state for a loading state and wait for options to appear.
Optional vs. required labels
Always ensure required fields are clearly labeled. While this may seem repetitive, it helps users scan for necessary information and reduces errors. There are two methods for labeling required fields based on your use case. Whichever method you select, use it consistently across your experiences.
Note: Previous VPDS guidance recommended only marking optional fields. Our guidance has been updated to reflect current Nielsen Norman Group recommendations. Learn more about optional vs. required labels in Forms.
“Required” in the label (preferred method)
Including “required” within the label ensures it’s easy to find, particularly when instructions at the top might not be visible while scrolling. This method bolsters accessibility for both sighted and non-sighted users.
- Mark all fields that are required. This ensures you’re as explicit and transparent as possible.
- Include “(required)” in field label with a space between the last word and the first parenthesis.
Asterisk in the label (alternative method)
Asterisks are commonly used to indicate required fields. The main advantage to using this method is that it doesn’t take up much space, helps users along a common edge, and can be used in addition to formatting hints in the label.
- Always include a legend or key at the top of the content area noting that the asterisk indicates a required field.
- Place the asterisk at the beginning of the label with a space between the symbol and the first word.
When required is implied
Although it’s usually recommended to label required fields, there are cases where it’s implied that the field is required. This is common when there’s a one or two fields fundamental to completing of a task, like the username and password fields on a login screen. In these cases, marking the fields required isn’t necessary but can add additional clarity.Labeling optional fields
It’s not generally necessary to mark which fields are optional. While doing so can support clarity, it also adds unnecessary visual noise. Whatever you choose, apply the choice consistently to avoid confusion.Behaviors
Input functionality
The multiselect component can be implemented with a search or filter feature that allows users to find their desired option more quickly. Implement whichever method applies best to your use case.
Note: This feature isn’t automatically included in the component build and can be implemented in various ways. Product teams can determine how to load and filter data for their use case and should work closely with developers to determine the appropriate level of complexity for their product.
Menu search
In this method, the text field is used to search the options displayed in the menu. When the user types, the menu jumps so the option that matches their input best appears at the top of the field, and focus is placed on that option.
- Use this method when users may want to browse options that are similar to their input but don’t match exactly.
Menu filter
In this method, the text field is used to filter the options displayed in the menu. When the user types, the options displayed in the menu are temporarily reduced so only those matching the entry remain.
- Use this method when users are likely to know exactly what option they’re looking for.
Selection method
Mulitselect components don’t require users to confirm their choices after selection. As soon as users select a checkbox in the menu, it appears as a chip in the input field.
- Ensure users can select anywhere within a checkbox or associated option label to choose an option.
Scaling and reflow
Scaling and reflow refers to how content behaves as the container size changes, particularly when the container is small and can’t display all content at once. This is common with multiselect, as it’s often used when screenspace is limited.
Labels should always be fully visible when possible. If truncation is necessary, ensure the full-text option is shown in the expanded menu view and only the chip label is truncated. This approach allows screen readers to function as normal and read or render the option label, regardless of truncation, for assistive technology users.
- Scale the input field vertically to fit selection chips until the set maximum height is reached.
- Implement a scrollbar when the maximum height is reached to allow users to access all menu options or selection chips.
Do Allow chips and option labels to reflow with container size to ensure the full labels are visible.
Don't Crop content, as users may not know what they’re selecting if the full label isn’t visible.
Content
- Always use sentence case except for proper nouns or acronyms.
- Use plain language and avoid abbreviations or jargon.
- Reference the Content for additional guidance on crafting content within apps and experiences.
- Avoid using unnecessary articles like “the” or “an”, unless they’re included in the proper name of a product or service.
Labels
- Limit field labels to a maximum of three to five words.
- Be consistent when using plural language or “(s)” in field labels. For example, use “Select card type,” “Select card types,” or “Select card type(s)” consistently. If using “(s)”, use the asterisk method to label required fields instead of “(required)” within parenthesis to keep concise.
- Use parallel structure across field labels, using either nouns like “Services” or verbs like “Select a service”. Learn more about parallel structure in the Grammar and punctuation.
Option labels
- Limit option labels to three words or fewer unless referencing proper nouns, such as product names.
- Avoid using unnecessary articles like “the” or “an,” unless they’re included in the proper name of a product or service.
- Consistently order labels across experiences based on logical sequence, either alphabetically or by importance.
Inline messages
- Use full sentences with proper punctuation.
- Limit descriptions to 80 characters or 20 words including spaces.
- Provide useful information such as why a field is required (if not obvious) without being technical.
- Give an example or specific syntax or values for inputs to help avoid errors.
Inline error message
- Use inline error messages to draw attention and to errors without causing frustration.
- Provide clear, prescriptive guidance on correcting the error. Avoid redirecting users to another page to fix it.
- Communicate whether the problem can occur again and offer an alternative backup solution in case it does.
Platform considerations
Mobile
The multiselect component opens a full-screen menu and spans the full width of the page on mobile screens. For more, visit the mobile flow (internal only).
- Ensure users can exit the fullscreen view by selecting the close button in the top app bar.
- Remove the chevron icon button from the input field when the menu is in full-screen view.
- Keep the full-screen menu open until users manually exit to ensure they’re finished making selections.
