Molecules

Combo Box

A Combo box is a combination of a drop-down list and a single-line editable textbox, allowing the user to either type a value directly or select a value from the list.

Properties

• Comboboxes are elements that are mainly used as cell-input elements.
• One of the characteristics of a combo box acts as a select element - it allows users to select an option from a pre-defined list of options.
• Furthermore, it allows a direct input from users - users can type in a value directly into the input field.

How to display content with Comboboxes

Here are some tips how to display content inside this UI element in the most effective way:

Add a label
Communicate to your users what they are selecting.

Avoid very long dropdowns
Long dropdown lists force your users to scroll, which can be very annoying. Fewer options will make your combobox more manageable and comprehensive.

Avoid too few options
While having too many options is not ideal, having too few can also impair the UX.

Consider the context
Combobox selections are ideally used if the users don't know the option straight away.

See also

• Select Element
• Dialog
• Extended Header
• Form

• Previous
  Analytical Panel
• Next
  Filter