File

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

Description

Option group component for organizing eui-autocomplete options into labeled sections. Used internally by eui-autocomplete when groupBy property is configured on the parent. Provides semantic grouping with ARIA optgroup role for accessibility. Automatically renders group headers based on the groupBy property path. Content is projected via ng-content to contain individual eui-autocomplete-option components. Not intended for direct use in templates - managed internally by eui-autocomplete.

This component is used internally when groupBy is configured on eui-autocomplete:

<eui-autocomplete
  [autocompleteData]="countries"
  [groupBy]="'metadata.continent'">
</eui-autocomplete>

countries: EuiAutoCompleteItem[] = [
  { id: 1, label: 'China', metadata: { continent: 'Asia' } },
  { id: 2, label: 'Japan', metadata: { continent: 'Asia' } },
  { id: 3, label: 'France', metadata: { continent: 'Europe' } },
  { id: 4, label: 'Germany', metadata: { continent: 'Europe' } }
];
// Results in two groups: "Asia" and "Europe"

Accessibility

• Uses role="optgroup" for proper ARIA semantics
• Group label is announced by screen readers before grouped options
• Provides clear visual and semantic separation between option categories
• Keyboard navigation flows naturally through grouped options

Notes

• Automatically created by parent autocomplete when groupBy is set
• groupBy supports nested property paths using dot notation
• Groups are sorted alphabetically by default
• Empty groups are automatically filtered out
• Group labels are extracted from the data structure, not manually specified
• Component is automatically instantiated by parent autocomplete

<ng-content/>