# EuiSelectComponent

**Type:** component



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
```html
<select euiSelect [(ngModel)]="selectedValue">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>
```

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

### Readonly mode
```html
<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


**Selector:** `select[euiSelect]`

## Inputs
- **ariaLabel**: `string` - 
- **isInvalid**: `boolean` - 
- **placeholder**: `string` - 
- **readonly**: `boolean` -