File

packages/eui/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

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