A combobox combines a text field and a dropdown list, allowing users to filter options by typing instead of scrolling. Use a Combobox when the list is long or dynamic and the user benefits from searching or filtering options by typing.
Anatomy
|
Part |
Description |
|---|---|
|
Trigger |
Button showing current value + chevron icon |
|
Search input |
Text field inside the dropdown for filtering |
|
Dropdown panel |
Popover container for filtered results |
|
Option row |
Text + optional leading icon (avatar, star) + optional badge |
|
Group header (optional) |
Section label (e.g. "Pinned", "Apps", "Assigned", "Member") |
|
Empty state |
Message shown when no results match the query |
|
Helper text (optional) |
A short description below the search input to clarify the dropdown's purpose. Use only when the label alone isn't enough. |