Dropdown
NewChoose one option with a searchable list, clear selection and keyboard navigation.
Overview
Select a city. Disabled options remain visible but cannot be selected.
HTMLBasic usage
<av-dropdown inputId="city" label="City"
[options]="cities" [(ngModel)]="city" />Filter and clear
Search by label, select a result or clear the current choice.
No selection event yet.
HTMLSearchable selection
<av-dropdown inputId="destination" label="Destination"
[options]="cities" [(ngModel)]="destination" filter showClear
(onSelectedElement)="onCitySelected($event)" />Sizes
Reactive forms
Use Angular validators to require a selection. Reset and disabled state follow the form control.
Disabled and empty
Usage
Import AvDropdown with FormsModule or ReactiveFormsModule. Give each field a unique inputId.
TYPESCRIPTOptions
import { AvDropdown, AvDropdownOption } from 'avero-ui';
const cities: AvDropdownOption<string>[] = [
{ label: 'Warsaw', value: 'warsaw' },
{ label: 'London', value: 'london' },
];Keyboard. Use arrows to navigate, Enter to select, Escape to cancel and Tab to leave. Home and End jump to the first and last enabled option.
Customize. Input CSS variables apply. Use
--av-dropdown-option-selected and --av-dropdown-option-hover for the list.