Jump to section
SelectMultiple
SelectMultiple is a dropdown component that enables the user to quickly scan the list of options and choose more than one of the options.
The SelectMultiple component is typically used as a form element but can also be leveraged for user experiences that include searching or narrowing down data. It contains an optional search field. When within a form, the SelectMultiple will support labels, error and disabled states.
When to use
When multiple selections can be made in a list that contains 5 or more items.
When not to use
- For lists that offer less than 5 options, consider using a CheckBoxGroup instead.
- When only a single selection is permitted, use the Select component instead.
Anatomy
3 of 10 selected
Select up to 6
1
2
3
4
5
6
- Select: Displays current input value and control to open/close options drop.
- Selection Summary: Succinct presentation of what a user can do, has done, and/or reset to default state.
- Search (optional): Helps narrow down or quickly find options corresponding to the entered keyword.
- Help Text (optional)
- List: Available options from which the user can choose
- List Item: Clearly displays available option and its selected state.
Sizing and scrolling
- Depending on the length of the dropdown list, the height of the SelectMultiple can be increased or decreased as needed with the
dropHeight
prop. - For lists with more than 10 items, consider setting a max height to ensure optimum readability and scannability of list items.
- It is recommended to show approximately 10-15 items before enabling a scroll. Showing more than that will potentially increase the cognitive load on the user.
Best practices
- Always use a label unless there is something else (such as preceding body text or headers) that makes that SelectMultiple’s purpose perfectly clear.
- Ordering of lists - chronological/recency
- Search: Consider including a search if your list is 10 items or longer to make it easier to browse options.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.