Abyss component

Combo box

The combo box component allows users to select an item or multiple items from a large list of options, it behaves similarly to a select or menu component but with the addition of a free text input to filter pre-defined options. The most common use case for the combo box is as a form element where a user would hit a button to submit their selection(s) or to perform an action, but can also be used as a pre-defined filterable menu where clicking on an item would navigate them to a new page, similar to a scoped search function. The combo box is built utilizing the select input and select input multi components from Abyss.

When to use

When there are more than 10 options in a list
For presenting a long list of options when screen real estate is limited

When not to use

When the number of options in a list is less than 10 items use a select or menu instead

Anatomy

Label: a label should always be included to provide context and can be placed above or to the left of the combo box
Input field: where the user can type to filter the pre-defined options in the listbox or where the value they’ve selected shows, interacting with the input field should automatically open the listbox to show the pre-defined options available to select
Dropdown button: an alternative way for the user to open the listbox without having to type in the input field and the user is able to see all pre-defined options within the listbox
Listbox: or menu is where the user can see the available pre-defined options to select, and can be single or multi select

Demos & variations

Combo box as a form element

Single select

Submit

Multi select

View live example for error and success handling on the ACA agent contract request form.

Submit

Combo box used to perform an action

Only available as single select combo box.

See my plans

Combo box as a menu