# EuiIconToggleComponent

**Type:** component



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.

This component handles keyboard navigation, focus management, and proper
ARIA attributes for accessibility compliance.


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

## Inputs
- **ariaLabel**: `string` - Accessible label for screen readers.
- **e2eAttr**: `string` - Data attribute for e2e testing.
- **iconSvgFillColorOff**: `string` - Color of the icon when toggle is in the OFF state.
- **iconSvgFillColorOn**: `string` - Color of the icon when toggle is in the ON state.
- **iconSvgNameOff**: `string` - Icon to display when toggle is in the OFF state.
- **iconSvgNameOn**: `string` - Icon to display when toggle is in the ON state.
- **iconSvgSize**: `string` - Size of the icon (s, m, l, xl).
- **id**: `string` - Unique identifier for the component.
- **isChecked**: `boolean` - Whether the toggle is in the checked/on state. Bound to aria-checked attribute for accessibility.
- **isReadOnly**: `boolean` - Whether the toggle is read-only (cannot be interacted with). When true, tabindex is set to -1 and clicking will not change state.
- **keyboardAccessKey**: `string` - Keyboard shortcut key.
- **tabindex**: `string` - Tab order value for keyboard navigation.

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