Intro

The select component enables users to select an item from a predefined list.

Basic select component

When to Use

Do

Use the select component:

  • If users need to select only one item from a short list of options.
  • If the values in the option list are of secondary importance and do not need to be displayed right away.

Don't

Don’t use the select component :

  • If users need to choose between only two options. Use a switch instead.
  • You need to offer a very large set of options. In this case, use a combo box
  • You need to display more than one attribute or search on multiple attributes. In this case, use an input field with a select dialog / value help.
  • All available options need to be displayed right away. In this case, use radio buttons.

Anatomy

  1. Input field: Displays the selected value.
  2. Value/Text: The content that is selected.
  3. Dropdown button: Expands and collapses the option list.
  4. Option list: Contains the selectable values.

Anatomy of the select component

Anatomy of the select component

Types

Two-Column Layout

Use the two-column layout if you need to display additional information for each option, such as currencies or abbreviations.

Select with a two-column layout

Adjustable Width

The width of the option list adapts to its content.

Select with adjustable width

Basic Select with Icons

You can display an icon for each option.

https://www.sap.com/design-system/live-examples/Select/Select_LE_Icons.html

Select with icons

Behavior and Interaction

If the select component is editable, the user can select an item by first clicking on the dropdown button and then choosing a specific option from the list.

Responsive Behavior

On mobile phones, the option list is displayed as a full screen dialog.

Components

Implementation

  • Select
    (UI5 Web Components documentation)

Specifications

Components

Implementation

  • Select
    (UI5 Web Components documentation)