Updated: December 19, 2016

SAPUI5 Version 1.26

Multi-Combo Box

sap.m.MultiComboBox

Intro

The multi-combo box control is commonly used to enable users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to open the list of available options. The select options in the list have checkboxes that permit multiselection.

Usage

Use the multi-combo box if:

The user needs to select one or more options from a long list of options (maximum of approximately 200).
The values of the option list contain secondary information that does not need to be displayed right away.

Do not use the multi-combo box if:

The user needs to choose between two options, such as ON or OFF and YES or NO. In this case, consider using a switch control instead.
You need to display more than one attribute. In this case, consider using the select dialog or value help dialog instead.
The user needs to search on multiple attributes. In this case, consider using the select dialog or value help dialog instead.
Your use case requires all available options to be displayed right away, without any user interaction. In this case, consider using checkboxes instead.

Responsiveness

The multi-combo box is optimized for keyboard and mouse interaction. On touch devices, not all functions are available yet (for example, filtering the list with more than one character).

Size S

Form with multi-combo box - Size S

Option list in full screen

Size M

Form with multi-combo box

Size L

Filter bar with multi-combo box

Components

Input Field

The input field (1) can display a placeholder text (7) when it is empty, or a token (6) if a value is selected.

Dropdown Trigger

The dropdown button (2) collapses and expands the dropdown list.

Option List

The option list (3) contains a list of selectable options (4). Clicking the label of an entry closes the option list and creates a token of the selected option. Every entry is accompanied by a checkbox (5) to allow multiselection. Clicking a checkbox creates a token. The option list remains open.

Components of the multi-combo box

Behavior and Interaction

Selecting a Value

There are three ways to select an item from the list:

Tick the checkbox (option list remains open).
Click or tap the label of a select option (option list is closed).
Use the keyboard (spacebar or Enter).

The user clicks or taps the input field to place the cursor in the field (1). Clicking the arrow displays the list (2). As the user types into the input field, the list is filtered accordingly (3). The up and down arrows move the focus within the list (4). Selected options are automatically entered into the input field as tokens (5).

Input Field

Any character in the input field acts as a filter for the option list. The input field only allows users to type text that matches the items in the list. If a user tries to enter character combinations that are not in the option list, a visual feedback is provided to indicate that the combination of characters is invalid, while the input field suppresses the characters entered.

Behavior on sizes M and L

Choose from Option List

The option list displays all the available items that the user can choose from. Clicking the arrow opens the option list below the field. If there is not enough space to display the dropdown list below the field, it is displayed above the field instead.

Behavior for Mobile Devices

The control is still not optimized for use on mobile devices. The following sections describe how the multi-combo box interacts on mobile devices.

Tapping the arrow

Tapping the arrow opens the list on full screen (1). In this state, the input field is disabled (2), no tokens are available, and only direct selection is possible in the list (3).

Left: form with multi-combo box. Right: full-screen multi-combo box selection.

Multiple selected items

Not all the selected tokens can be displayed at the same time because the space is limited to the size of the input field (9). Swiping to the side scrolls horizontally to reveal a cropped token (10).

Swiping to display tokens

Styles

These are the styles of the multi-combo box and their respective states:

Unselected

Unselected predefined placeholder

Unselected on hover

In focus

Warning

Error

Expanded

Expanded selection

Expanded multiselection

Selected items shown as tokens

Hover highlighting in list

Guidelines

Label

The multi-combo box control can be displayed with or without a label. If the field is attached to another field, you do not need to define a second label. For more information about labels in SAP Fiori, see the label guidelines.

Placeholder

Do not use the placeholder attribute as an alternative to a label. This is important because the placeholder text is overwritten as soon as the form is filled out. Labels are necessary to indicate the meaning of the form fields when the placeholders are no longer visible. Show a placeholder only if the user needs a hint on data entry. Do not repeat the content of the label. A hint could be a sample value or a brief description of the expected format. For more information about how to use the placeholder, see input field.

Option List

Keep the label of an entry in the select option list as short as possible because the list uses single lines only. Values that are too long may be truncated. If you need to indicate that none of the selection options are selected, show a blank input field. Define a default selection whenever possible. The multi-combo box cannot display columns. If you want to show two values in the option list, show the leading information first, followed by the secondary information in parentheses, such as Walldorf (Germany). Typing into the input field shows all items that start with the search text.

Sorting

The option list contains all available items that the user can choose from. Choose one of the following styles depending on how you want the content to be arranged:

Logical: Sort items into a meaningful order. Group related options together and show the most common options first, followed by less common options.

Logical multi-combo box

Alphabetical: Sort currencies, names, and so on into alphabetical order. We recommend this for lists with more than eight items.

Alphabetical multi-combo box

Numeric: Sort numeric values into a sequential order, with the lowest number first.

Numeric multi-combo box

Chronological: Sort time–related information into chronological order, with the most recent first (if applicable).

Chonological multi-combo box

Width

You can adjust the width of the option list to some extent. The multi-combo box control is usually used in forms, where the width is determined by the form element or container in which it is embedded. Therefore, we do not recommend defining a fixed width, but rather working with proper layout containers such as the form, simple form, or responsive grid layout, and with the layout data property, where the width is defined. If you need to restrict the width to a defined value, set the width accordingly. Keep in mind that there is no horizontal scrolling in the option list. Entries that are too long are truncated and users will not be able to read them.

Information

If localized text is not an issue, such as with currency codes, use a smaller width.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Combo Box (guidelines)
Select (guidelines)
Input Field (guidelines)
Form (guidelines)
Radio Button (guidelines)
Checkbox (guidelines)
Toolbar (guidelines)
Switch (guidelines)

Implementation

Multi-Combo Box (SAPUI5 samples)
Multi-Combo Box (SAPUI5 API reference)