Combobox
An autocomplete input and command menu hybrid for selection and filtering.
Default (Single Selection)
The standard combobox with an input field.
Selected: none
combobox-example-default.ts
Multiple Selection (Chips)
Allows selecting multiple items which are displayed as removable chips.
Selected: Angular, React
combobox-example-multiple.ts
Popup (Trigger Button)
Use a button as a trigger to open the combobox content in a popover.
combobox-example-trigger.ts
With Groups & Add-ons
Group related items and add prefix icons to the input.
combobox-example-group.ts
Async Search
Load options from an external data source with loading states.
combobox-example-async.ts
Installation & Usage
Installation
Imports
Basic Skeleton
API Reference
Brain API
The functional logic and state management for the combobox.
| Directive | Selector | Inputs / Outputs |
|---|---|---|
| BrnCombobox | [brnCombobox] |
|
| BrnComboboxInput | [brnComboboxInput] | Handles search filtering and accessibility. |
| BrnComboboxItem | [brnComboboxItem] |
|
Helm API
Styling components for the combobox suite.
| Component / Directive | Selector | Description |
|---|---|---|
| HlmCombobox | hlm-combobox | Main container for single selection. |
| HlmComboboxMultiple | hlm-combobox-multiple | Container for multiple selection. |
| HlmComboboxInput | hlm-combobox-input | The search input component. |
| HlmComboboxChips | hlm-combobox-chips | Wrapper for the list of selected items (multiple mode). |
| HlmComboboxContent | hlm-combobox-content | The floating dropdown container. |