Components · Combobox

Combobox

Editable selection field with filterable popup options.

Anatomy

1 .combobox-root Combobox state and composition boundary.
2 .combobox-label Accessible control label.
3 .combobox-chips Row of selected values in a multi-select combobox. Holds `chip-root` children.
4 .combobox-control Input, trigger, and clear-action container.
5 .combobox-input Editable query/value.
6 .combobox-trigger Opens or closes the popup.
7 .combobox-clear-trigger Clears the current query or value.
8 .combobox-positioner Anchored popup positioning layer.
9 .combobox-content Popup listbox surface. Matches the trigger width unless the consumer sets the Etesie extension --et-menu-min-inline-size.
10 .combobox-list Option list inside the popup; carries the listbox role when non-composite.
11 .combobox-item-group Semantic option group.
12 .combobox-item-group-label Label for a group of options.
13 .combobox-item One selectable option.
14 .combobox-item-text Primary option label.
15 .combobox-item-indicator Selected option marker.
16 .combobox-empty Message shown when the query matches no options.

What the component can hold. Every other combination — emphasis, size, shape — is a configuration; pick those in Use.

Framework

Single

Frameworks

Svelte

Multi-select

Framework

Grouping

Use a combobox when people benefit from filtering a long option list or entering a value while they search.