Combobox

An autocomplete input and command menu hybrid for selection and filtering.

Default (Single Selection)

The standard combobox with an input field.

Selected: none

Multiple Selection (Chips)

Allows selecting multiple items which are displayed as removable chips.

AngularReact

Selected: Angular, React

Popup (Trigger Button)

Use a button as a trigger to open the combobox content in a popover.

With Groups & Add-ons

Group related items and add prefix icons to the input.

Async Search

Load options from an external data source with loading states.

Installation & Usage

Installation

Imports

Basic Skeleton

API Reference

Brain API

The functional logic and state management for the combobox.

DirectiveSelectorInputs / Outputs
BrnCombobox[brnCombobox]
  • value: T
  • search: string
  • multiple: boolean
  • disabled: boolean
BrnComboboxInput[brnComboboxInput]Handles search filtering and accessibility.
BrnComboboxItem[brnComboboxItem]
  • value: T
  • disabled: boolean

Helm API

Styling components for the combobox suite.

Component / DirectiveSelectorDescription
HlmComboboxhlm-comboboxMain container for single selection.
HlmComboboxMultiplehlm-combobox-multipleContainer for multiple selection.
HlmComboboxInputhlm-combobox-inputThe search input component.
HlmComboboxChipshlm-combobox-chipsWrapper for the list of selected items (multiple mode).
HlmComboboxContenthlm-combobox-contentThe floating dropdown container.