Chips Combobox are creators and managers of chip components. They allow user search of existing chip options, additions, and removals of chips. The search/selection follows the pattern of the combobox pattern.

Empty Chips Combobox

This is the simplest type of implementation with an empty chips combobox component usually encountered on initial information entry.

NOTE : For empty Chips Combobox implementations, to avoid layout issues, make sure .chips-combobox__items does NOT have any whitespace.

Fluid Chips Combobox

Adding the modifier, .chips-combobox--fluid makes the component fluid and expands it to the width of its container.

Prefilled Chips Combobox

This is the chips combobox with pre-populated chip items, something you'd see when editing a chips combobox component.

Chips Combobox in Disabled State

When disabled, Chips Combobox becomes "frozen" and users are unable to interact with the module - search for, add, and remove chips.

To turn on this state, add aria-disabled="true" to the outer element of the module. Additonally, you'll need to add the disabled attribute to all the buttons inside as well as the input element for combobox.

Chips Combobox in Error State

When a user enters text that is considered to be invalid, the Chips Combobox module can enter an error state. Developers can validate the text entry and trigger invalid/valid states as needed.

To turn on the error state, add a class of chips-combobox--error to the outer element of the module. To turn off the error state, remove the class.

In addition to the inclusion of the modifier to turn on the error state, there should also be an accompanying error message relevant to the reason for the error. Per a11y rules, color alone should not be used to indicate an error. For more information, please see the field error state docs .