# EuiIconToggleComponent

**Type:** component

<p>Component that provides a toggleable icon button with accessibility support.
Functions as a switch control that can be toggled between on/off states,
displaying different icons based on the current state.</p>
<p>This component handles keyboard navigation, focus management, and proper
ARIA attributes for accessibility compliance.</p>
<h3>Basic toggle</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">isFavorite = false;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-icon-toggle
  [(isChecked)]=&quot;isFavorite&quot;
  iconSvgNameOn=&quot;star-filled&quot;
  iconSvgNameOff=&quot;star-outline&quot;
  ariaLabel=&quot;Toggle favorite&quot;
  (toggle)=&quot;onToggle($event)&quot;&gt;
&lt;/eui-icon-toggle&gt;</code></pre></div><h3>With custom colors</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-icon-toggle
  [isChecked]=&quot;enabled&quot;
  iconSvgNameOn=&quot;visibility&quot;
  iconSvgNameOff=&quot;visibility-off&quot;
  iconSvgFillColorOn=&quot;success&quot;
  iconSvgFillColorOff=&quot;neutral&quot;
  ariaLabel=&quot;Toggle visibility&quot;&gt;
&lt;/eui-icon-toggle&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Implements ARIA switch role with aria-checked state</li>
<li>Keyboard accessible via Tab, Enter, and Space keys</li>
<li>Provides keyboard shortcut via accesskey attribute</li>
<li>Screen readers announce state changes</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use distinct icons for on/off states for clarity</li>
<li>Set <code>isReadOnly</code> to prevent interaction while maintaining visual state</li>
<li>Default colors: accent (on), neutral (off)</li>
<li>Emits toggle event with boolean state on change</li>
</ul>


**Selector:** `eui-icon-toggle`

**Standalone:** false

## Inputs

- **ariaLabel**: `string` - <p>Accessible label for screen readers.</p>

- **e2eAttr**: `string` - <p>Data attribute for e2e testing.</p>

- **iconSvgFillColorOff**: `string` - <p>Color of the icon when toggle is in the OFF state.</p>

- **iconSvgFillColorOn**: `string` - <p>Color of the icon when toggle is in the ON state.</p>

- **iconSvgNameOff**: `string` - <p>Icon to display when toggle is in the OFF state.</p>

- **iconSvgNameOn**: `string` - <p>Icon to display when toggle is in the ON state.</p>

- **iconSvgSize**: `string` - <p>Size of the icon (s, m, l, xl).</p>

- **id**: `string` - <p>Unique identifier for the component.</p>

- **isChecked**: `boolean` - <p>Whether the toggle is in the checked/on state.
Bound to aria-checked attribute for accessibility.</p>

- **isReadOnly**: `boolean` - <p>Whether the toggle is read-only (cannot be interacted with).
When true, tabindex is set to -1 and clicking will not change state.</p>

- **keyboardAccessKey**: `string` - <p>Keyboard shortcut key.</p>

- **tabindex**: `string` - <p>Tab order value for keyboard navigation.</p>


## Outputs

- **toggle**: `EventEmitter<boolean>` - <p>Event emitted when the toggle state changes.
Emits the new state (true = checked, false = unchecked).</p>

