# EuiToggleGroupItemComponent

**Type:** component

<p>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.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- Within toggle group --&gt;
&lt;eui-toggle-group&gt;
  &lt;eui-toggle-group-item id=&quot;option1&quot; [isChecked]=&quot;true&quot;&gt;
    Option 1
  &lt;/eui-toggle-group-item&gt;
  &lt;eui-toggle-group-item id=&quot;option2&quot;&gt;
    Option 2
  &lt;/eui-toggle-group-item&gt;
&lt;/eui-toggle-group&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Button element provides native keyboard support</li>
<li>Clear, descriptive text content is essential</li>
<li>Checked state is visually distinct</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be direct child of eui-toggle-group</li>
<li>Requires unique id for state management</li>
<li>Selection behavior controlled by parent toggle group</li>
</ul>


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

**Standalone:** false

## Inputs

- **id**: `string` - <p>Unique identifier for the toggle item.
Used for tracking selection state and programmatic item management.</p>

- **isChecked**: `boolean` - <p>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.</p>


## Outputs

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

