File

packages/components/eui-select/eui-select.component.ts

Description

Select field that allows users to choose one value from a list of options. eui-select integrates with Angular forms and supports dynamic options, object values (ngValue), readonly synchronization, and deterministic option rendering through EUI control value accessors. It is designed to work with native <select> / <option> semantics while ensuring correct behavior with EUI styling, validation, and form state handling.

Basic usage

<select euiSelect [(ngModel)]="selectedValue">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

With placeholder

<select euiSelect placeholder="Select an option" [formControl]="control">
  <option *ngFor="let item of items" [value]="item.id">{{item.name}}</option>
</select>

Readonly mode

<select euiSelect [readonly]="true" [(ngModel)]="value">
  <option value="approved">Approved</option>
</select>

Accessibility

• Use aria-label to provide context for screen readers
• Invalid state is automatically applied from form validation
• Readonly mode creates accessible text input showing selected value
• Native select semantics ensure keyboard navigation works as expected

Notes

• Placeholder appears as first option when no value selected
• Readonly mode hides select and displays value in text input
• Validation state syncs automatically with Angular forms
• Use with euiOption directive for enhanced option handling

Implements

OnChanges OnInit DoCheck

<ng-content/>