# EuiSelectComponent

**Type:** component

<p>Select field that allows users to choose one value from a list of options.
<code>eui-select</code> integrates with Angular forms and supports dynamic options, object values (<code>ngValue</code>), readonly synchronization, and deterministic option rendering through EUI control value accessors.
It is designed to work with native <code>&lt;select&gt;</code> / <code>&lt;option&gt;</code> semantics while ensuring correct behavior with EUI styling, validation, and form state handling.</p>
<h3>Basic usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;select euiSelect [(ngModel)]=&quot;selectedValue&quot;&gt;
  &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
  &lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt;
&lt;/select&gt;</code></pre></div><h3>With placeholder</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;select euiSelect placeholder=&quot;Select an option&quot; [formControl]=&quot;control&quot;&gt;
  &lt;option *ngFor=&quot;let item of items&quot; [value]=&quot;item.id&quot;&gt;{{item.name}}&lt;/option&gt;
&lt;/select&gt;</code></pre></div><h3>Readonly mode</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;select euiSelect [readonly]=&quot;true&quot; [(ngModel)]=&quot;value&quot;&gt;
  &lt;option value=&quot;approved&quot;&gt;Approved&lt;/option&gt;
&lt;/select&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use aria-label to provide context for screen readers</li>
<li>Invalid state is automatically applied from form validation</li>
<li>Readonly mode creates accessible text input showing selected value</li>
<li>Native select semantics ensure keyboard navigation works as expected</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Placeholder appears as first option when no value selected</li>
<li>Readonly mode hides select and displays value in text input</li>
<li>Validation state syncs automatically with Angular forms</li>
<li>Use with <code>euiOption</code> directive for enhanced option handling</li>
</ul>


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

**Standalone:** false

## Inputs

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