packages/eui/packages/components/eui-icon-toggle/eui-icon-toggle.component.ts
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.
AfterContentInit
OnChanges
changeDetection | ChangeDetectionStrategy.OnPush |
selector | eui-icon-toggle |
imports |
EUI_ICON
|
styleUrls | ./eui-icon-toggle.scss |
templateUrl | ./eui-icon-toggle.component.html |
Properties |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
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. |
toggle |
Type : EventEmitter<boolean>
|
Event emitted when the toggle state changes. Emits the new state (true = checked, false = unchecked). |
attr.role |
Type : string
|
Default value : 'switch'
|
class |
Type : string
|
click |
click()
|
Host listener that handles click events on the component. Triggers the toggle action if the component is not read-only. |
role |
Type : string
|
Default value : 'switch'
|
Decorators :
@HostBinding('attr.role')
|
cssClasses |
getcssClasses()
|