Multi Select for Angular

import { AuiMultiSelect } from '@absoluteui/angular/multi-select';

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

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

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import type { MultiSelectOption } from '@absoluteui/components/multi-select';
import { AuiMultiSelect } from '@absoluteui/angular/multi-select';

@Component({
  selector: 'app-skills',
  imports: [ReactiveFormsModule, AuiMultiSelect],
  template: `<aui-multi-select label="Skills" [options]="skills" [selectAll]="true" [maxSelected]="5" [formControl]="chosen"></aui-multi-select>`,
})
export class SkillsComponent {
  readonly skills: MultiSelectOption[] = [
    { value: 'ts', label: 'TypeScript' },
    { value: 'sql', label: 'SQL' },
  ];
  readonly chosen = new FormControl<string[]>([], { nonNullable: true, validators: [Validators.required] });
}

<aui-multi-select>

Class AuiMultiSelect; template reference #ref="auiMultiSelect".

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

Angular forms: implements ControlValueAccessor and Validator; the form value is string[]. 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 MultiSelectOption[]		Required. { value, label, disabled?, description? } with unique values.
name	string		Form field name: one hidden input per selected value.
placeholder	string		Input placeholder while nothing is selected (never replaces the label).
description	string		Help text referenced by aria-describedby.
required	boolean	false	At least one value; value-missing after touch or reportValidity().
disabled	boolean	false	Disables the input, toggle, and chip remove buttons.
readOnly	boolean	false	Shows the value; the list does not open and chips have no remove buttons.
invalid	boolean	false	Consumer-managed invalid state (shown immediately).
errorMessage	string		Message shown when invalid is true (text only).
maxSelected	number		Most values that can be selected (integer >= 1); unselected options become unavailable once reached, and reaching it is announced.
selectAll	boolean	false	A “Select all” option that toggles every enabled option shown (up to maxSelected).
filter	MultiSelectFilter	'contains'	Diacritic- and case-insensitive filtering of options while typing.
closeOnSelect	boolean	false	Close the list after each toggle.
openOnFocus	boolean	false	Open the list when the input gains focus or is clicked.
locale	string	'en-US'	Messages and filtering locale.
direction	"ltr" | "rtl"	'ltr'	Popup alignment.
renderOption	(option: MultiSelectOption, context: MultiSelectRenderContext) => Node		Custom option content; the label stays the accessible name. Nodes are released with releaseNode when dropped.
loadOptions	(query: string, context: MultiSelectLoadContext) => Promise<readonly MultiSelectOption[]>		Load options for the typed text instead of filtering options; debounced, aborted by a newer query or closing; loading and errors are shown and announced.
loadDelay	number	'250'	Milliseconds between the last keystroke and loadOptions (0 to 5000).
icons	Partial<MultiSelectIcons>		Icon slot overrides.

Two-way bindings

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

Outputs

Output	Payload	Description
(changed)	MultiSelectChangeDetail	The user changed the selection (option, Select all, chip remove, or Backspace). Re-emits aui-change.
(valueInput)	{ query: string }	The user edited the input text. Re-emits aui-input.
(opened)	null	The listbox opened. Re-emits aui-open.
(closed)	null	The 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.
focus(): void	Focus the input.
getFormValue(): string[] | undefined	The selected values.
reportValidity(): boolean | undefined	Show messages now and return validity.
setCustomError(message: string | null): void	External error; null clears it.
reset(): void	Restore the initial value and clear touched/submitted state (no aui-change).

Templates

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

Test harness

AuiMultiSelectHarness from @absoluteui/angular/testing. <aui-multi-select>: typing, toggling options, selected chips.