### File

`packages/components/eui-toggle-group/eui-toggle-group-item.component.ts`

### Description

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

Example :

    <!-- 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

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `eui-toggle-group-item`

template

    <button (click)="buttonClick()"><ng-content/></button>

styleUrl | `./eui-toggle-group-item.component.scss`

### Index

###### Inputs

- id
- isChecked

###### Outputs

- itemClick

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

id
Type : `string`
Unique identifier for the toggle item. Used for tracking selection state and programmatic item management.

isChecked
Type : `boolean`
Default value : `false`
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
Type : `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.

### HostBindings

class
Type : `string`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""