# EuiSlideToggleComponent

**Type:** component



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
```html
<!-- 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


**Selector:** `eui-slide-toggle`

## Inputs
- **ariaLabel**: `string` - attribute attached to the aria-label of the input field
- **disabled**: `boolean` - Whether the toggle is disabled
- **iconSvgFillColorOff**: `string` - Fill color for the OFF state icon
- **iconSvgFillColorOn**: `string` - Fill color for the ON state icon
- **iconSvgNameOff**: `string` - Name of the icon to display when toggle is OFF
- **iconSvgNameOn**: `string` - Name of the icon to display when toggle is ON
- **id**: `string` - Unique identifier for the toggle
- **isChecked**: `boolean` - Current checked state of the toggle
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeM**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeXL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

## Outputs
- **slideToggleChange**: `EventEmitter` - Event emitted when toggle state changes