Combo Box

A Combo Box is an advanced component resulting from the association of a select, an input field and a list of clickable elements like chip and checkbox.

General guidelines

This component should be used to reduce cognitive workload when there is a need to display a large list of items.



Best practices

Use the combobox to reduce cognitive workload.


Don’t put too many elements to show in a classic list of selectable elements.


Display the incremental chip if too many elements are selected.


Don’t hide options to the user.

Visual guidelines


Combo Box has 4 main states: default (collapse), hover, active (open), disable.

Responsive behaviours
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top