Intro

The select component, sometimes called a dropdown, lets users pick an item from a small, predefined list.

The select control can be placed in toolbars, such as chart toolbars, footer toolbars, or header toolbars, as well as in forms or tables.

Select component

When to Use

false

Use the select component if:

Users need to choose only one item from a short list, typically between 2 and 12 items.
Users don't need to see all options at once, and it's fine for the list to stay hidden until they open it.
It's helpful for users to start with a default selection, especially if one option is used most often.
Users would benefit from a logically grouped list, with the most common items shown first and the others sorted alphabetically, numerically, or by topic.
Users need to select from a predefined list of options instead of entering free-form text.

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 combo box instead.
You need to display more than one attribute or allow searching on multiple attributes. In this case, use an input field with a select dialog or value help dialog.
You need to display all available options right away, without any user interaction. Use radio buttons or a radio button group instead.

For more information on which selection control to choose, see the selection control overview.

Don’t overload the select component. Keep texts concise and avoid complex content.
Whenever possible, define a default selection.
Sort the values in the selection list in a meaningful order.
If you need a “not selected” option, use an appropriate text and not a blank value.
Avoid using icons in the selection list. If you do, make sure they match the text.
Avoid using a fixed width and don’t allow the width to auto-adjust based on the selection.
If using a two-column layout, place the most relevant value in the first column.
Avoid disabling selection options.

Anatomy

Value/Text: The selected value.
Input field: Displays the selected option.
Dropdown button: Expands and collapses the dropdown list.
Selection list: Contains the values users can choose from.

Anatomy of the select component

Types

Layout Options

Simple Layout

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

Selection list with simple layout

Two-Column Layout

Use the two-column layout if you need to display additional information for each option, such as currencies or abbreviations. You can adjust the width ratio of the columns.

Enabled

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

Two-column layout in edit mode

Read-Only

Both values are displayed in the input field, separated by an en dash.

Two-column layout in read-only mode

If the standard en dash separator isn’t suitable for your use case, you can use a vertical line or bullet separator instead.

Read-only input field with alternative separators

Disabled

Only the content of the first column is shown.

Disabled select component with a two-column layout

guideline

When using a two-column layout, place the more common or more relevant value in the first column.

Select with Icons

The selection list can include text-only values or text with an icon. For more information about adding icons to list items, see Standard List Item.

Select with an icon

guideline

While it's technically possible to include icons, we advise against it unless they enhance recognition or understanding.

If your use case requires icons:

Ensure that the icons match their intended meaning and follow established metaphors.
Set icons via the icon property.
Keep the accompanying text concise.

States

Component and Interaction States

Component states and interaction states define how the select control appears and behaves in response to user actions or its current condition.

A. Hover: Highlights the control when the cursor is placed over it.

B. Active: Indicates the control is focused or interacted with (clicked).

C. Read only: Shows that the control is visible but cannot be modified.

D. Disabled: Grays out the control, making it unavailable for any user interaction.

Select states

Value States

You can use semantic colors to visualize value states for the selected item. This helps users quickly spot error, warning, confirmation, or information messages.

Select components using semantic colors for information, success, critical, and error value states

A. Information: Offers neutral or helpful context, without implying success or error.

B. Positive: Confirms a valid or successful selection.

C. Critical: Highlights a warning or a value that may need review.

D. Negative: Marks an error or invalid value that users need to correct.

Note that the positive or success value state doesn't show a message when focused.

For more information, see Using Semantic and Industry-Specific Colors.

Behavior and Interaction

Initial Display

The input field displays the current selection. If no previous selection has been made and no default option is specified, the first option is automatically selected.

guideline

Whenever possible, define a default selection.

Selection

When the user clicks the input field, the dropdown opens. Once an option is chosen, the list closes, and the selected option appears in the field. If there’s only an icon instead of a select input field, clicking the icon opens the dropdown. The currently selected item is always highlighted in the list to help the user see what's selected.

Select component – choosing a different item from the dropdown list

Guidelines

Selection List

Disabling Selection Options

Avoid disabling options, since users may not know how to re-enable them. Instead, hide options that aren’t available.

No Selection

Offer a “not selected” option when there’s no initial selection or when users can clear a selection. Show this option in parentheses and place it at the start of the list.

Recommended texts:

(Not Selected)
(No Values Selected)

For more examples, see the UI text guidelines.

Don’t use a blank value to show that nothing is selected. If your use case needs a blank input field, use a combo box.

Selection list with “(Not Selected)” option

No Selection – Sort/Filter/Group

When you use an icon to open options for sorting, grouping, or filtering a set of items, use the texts below for the “not selected” option. Place this option in parentheses at the start of the list.

(Not Sorted)
Note: In most cases, this option isn’t necessary. Show the default sort settings instead.
(Not Filtered)
(Not Grouped)

Selection list with “(Not Filtered)” option

Sorting

The sorted selection list contains all items available to the user. Choose one of the following styles to order the content:

Logical: Sort items in a meaningful order. Group related options together and show the most common options first, followed by less common options. If you have more than eight select options, sort them alphabetically.
Alphabetical: Sort currencies, names, and similar content alphabetically.
Numeric: Sort numeric values in ascending order, starting with the lowest number.
Chronological: Sort time related information with the most recent item first.

Example of logical sorting

Example of alphabetical sorting

Example of numeric sorting

Example of chronological sorting

Label

You can display the select component with or without a label. If the field is attached to another field, you don’t need to define a second label.

Unit of Measurement

You can use the form layout options to add the unit of measurement (UoM) after the select component. Use the label-field ratio to display the UoM after the field. Make sure the UoM is clearly visible and doesn’t wrap to the next row.

hint

[internal_only]Check out this code snippet to see how you could add the unit of measurement.[/internal_only]

For accessibility, you can use "ariaDescribedBy" from the input component.

Responsiveness

Appearance

The display of the select component depends on the device:

Opening the select on a smartphone brings up the option list in full screen mode. The full screen mode can be closed using the icon on the top right corner.
On desktop and tablet devices, the select appears as a popover. If there isn’t enough space to show the selection list below the field, it opens above the field.

Title for Size S

You need to set a title for the full screen mode. We recommend the following format:

Single Selection

Select [Entity]

Example: Select Product

Multi Selection

Select [Entities]

Example: Select Products

Select option list in full screen - Size S

Width

The select control is usually used in forms, where the width is determined by the form element or container in which the select control is embedded.

If you need to limit the width to a specific value, you can set the width accordingly.

guideline

We do not recommend defining a fixed width. Where possible, use layout containers (such as a form, simple form, or responsive grid layout), and define the width via the layout data property.

Don't allow the control to auto-adjust based on the selection.

If the text length is fixed and doesn’t require localization (for example, currency codes), consider reducing the width.

Width of the Selection List

The width of the selection list automatically adjusts to fit the longest item, with a maximum width of 600px.

Maximum width of the selection list

Text Wrap in the Selection List

The selection list doesn’t support horizontal scrolling. By default, entries that exceed the maximum width of 600px for the dropdown are truncated.

If you expect the dropdown to contain longer entries, we recommend wrapping items in the selection list to enable users to read the full text (property: wrapItemsText). If wrapping is enabled, the text can wrap to multiple lines.