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

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