### 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

Example :

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

### With placeholder

Example :

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

### Readonly mode

Example :

    <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`

### Metadata

selector | `select[euiSelect]`
styleUrls | `./eui-select.scss`

template

    <ng-content/>

### Index

###### Methods

- onChange
- syncReadOnlyValue

###### Inputs

- ariaLabel
- isInvalid
- placeholder
- readonly

###### HostListeners

- change

###### Accessors

- isInvalid

### Inputs

ariaLabel
Type : `string`
Default value : `'Select an option'`

isInvalid
Type : `boolean`

placeholder
Type : `string`

readonly
Type : `boolean`

### HostListeners

change
Arguments : `'$any($event.target).value'`
`change(value: unknown)`

### Methods

onChange
`onChange(value: unknown)`
Decorators : `@HostListener('change', ['$any($event.target).value'])`

Parameters :

Name | Type | Optional
value | `unknown` | No

Returns : `void`

syncReadOnlyValue
`syncReadOnlyValue()`
Returns : `void`

### Accessors

isInvalid
get `isInvalid()`
set `isInvalid(state: BooleanInput)`

Parameters :

Name | Type | Optional
state | `BooleanInput` | No

Returns : `void`

# results matching ""

# No results matching ""