Combo Box

The combo box allows users to select one value/option from a predefined list. It’s also possible to type in a value or custom value and filter the predefined selection list (if the application allows it).

Input Field

The input field allows users to enter and edit text or numeric values in one line. To help the user enter a valid value, you can enable the autocomplete suggestion feature or provide a selection dialog.

The selection dialog opens when the user clicks the input field icon.

Select

The select control (also known as a dropdown) is commonly used to select a value/option from a predefined list.

Multi-Combo Box

Use the multi-combo box if users need to select multiple values/options from a predefined list. The values/options in the list have checkboxes that support multi-selection. Users can also type in a value to filter the list (if the application allows it).

Multi-Input Field

A multi-input field allows users to enter more than one value/option which are are displayed as tokens. You can enable the suggestions feature or provide a selection dialog to help users enter a valid value/option.

There are three selection dialogs: the select dialog, the table select dialog, and the value help dialog. These dialogs enable users to pick one or several values or options from a long list. Selection dialogs are useful when users need more than one data point to identify the “right” value/option, or when they want to search the list to find a particular value/option.

The selection dialogs are always used in combination with one of the following controls:

• Input field for selecting one value/option
• Multi-input field for selecting more than one value/option

Users can open the respective selection dialog from within these controls.

Example

The user wants to pick a certain product. However, because the product names are very similar, it’s difficult to identify the right one. Additional product attributes in the selection dialog, such as an image and the product release date, help the user to pick the correct option.

Select Dialog

The select dialog enables users to select one or more values/options from a comprehensive list. The select dialog comes with a list of entries containing a few attributes. It also provides a search field to filter the list.

Table Select Dialog

The table select dialog enables users to select one or more values/options from a comprehensive table. Usually, the table displays multiple attributes or other related information for an item. Making this additional information available for an entry helps users identify the correct value/option.

The table select dialog reuses the responsive table. It also provides a search field to filter the list.

Value Help Dialog

The value help dialog enables users to find and select single and multiple values/options. It also allows users to define conditions and multiple ranges.