HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Guidance
When to use Select
Selecting multiple options
Accessibility
Variants
Select with search
Validation
Disabled
Components

Select

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

Guidance

Select is a flexible input element able to serve a wide variety of use cases. Though flexible, asking "is Select the best tool in this circumstance?" is a healthy exercise. Variants of Select, such as Select with Search, or alternatives like RadioButtonGroup, MaskedInput, or TextInput with suggestions may be more appropriate for crafting an elegant user experience.

When to use Select

Because Select is flexible and familiar, the following questions are helpful to consider alternatives and/or confirm that Select is the most appropriate element:

  • Is there a need to conserve screen space? Select may be appropriate.
  • Ensuring collection of standardized values? Select may be appropriate.
  • Are there less than five options? Consider a CheckBoxGroup or RadioButtonGroup as they may be more efficient for users. Select can hide information and requires extra clicks/taps for users to access that information.
  • Are there a large number of options? Lengthy scrolling can be problematic for users. Consider Select with Search or TextInput with suggestions.
  • Is the select for a State/Province in the context of collecting an address? Consider only asking for ZIP/Postal Code and automatically determining City, State, Country, etc. without user input.
  • Are the values in list well known and understood, such as Year? Consider TextInput with suggestions or MaskedInput.

Selecting multiple options

If multiple selections are permitted and there are more than 5 options, use SelectMultiple. Otherwise, consider using CheckBoxGroup.

Accessibility

Using Select as a form field is preferred for user experience. When Select is used in conjunction with FormField, users receive clear indication for the contents and purpose of the input. Additionally, this use promotes best practices in accessibility by ensuring user inputs are accompanied by labels used by assistive technologies.

Variants

The Select input is flexible and may be extended to allow for multi-select, search, and create options.

Select with search

Allow users to quickly find their desired option by incorporating Search within the Select component.

Select with search is especially useful when presenting lengthy options lists such as when selecting from countries or regions. TextInput with suggestions and MaskedInput are also worth considering in circumstances where values are well known.

Type to filter the location options

Validation

Validation styling calls visual attention to the Select input with an error and should be accompanied by text instructing the user how to resolve. A "required" input error is the most common with Select since the available options are typically pre-defined.

Select a value from the list to resolve this error.

Disabled

Indicates that the Select input exists but cannot be interacted with until a precondition is met.

Set the disabled state for the Select input above.

Related

Related content you may find useful when using Select.

HPE Forms Preview

Forms

Common form use cases from application configuration to payment acceptance.

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.

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