eui documentation
  1. Components
  2. EuiAutocompleteOptionComponent

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
Inputs
HostBindings
Accessors

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

Computes and returns the CSS classes for the component based on its current state.

Properties

role
Type : string
Default value : 'option'
Decorators :
@HostBinding('attr.role')

ARIA role for the host element to ensure proper accessibility.

Accessors

cssClasses
getcssClasses()

Computes and returns the CSS classes for the component based on its current state.

Returns : string

results matching ""

    No results matching ""