### File

`packages/components/eui-autocomplete/eui-autocomplete-option/eui-autocomplete-option.component.ts`

### Description

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:

Example :

    <eui-autocomplete [autocompleteData]="items"></eui-autocomplete>

Example :

    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

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
HostDirectives | `BaseStatesDirective` Inputs : euiVariant
selector | `eui-autocomplete-option`

template

    <ng-content/>

### Index

###### Properties

- role

###### Inputs

- isActive
- isDisabled
- isGroupItem

###### HostBindings

- attr.role
- class

###### Accessors

- cssClasses

### Inputs

isActive
Default value : `false, { transform: booleanAttribute }`
Whether the option is active in the panel.

isDisabled
Default value : `false, { transform: booleanAttribute }`
Whether the option is disabled in the panel.

isGroupItem
Default value : `false, { transform: booleanAttribute }`
Whether the option is displayed inside a group.

### HostBindings

attr.role
Type : `string`
Default value : `'option'`
ARIA role for the host element to ensure proper accessibility.

class
Type : `string`

### Properties

role
Type : `string`
Default value : `'option'`
Decorators : `@HostBinding('attr.role')`
ARIA role for the host element to ensure proper accessibility.

### Accessors

cssClasses
get `cssClasses()`
Computes and returns the CSS classes for the component based on its current state. Returns : `string`

# results matching ""

# No results matching ""