Last Update: Dec 08, 2022
Platform: Web
Designers: Frank Kohler, Nikola Luisa Wenger
Intro
The object name in a combo box can contain further information, such as abbreviations, code names or technical names. The information is usefully added to the object name to better differentiate items with the same name. It makes sense to consider whether the information is written one after the other or whether it makes sense to divide the line of content into two columns to make the line easier to read.
One Column Combo with two titles (not recommended)
Two Column Combo with two titles (recommended)
Usage
- You need to display additional information for the selection options, such as currencies, country abbreviations, or system abbreviations.
- Users can filter both columns simultaneously showing only matching entries.
- Users need to pick one item from a small set of options with up to 12 entries. Consider using the select control instead.
- Users need to pick one item from a large set of options with more than 200 entries. Consider using the input field control with a select dialog or value help dialog instead.
- You need to display more than one attribute. Consider using the input field with select dialog or value help dialog.
- Searching on multiple attributes is required. Consider using the input field with select dialog or value help dialog.
Structure & Components
Header Area (1) with typed content (2) and the control to open the dropdown list (3) of options.
List area (4) with the content of line items (5) can be controlled with arrows keys (up/down) and enter to select the line items. Additional title (6) in the second column, right alinged in the list area.
Behavior & Interaction
There are three ways to select an item from the list:
- Select the item directly from the dropdown list.
- Type the item into the input field.
- Use the up and down arrows to navigate the list.
Responsiveness & Adaptiveness
The width of the option list adapts to its content. The minimum width is the input field plus the dropdown arrow. The maximum width is the part of the screen furthest to the right. If the option list content requires even more width, entries become truncated.
Responsive combo box narrow
Responsive combo box wide
Application-specific examples
Example from Time Management where the two column combo box is already in use via the UI5 framework.
Accessibility
Using the UI5 web component for react as control library, the combo box should follow the requirements of the accessibility standards: https://sap.github.io/ui5-webcomponents-react/?path=/docs/inputs-combobox--default-story
Resources
This chapter largely builds on the Fiori guideline, although it mainly describes SF-specific cases. Please use the following link to find out more about related controls and components: https://experience.sap.com/internal/fiori-design-web/combo-box/#twocolumn-layout