eui documentation
  1. Components
  2. EuiSlideToggleComponent

File

packages/components/eui-slide-toggle/eui-slide-toggle.component.ts

Description

Slide toggle component used to represent a boolean state. It can be used as a standalone toggle or integrated with Angular Reactive Forms. Supports icons for ON/OFF states and visual variants via EUI base state directives.

Basic Usage

Example :
<!-- Simple toggle -->
<eui-slide-toggle [(isChecked)]="enabled" />

<!-- With icons -->
<eui-slide-toggle
  [iconSvgNameOn]="'check'"
  [iconSvgNameOff]="'close'"
  [(isChecked)]="enabled" />

<!-- Reactive forms -->
<form [formGroup]="form">
  <eui-slide-toggle formControlName="notifications" />
</form>

Accessibility

  • Provide meaningful aria-label describing the toggle's purpose
  • Toggle is keyboard accessible (Space/Enter to toggle)
  • Disabled state is properly communicated to screen readers

Notes

  • Supports semantic color variants (euiPrimary, euiSuccess, euiDanger, etc.)
  • Size variants (euiSizeS, euiSizeM, euiSizeL, euiSizeXL) control toggle dimensions
  • Icons are optional and can be customized for ON/OFF states

Implements

ControlValueAccessor

Metadata

changeDetection ChangeDetectionStrategy.OnPush
HostDirectives BaseStatesDirective
 Inputs : euiPrimary euiSecondary euiInfo euiWarning euiSuccess euiDanger euiVariant euiSizeS euiSizeM euiSizeL euiSizeXL euiSizeVariant 
selector eui-slide-toggle
imports ReactiveFormsModule EUI_ICON
templateUrl ./eui-slide-toggle.component.html
styleUrl ./eui-slide-toggle.scss

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Constructor

constructor()

Inputs

ariaLabel
Type : string
Default value : 'eUI slide toggle'

attribute attached to the aria-label of the input field
disabled
Type : boolean

Whether the toggle is disabled
iconSvgFillColorOff
Type : string
Default value : 'secondary'

Fill color for the OFF state icon
iconSvgFillColorOn
Type : string
Default value : 'secondary'

Fill color for the ON state icon
iconSvgNameOff
Type : string

Name of the icon to display when toggle is OFF
iconSvgNameOn
Type : string

Name of the icon to display when toggle is ON
id
Type : string
Default value : `eui-slide-toggle-${uniqueId()}`

Unique identifier for the toggle
isChecked
Type : boolean
Default value : false

Current checked state of the toggle

Outputs

slideToggleChange
Type : EventEmitter

Event emitted when toggle state changes

HostBindings

class
Type : string

CSS classes applied to the host element

Methods

Public onFocusOut
onFocusOut()

Handles focus out event Notifies form control of touch event

Returns : void
Public registerOnChange
registerOnChange(fn: any)

Implements ControlValueAccessor Registers change handler

Parameters :
Name Type Optional
fn any No
Returns : void
Public registerOnTouched
registerOnTouched(fn: any)

Implements ControlValueAccessor Registers touch handler

Parameters :
Name Type Optional
fn any No
Returns : void
Public setDisabledState
setDisabledState(isDisabled: boolean)

Implements ControlValueAccessor Updates the toggle's disabled state

Parameters :
Name Type Optional
isDisabled boolean No
Returns : void
Public toggle
toggle()

Toggles the current state if not disabled Emits the new state and notifies form control

Returns : void
Public writeValue
writeValue(value: boolean)

Implements ControlValueAccessor Updates the toggle's checked state

Parameters :
Name Type Optional
value boolean No
Returns : void

Properties

Public checkboxControl
Type : unknown
Default value : new FormControl()

Form control for the toggle when used in reactive forms

Accessors

cssClasses
getcssClasses()

CSS classes applied to the host element

Returns : string
disabled
getdisabled()
setdisabled(value: boolean)

Whether the toggle is disabled

Parameters :
Name Type Optional
value boolean No
Returns : void

results matching ""

    No results matching ""