eui documentation
  1. Components
  2. EuiIconToggleComponent

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
Inputs
Outputs
HostBindings
HostListeners
Accessors

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
getcssClasses()

results matching ""

    No results matching ""