### File

`packages/components/eui-icon-toggle/eui-icon-toggle.component.ts`

### Description

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

Example :

    isFavorite = false;

Example :

    <eui-icon-toggle
      [(isChecked)]="isFavorite"
      iconSvgNameOn="star-filled"
      iconSvgNameOff="star-outline"
      ariaLabel="Toggle favorite"
      (toggle)="onToggle($event)">
    </eui-icon-toggle>

### With custom colors

Example :

    <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

### Implements

`AfterContentInit` `OnChanges`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `eui-icon-toggle`
imports | `EUI_ICON`
styleUrls | `./eui-icon-toggle.scss`
templateUrl | `./eui-icon-toggle.component.html`

### Index

###### Properties
role
###### Inputs
ariaLabel e2eAttr iconSvgFillColorOff iconSvgFillColorOn iconSvgNameOff iconSvgNameOn iconSvgSize id isChecked isReadOnly keyboardAccessKey tabindex
###### Outputs
toggle
###### HostBindings
attr.role class
###### HostListeners
click keydown
###### Accessors
cssClasses

### Inputs

ariaLabel
Type : `string`
Default value : `'Toggle icon'`
Accessible label for screen readers.

e2eAttr
Type : `string`
Default value : `'eui-icon-toggle'`
Data attribute for e2e testing.

iconSvgFillColorOff
Type : `string`
Default value : `'neutral'`
Color of the icon when toggle is in the OFF state.

iconSvgFillColorOn
Type : `string`
Default value : `'accent'`
Color of the icon when toggle is in the ON state.

iconSvgNameOff
Type : `string`
Icon to display when toggle is in the OFF state.

iconSvgNameOn
Type : `string`
Icon to display when toggle is in the ON state.

iconSvgSize
Type : `string`
Default value : `'m'`
Size of the icon (s, m, l, xl).

id
Type : `string`
Default value : ``eui-icon-toggle-${uniqueId()}``
Unique identifier for the component.

isChecked
Type : `boolean`
Default value : `false`
Whether the toggle is in the checked/on state. Bound to aria-checked attribute for accessibility.

isReadOnly
Type : `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
Type : `string`
Default value : `'i'`
Keyboard shortcut key.

tabindex
Type : `string`
Default value : `'0'`
Tab order value for keyboard navigation.

### Outputs

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

### HostBindings

attr.role
Type : `string`
Default value : `'switch'`

class
Type : `string`

### HostListeners

click
`click()`
Host listener that handles click events on the component. Triggers the toggle action if the component is not read-only.

keydown
Arguments : `'$event'`
`keydown(event: KeyboardEvent)`
Host listener that handles keyboard events. Triggers the toggle action on Enter or Space key press. Parameters :
Name | Optional | Description
event | No | The keyboard event

### Properties

role
Type : `string`
Default value : `'switch'`
Decorators : `@HostBinding('attr.role')`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""