# EuiAutocompleteOptionComponent

**Type:** component



Component used internally by `eui-autocomplete` to display individual options in the dropdown panel.
Represents a single selectable item with support for active, disabled, and grouped states.
Automatically rendered by the parent autocomplete component based on autocompleteData.
Supports visual variants through BaseStatesDirective for custom styling.
Not intended for direct use in templates - managed internally by eui-autocomplete.

This component is used internally by eui-autocomplete. Configure options via the parent component:
```html
<eui-autocomplete [autocompleteData]="items"></eui-autocomplete>
```

```ts
items: EuiAutoCompleteItem[] = [
  { id: 1, label: 'Option 1' },
  { id: 2, label: 'Option 2', isDisabled: true },
  { id: 3, label: 'Option 3', variant: 'success' }
];
```

### Accessibility
- Uses role="option" for proper ARIA semantics within listbox
- Active state is visually indicated and announced to screen readers
- Disabled options are not selectable and announced as disabled
- Keyboard navigation automatically highlights active option

### Notes
- isActive indicates the currently focused/highlighted option during keyboard navigation
- isDisabled prevents selection and applies disabled styling
- isGroupItem applies special styling when option is within a group
- Visual variants (euiVariant) can be applied for custom option styling
- Component is automatically instantiated by parent autocomplete


**Selector:** `eui-autocomplete-option`

## Inputs
- **isActive**: `undefined` - Whether the option is active in the panel.
- **isDisabled**: `undefined` - Whether the option is disabled in the panel.
- **isGroupItem**: `undefined` - Whether the option is displayed inside a group.
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]