# EuiAutocompleteComponent

**Type:** component

<p><code>eui-autocomplete</code> component with dropdown suggestions, optional chip display for multiple selections, and comprehensive keyboard navigation.
Provides type-ahead functionality with filtering, grouping, sorting, and async data support.
Implements ControlValueAccessor for Angular forms integration with validation support.
<code>eui-autocomplete</code> supports single or multiple selection modes with chips for visual representation of selected items.
Built on Angular CDK Overlay for positioning and virtual scrolling for performance with large datasets.
<code>eui-autocomplete</code> includes accessibility features with ARIA attributes, live announcer, and keyboard navigation.</p>
<h4>Basic single selection</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-autocomplete [autocompleteData]=&quot;fruits&quot; placeholder=&quot;Select a fruit&quot;&gt;&lt;/eui-autocomplete&gt;</code></pre></div><h4>Multiple selection with chips</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-autocomplete
  [autocompleteData]=&quot;countries&quot;
  [hasChips]=&quot;true&quot;
  [chipsPosition]=&quot;&#39;top&#39;&quot;
  (selectionChange)=&quot;onSelectionChange($event)&quot;&gt;
&lt;/eui-autocomplete&gt;</code></pre></div><h4>With grouping and async data</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-autocomplete
  [autocompleteData]=&quot;cities&quot;
  [groupBy]=&quot;&#39;metadata.continent&#39;&quot;
  [isAsync]=&quot;true&quot;
  [isLoading]=&quot;loading&quot;&gt;
&lt;/eui-autocomplete&gt;</code></pre></div><h4>In reactive form with validation</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-autocomplete
  [autocompleteData]=&quot;options&quot;
  formControlName=&quot;selection&quot;
  [isForceSelection]=&quot;true&quot;&gt;
&lt;/eui-autocomplete&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-ts">fruits: EuiAutoCompleteItem[] = [
  { id: 1, label: &#39;Apple&#39; },
  { id: 2, label: &#39;Banana&#39; },
  { id: 3, label: &#39;Orange&#39; }
];

onSelectionChange(items: EuiAutoCompleteItem[]): void {
  console.log(&#39;Selected:&#39;, items);
}</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Uses ARIA live announcer to announce option navigation for screen readers</li>
<li>Keyboard navigation: Arrow Up/Down to navigate options, Enter to select, Escape to close</li>
<li>Tab key closes panel and optionally adds chip (with isAddOnBlur)</li>
<li>Backspace removes last chip when input is empty (chipsPosition=&#39;inside&#39;)</li>
<li>aria-required attribute automatically set when used with Validators.required</li>
<li>Each option has role=&quot;option&quot; for proper screen reader identification</li>
<li>Panel positioning adjusts automatically to stay within viewport</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Each EuiAutoCompleteItem must have unique <code>id</code> and <code>label</code> properties</li>
<li>Use hasChips for multiple selection mode, omit for single selection</li>
<li>chipsPosition options: &#39;top&#39; (default), &#39;bottom&#39;, &#39;inside&#39; (chips within input)</li>
<li>matching options: &#39;contains&#39; (default) or &#39;startWith&#39; for filtering behavior</li>
<li>Set isForceSelection to require selection from available options only</li>
<li>isFreeValueAllowed (default true) allows custom values not in the list</li>
<li>Virtual scrolling automatically handles large datasets efficiently</li>
<li>groupBy accepts nested property paths (e.g., &#39;metadata.category.name&#39;)</li>
<li>Use isAsync with dynamic data loading, update autocompleteData when ready</li>
<li>Chips can be drag-and-dropped when isChipsDragAndDrop is enabled</li>
<li>Panel width defaults to input width, override with panelWidth property</li>
</ul>


**Selector:** `eui-autocomplete, input[euiAutocomplete]`

**Standalone:** false

## Inputs

- **autocompleteDataSelected**: `EuiAutoCompleteItem[]` - <p>Sets the options that will be selected by default.</p>

- **autocompleteData**: `undefined` - <p>Datas to be used in the autocomplete.</p>

- **chipsLabelTruncateCount**: `undefined` - <p>Whether the chips label length is limited by the value of this option.</p>

- **chipsPosition**: `"top" | "bottom" | "inside"` - <p>In Combination with <code>isItemsSorted</code>. Sets the position of the chips relative to the text input.</p>

- **chipsSortOrder**: `"ASC" | "DESC"` - <p>Sets the sort criteria of the chips.</p>

- **classList**: `string` - <p>Sets a CSS class to be added on the options panel container.</p>

- **groupBy**: `string` - <p>Sets a grouping among the options.</p>

- **hasChips**: `undefined` - <p>Whether autocomplete will display the selected values with chips.</p>

- **inputId**: `undefined` - <p>Sets the id on the text input.</p>

- **isAddOnBlur**: `undefined` - <p>In combination with <code>hasChips</code>. Whether the chip is added when the text input is blurred.</p>

- **isAsync**: `undefined` - <p>Whether autocomplete will get the data asynchronously.</p>

- **isChipsDragAndDrop**: `undefined` - <p>Whether the chips can be drag and dropped.</p>

- **isChipsRemovable**: `undefined` - <p>Whether the chip can be removed from the selection.
When a chip is removed, its value goes back in the panel.</p>

- **isChipsSorted**: `undefined` - <p>Whether this chip is sorted on their label.</p>

- **isDuplicateValueAllowed**: `undefined` - <p>Whether the chips can have multiple times the same value.
With this option, the value is not removed from the panel when choosen.</p>

- **isForceSelection**: `undefined` - <p>In combination with <code>hasChips</code> and <code>isFreeValueAllowed=false</code>. Whether the text input is empty after blurring when no value has been selected in the panel.</p>

- **isFreeValueAllowed**: `undefined` - <p>In combination with <code>hasChips</code>. Whether the user can add a value, which is not part of the options, to craete a chip.</p>

- **isItemsSorted**: `undefined` - <p>Whether this item in the panel is sorted on their label.</p>

- **isLoading**: `undefined` - <p>Whether loading spinner is displayed in text input.</p>

- **isMaxVisibleChipsOpened**: `undefined` - <p>In combination with <code>maxVisibleChipsCount</code>. Whether all chips are shown by default.</p>

- **isReadonly**: `undefined` - <p>Whether autocomplete is in readonly mode.</p>

- **itemsSortOrder**: `"ASC" | "DESC"` - <p>In combination with <code>isChipsSorted</code>. Sets the sort criteria of the options in the panel.</p>

- **matching**: `undefined` - <p>Sets the way the options should be retrieved.</p>

- **maxVisibleChipsCount**: `undefined` - <p>Whether a limited amount, defined by this option, is used to display the chips.</p>

- **panelWidth**: `string | number` - <p>Sets the width of the options panel.</p>

- **placeholder**: `string` - <p>Sets the placeholder of the text input.</p>

- **toggleLinkLessLabel**: `string` - <p>In combination with <code>maxVisibleChipsCount</code>, sets the label of the &#39;less label&#39; button, if not provided an arrow left icon will be displayed only.</p>

- **toggleLinkMoreLabel**: `string` - <p>In combination with <code>maxVisibleChipsCount</code>, sets the label of the &#39;more label&#39; button, if not provided an arrow right icon will be displayed only.</p>

- **visibleOptions**: `undefined` - <p>Sets the maximum number of options that will be visible in the autocomplete panel.</p>


## Outputs

- **chipDragRelease**: `EuiChipDragDrop` - <p>Event emitted when a chip drag is released.</p>

- **chipDragStart**: `EuiChipDragDrop` - <p>Event emitted when a chip drag starts.</p>

- **chipDrop**: `EuiChipDragDrop` - <p>Event emitted when a chip is dropped.</p>

- **clear**: `undefined` - <p>Event emitted when the text input is cleared.</p>

- **inputBlur**: `undefined` - <p>Event emitted when the text input is blurred.</p>

- **inputChange**: `string` - <p>Event emitted when the value of the text input changes.</p>

- **inputFocus**: `undefined` - <p>Event emitted when the text input gets the focus.</p>

- **itemAdd**: `EuiAutoCompleteItem` - <p>Event emitted when an option is selected.</p>

- **itemRemove**: `EuiAutoCompleteItem` - <p>Event emitted when an option is removed.</p>

- **panelClose**: `undefined` - <p>Event emitted when the panel is closed.</p>

- **panelOpen**: `undefined` - <p>Event emitted when the panel is opened.</p>

- **selectionChange**: `EuiAutoCompleteItem[]` - <p>Event emitted when an option is selected or when the selection is modified.</p>

