# EuiToggleGroupItemComponent

**Type:** component



Individual toggle item component within eui-toggle-group for segmented control interfaces.
Represents a single selectable option in a group of mutually exclusive or multi-select choices.
Manages checked state and emits selection events for parent toggle group coordination.
Provides button-based interaction with consistent styling and accessibility.
Must be used as a direct child of eui-toggle-group to participate in group selection behavior.

### Basic Usage
```html
<!-- Within toggle group -->
<eui-toggle-group>
  <eui-toggle-group-item id="option1" [isChecked]="true">
    Option 1
  </eui-toggle-group-item>
  <eui-toggle-group-item id="option2">
    Option 2
  </eui-toggle-group-item>
</eui-toggle-group>
```

### Accessibility
- Button element provides native keyboard support
- Clear, descriptive text content is essential
- Checked state is visually distinct

### Notes
- Must be direct child of eui-toggle-group
- Requires unique id for state management
- Selection behavior controlled by parent toggle group


**Selector:** `eui-toggle-group-item`

## Inputs
- **id**: `string` - Unique identifier for the toggle item. Used for tracking selection state and programmatic item management.
- **isChecked**: `boolean` - Controls the checked state of the toggle item. When true, applies checked styling and indicates selection. Managed by parent toggle group for single-select mode or individually for multi-select.

## Outputs
- **itemClick**: `EventEmitter<EuiToggleGroupItemComponent>` - Emitted when the toggle item is clicked. Payload: reference to the clicked EuiToggleGroupItemComponent instance. Allows parent toggle group to coordinate selection state across items.