HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
When to use
When not to use
Anatomy
Sizing and scrolling
Best practices
Components

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 selected
3 of 10 selected
Select up to 6
1
2
3
4
5
6
Diagram illustrating the various elements composing SelectMultiple.
  1. Select: Displays current input value and control to open/close options drop.
  2. Selection Summary: Succinct presentation of what a user can do, has done, and/or reset to default state.
  3. Search (optional): Helps narrow down or quickly find options corresponding to the entered keyword.
  4. Help Text (optional)
  5. List: Available options from which the user can choose
  6. 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.

Related

Related content you may find useful when using SelectMultiple.

HPE Forms Preview

Forms

Common form use cases from application configuration to payment acceptance.

CheckBoxGroup

CheckBoxGroup is a component that presents related checkbox options.

Menu

Menu is a component that contains a list of actions. When a user clicks an item in the menu, the menu closes and the action is executed.

RadioButtonGroup

RadioButtonGroup is a component that offers related options to a user, but only allows them to choose one.

CheckBox

CheckBox is a square design element that when clicked accepts the choice offered.

Select

Select is a flexible input field that allows users to choose from a list of options.

TextInput

TextInput is a field used in forms to capture short entries.

MaskedInput

MaskedInput allows you to specify formatted text within a form field.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page