Select for Angular

import { AuiSelect } from '@absoluteui/angular/select';

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

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

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { AuiSelect } from '@absoluteui/angular/select';

@Component({
  selector: 'app-shipping',
  imports: [ReactiveFormsModule, AuiSelect],
  template: `<aui-select label="Country" [options]="countries" [required]="true" [formControl]="country"></aui-select>`,
})
export class ShippingComponent {
  readonly countries = [
    { value: 'in', label: 'India' },
    { value: 'gb', label: 'United Kingdom' },
  ];
  readonly country = new FormControl<string | null>(null, { validators: [Validators.required] });
}

`<aui-select>`

Class AuiSelect; template reference #ref="auiSelect".

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 (via aria-labelledby).
`hideLabel`	`boolean`	`false`	Visually hide the label; it remains the accessible name.
`options`	`readonly SelectOption[]`		Required. { value, label, disabled?, description? } with unique string values (flat list).
`name`	`string`		Form field name for the hidden input.
`placeholder`	`string`		Shown while nothing is selected. Default: localized “Select an option”.
`description`	`string`		Help text referenced by aria-describedby.
`required`	`boolean`	`false`	No selection is invalid; sets aria-required and shows the required indicator.
`disabled`	`boolean`	`false`	aria-disabled, removed from the tab order, not submitted.
`readOnly`	`boolean`	`false`	Focusable and submitted; the listbox does not open.
`validate`	`(value: string \| null) => string \| null`		Consumer validation; return a message to mark the value invalid.
`icons`	`Partial<SelectIcons>`		Icon slot overrides.
`renderOption`	`(option: SelectOption, context: SelectRenderContext) => Node`		Custom option content (since 0.9.0); the label stays the accessible name. Nodes are released with releaseNode when dropped.
`renderValue`	`(option: SelectOption, context: SelectRenderContext) => Node`		Custom content for the selected value (since 0.9.0); the label stays the announced value.
`validationTiming`	`ValidationTiming`	`'blur'`	When validation messages first appear; afterwards they update live.
`locale`	`string`	`'en-US'`	Placeholder and message locale.
`direction`	`"ltr" \| "rtl"`	`'ltr'`	Listbox alignment direction (applied when the listbox opens).

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)`	`SelectChangeDetail`	User selected a different option. Re-emits `aui-change`.
`(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; the selected (or first enabled) option becomes active.
`close(): void`	Hide the listbox without changing the value.
`reportValidity(): boolean \| undefined`	Show messages now and return validity.
`setCustomError(message: string \| null): void`	External error (server, cross-field rule); cleared when the user selects a new value.
`getFormValue(): string \| null \| undefined`	Value for form serialization.
`focus(): void`	Focus the combobox.
`reset(): void`	Close, restore the initial value, and clear dirty/touched/submitted state.

Templates

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

Test harness

AuiSelectHarness from @absoluteui/angular/testing. <aui-select>. The listbox renders inside the host.