# EuiAutocompleteOptionGroupComponent

**Type:** component



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:
```html
<eui-autocomplete
  [autocompleteData]="countries"
  [groupBy]="'metadata.continent'">
</eui-autocomplete>
```

```ts
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


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

## Inputs
- **label**: `string` - Text label displayed as the group header. Identifies the category or section name for the grouped options. Required for proper group identification.