• Overview
@angular/aria/combobox

Combobox

directive

A directive that coordinates a combobox trigger element and its associated popup widget.

API

    
      class Combobox extends DeferredContentAware implements OnInit {}

element

HTMLElement

A reference to the input element.

disabled

InputSignalWithTransform<boolean, unknown>

Whether the combobox is disabled.

softDisabled

InputSignalWithTransform<boolean, unknown>

Whether the combobox is soft disabled (remains focusable).

alwaysExpanded

InputSignalWithTransform<boolean, unknown>

Whether the combobox should always remain expanded.

tabIndex

InputSignalWithTransform<number | undefined, string | number | undefined>

The tabindex of the combobox.

expanded

ModelSignal<boolean>

Whether the combobox is expanded.

value

ModelSignal<string>

The value of the combobox input.

inlineSuggestion

InputSignal<string | undefined>

An inline suggestion to be displayed in the input.

ngOnInit

void
@returnsvoid

contentVisible

WritableSignal<boolean>

preserveContent

ModelSignal<boolean>

Description

A directive that coordinates a combobox trigger element and its associated popup widget.

The ngCombobox directive is applied directly to the interactive trigger element, which can be either an editable <input> (for search/autocomplete behaviors) or a non-editable element like a <div> (for custom select dropdowns). It manages focus and expansion states, coordinates autocomplete suggestions (if editable), and forwards navigation keys down into the active popup.

Example 1: Editable Autocomplete Input 

<input ngCombobox #combobox="ngCombobox" [(value)]="searchQuery" [(expanded)]="isExpanded" />

<ng-template ngComboboxPopup [combobox]="combobox">
  <div ngComboboxWidget #listbox="ngListbox" ngListbox [(value)]="selectedValues" [activeDescendant]="listbox.activeDescendant()">
    <div ngOption value="first">First Option</div>
    <div ngOption value="second">Second Option</div>
  </div>
</ng-template>

Example 2: Non-Editable Custom Select Dropdown 

<div ngCombobox #combobox="ngCombobox" [(expanded)]="isExpanded" class="select-trigger">
  {{selectedValue}}
</div>

<ng-template ngComboboxPopup [combobox]="combobox">
  <div ngComboboxWidget #listbox="ngListbox" ngListbox [(value)]="selectedValues" [activeDescendant]="listbox.activeDescendant()">
    <div ngOption value="first">First Option</div>
    <div ngOption value="second">Second Option</div>
  </div>
</ng-template>
Jump to details