# 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.

### Basic toggle
```typescript
isFavorite = false;
```
```html
<eui-icon-toggle
  [(isChecked)]="isFavorite"
  iconSvgNameOn="star-filled"
  iconSvgNameOff="star-outline"
  ariaLabel="Toggle favorite"
  (toggle)="onToggle($event)">
</eui-icon-toggle>
```

### With custom colors
```html
<eui-icon-toggle
  [isChecked]="enabled"
  iconSvgNameOn="visibility"
  iconSvgNameOff="visibility-off"
  iconSvgFillColorOn="success"
  iconSvgFillColorOff="neutral"
  ariaLabel="Toggle visibility">
</eui-icon-toggle>
```

### Accessibility
- Implements ARIA switch role with aria-checked state
- Keyboard accessible via Tab, Enter, and Space keys
- Provides keyboard shortcut via accesskey attribute
- Screen readers announce state changes

### Notes
- Use distinct icons for on/off states for clarity
- Set `isReadOnly` to prevent interaction while maintaining visual state
- Default colors: accent (on), neutral (off)
- Emits toggle event with boolean state on change


**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).