### 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
Public checkboxControl
###### Methods
Public onFocusOut Public registerOnChange Public registerOnTouched Public setDisabledState Public toggle Public writeValue
###### Inputs
ariaLabel disabled iconSvgFillColorOff iconSvgFillColorOn iconSvgNameOff iconSvgNameOn id isChecked
###### Outputs
slideToggleChange
###### HostBindings
class
###### Accessors
cssClasses disabled

### 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
get `cssClasses()`
CSS classes applied to the host element Returns : `string`

disabled
get `disabled()`
set `disabled(value: boolean)`
Whether the toggle is disabled Parameters :
Name | Type | Optional
value | `boolean` | No
Returns : `void`

# results matching ""

# No results matching ""