Combobox for Angular

import { AuiCombobox } from '@absoluteui/angular/combobox';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Combobox page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { combobox: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import type { ComboboxOption } from '@absoluteui/components/combobox';
import { AuiCombobox } from '@absoluteui/angular/combobox';

@Component({
  selector: 'app-assign',
  imports: [ReactiveFormsModule, AuiCombobox],
  template: `<aui-combobox label="Assignee" placeholder="Search people" [options]="people" [required]="true" [formControl]="assignee"></aui-combobox>`,
})
export class AssignComponent {
  readonly people: ComboboxOption[] = [
    { value: 'ada', label: 'Ada Lovelace' },
    { value: 'alan', label: 'Alan Turing' },
  ];
  readonly assignee = new FormControl<string | null>(null, { validators: [Validators.required] });
}

<aui-combobox>

Class AuiCombobox; template reference #ref="auiCombobox".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Angular forms: implements ControlValueAccessor and Validator; the form value is string \| null. Bind [formControl], formControlName, or [(ngModel)]; validation messages of the component report through the aui error key. See Forms.

Inputs

Input	Type	Default	Description
label	string		Required. Visible label and accessible name.
options	readonly ComboboxOption[]		Required. { value, label, disabled?, description? } with unique values.
name	string		Form field name for the hidden input.
placeholder	string		Input placeholder (supplementary; never replaces the label).
description	string		Help text referenced by aria-describedby.
required	boolean	false	Sets required and aria-required.
disabled	boolean	false	Disables the input and toggle.
readOnly	boolean	false	Prevents opening and editing.
invalid	boolean	false	Sets aria-invalid and shows errorMessage.
errorMessage	string		Validation message shown when invalid.
icons	Partial<ComboboxIcons>		Icon slot overrides.
renderOption	(option: ComboboxOption, context: ComboboxRenderContext) => Node		Custom option content (since 0.9.0); the label stays the accessible name. Nodes are released with releaseNode when dropped.
loadOptions	(query: string, context: ComboboxLoadContext) => Promise<readonly ComboboxOption[]>		Load options for the typed text instead of filtering options (since 0.9.0); debounced, stale requests aborted, loading and errors announced.
loadDelay	number	'250'	Milliseconds between the last keystroke and loadOptions (0-5000).
filter	ComboboxFilter	'contains'	Filtering strategy.
openOnFocus	boolean	false	Open the listbox on focus/click.
clearOnEscape	boolean	true	Escape with a closed listbox clears the value.
locale	string	'en-US'	Messages and filtering locale.
direction	"ltr" | "rtl"	'ltr'	Popup alignment direction.

Two-way bindings

Model	Type	Change output	Description
[(value)]	string | null	(valueChange)	The value: [(value)] without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
(changed)	ComboboxChangeDetail	User changed the selection. Re-emits aui-change.
(valueInput)	{ query: string }	User edited the input text. Re-emits aui-input.
(opened)	null	Listbox opened. Re-emits aui-open.
(closed)	null	Listbox closed. Re-emits aui-close.

Read-only state

Property	Type	Description
isOpen	Signal<boolean>	Whether the listbox is shown.

Methods

Call them through a viewChild query or a template reference.

Method	Description
open(): void	Show the listbox.
close(): void	Hide the listbox.
reportValidity(): boolean | undefined	Show messages now and return validity.
setCustomError(message: string | null): void	External error (server, cross-field rule); cleared when the user changes the value.
focus(): void	Focus the control.
reset(): void	Restore the initial value and clear touched/submitted state (no aui-change).
getFormValue(): string | null | undefined	Selected value for form serialization.

Templates

Customize rendering with AuiItem from @absoluteui/angular/templates.

Test harness

AuiComboboxHarness from @absoluteui/angular/testing. <aui-combobox>: typing, options (static or loaded), choosing.