Combobox

A combobox displays an input box combined with the option list.

A combobox displays an input box combined with the option list enabling the users to select items from the list or type a new value of their choice.

The users can navigate through the options using the arrow keys and then press ‘Enter/Return’ to select the value.

Note: By default the combobox shows an option list as the input is in focus and filters out the options as the user starts typing.

Just like the inputs, combobox also comes in 3 sizes - small, regular and large.

Different sizes of combobox

The input has following states - default, hover, focus, typing, error and disabled.

States of input box

The items in the option list come in following states - default, hover, active and selected. Users can also use the up/down arrow key on their keyboard to traverse the options.

States of option items

Note: It is recommended to align the width of the popover with the width of the trigger input to maintain a visually pleasing appearance.

The popover is by default collapsed when the combobox is in its default state.

The popover can be opened when:

• The user clicks on the input.

• The user starts typing in the input.

• The input is in focus and the user hits down arrow key.

Examples with different triggers

Single input combobox allows users to input or select only one value.

Multiple input combobox allows users to input or select multiple values as chips.

The users can hit ‘Enter/Return’ to add the input value or the focused item as an input chip.

Note: The selected option gets removed form the options list.

If the text exceeds the available space, it will be truncated and can be seen in a tooltip upon hovering.

Overflowed Option Item

The combobox can be used for cases where there is a need to display either the top or the recent searches.

Note: In such instances, the Combobox may also include an optional section heading to convey the intent or purpose of the presented options.

Example for Top and recent searches with an optional section heading

An option in a combobox can be any combination of text, checkbox, icon, badge, etc. Such type of options are referred as custom options.

Note: A combobox can also have options that follow different option templates e.g. few options can just be text while the others can be a combination of text and badge.

Examples with custom options in combobox

In combobox, apart from the options, users can freely input their values without any obstruction, but with select they are encouraged to exercise caution and be mindful when adding options.

Combobox vs Select