Intro

The select component lets users choose an item from a small, predefined list.

Select component with input field showing the selected item, and a dropdown list with four items.

Select component

When to Use

2
do
false

Use the select component if:

  • Users need to choose one item exclusively from a short list.
  • Users don't need to see all options at once, and it's fine for the list to stay hidden until they open it.
dont
false

Don’t use the select component if:

  • Users need to choose between only two options. Use a switch instead.
  • Users need to pick one item from a very large set. Use a combobox instead.
  • You need to display more than one attribute or allow searching on multiple attributes. In this case, use an input component with a select dialog or value help.
  • You need to display all available options right away, without any user interaction. Use radio buttons instead.

Anatomy

Select

  1. Input field: Displays the selected value.
  2. Dropdown button: Expands and collapses the dropdown list.
  3. Selection list: Contains the values users can choose from.

Labeled anatomy of a select component with numbers marking the input field, dropdown button, and dropdown list.

Anatomy of the select component

  1. Value/Text: Shows the value of the item or the name of the group.

Dropdown list item with a number indicating the location of the value.

Anatomy of the dropdown list item

guideline
Although it's technically possible to include icons, we don't recommend it. If your use case requires icons, make sure you choose icons that match their intended meaning and follow established metaphors.

Types

The select component doesn't offer multiple types. Only the items in the dropdown list can have different types. You can also combine different dropdown list item variants.

Simple Layout

In the simple layout, the dropdown list shows only the value for each item.

Select component displaying a simple dropdown with one column and four items, one of which is selected.

Selection list with simple layout

guideline
If the texts for the select options are very long and contain more than one piece of information, consider using a two-column layout.

Group Header

You can include group headers in dropdown lists to help users scan and understand the options more easily. Group headers are non-interactive; users can't select them as values.

Keep in mind that the select component is designed for small lists of items.

Dropdown list with one column, showing two groups of items, each with a group header and multiple entries.

Item as group header

Two-Column Layout

A two-column layout lets you show two values for every selectable item. Each dropdown list item has two columns, and you can adjust their width ratio.

The text in the input field depends on the state of the select component:

A. Enabled state: Only the content of the first column appears in the input field. Users see the second value when they open the dropdown.

B. Read-only state: Both values are displayed in the input field, separated by an en dash. If text is truncated, desktop users can access the full text using a tooltip.

C. Disabled state: Only the content of the first column is shown.

Select component with two-column layout in three states: edit state (dropdown open, one item selected), read-only, and disabled.

Item with two-column layout

guideline
  • Keep texts concise and avoid complex content, so you don't overload the component.
  • Place the more common or more relevant value in the first column.

Alternative Separator

If the default en dash separator used in the input field in read-only mode is ambiguous or unclear, you can use a vertical line or bullet separator instead.

A. Bullet separator

B. Vertical line separator

For example, if column values include characters that could be mistaken for separators, choosing a different separator can help distinguish between columns.

Two read-only input fields showing column values separated by a bullet in one example and a vertical line in the other.

Read-only input field with alternative separators

Behavior and Interaction

If the select component is editable, users can select an item by clicking the dropdown button and choosing an item from the list.

The component can start with no item selected or with a default value already set, which means one item in the dropdown list appears selected.

Three-step interaction: 1) Option list with four values and empty input field, mouse hovers over a value; 2) Press state for item selection; 3) Selected value appears in the input field.

Interaction flow when no item is initially selected

Three-step interaction: 1) Option list with four values and input field showing a selected value, which is highlighted in the list; mouse hovers over a different value; 2) Press state for selecting the new item; 3) Input field updates to show the newly selected value.

Interaction flow starting with a selected item

Responsive Behavior

The input field uses truncation and doesn't wrap text. Users can see the full text by opening the dropdown list or, in read-only mode, by using the tooltip on desktop devices. Items in the dropdown list use either wrapping or truncation.

Option list with three options in edit mode; the selected option has a very long text that is truncated in the input field.

Truncation and wrapping in edit mode

guideline
Use simple and short text. This helps keep the select component clear and easy to use, and prevents a cluttered or overwhelming experience for users.

Width of the Dropdown List

The dropdown uses the same minimum width as the field. It expands to fit the text until it reaches the maximum width you have set. After that, text either truncates or wraps, depending on your settings.

Select component with dropdown list wider than the input field; input field shows truncated text, but full text is visible for each item in the dropdown.

Example: Wider dropdown list with the full texts

Components

Implementation

  • Select
    (UI5 Web Components documentation)

Specifications

Components

Implementation

  • Select
    (UI5 Web Components documentation)