# EuiSlideToggleComponent

**Type:** component

<p>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.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- Simple toggle --&gt;
&lt;eui-slide-toggle [(isChecked)]=&quot;enabled&quot; /&gt;

&lt;!-- With icons --&gt;
&lt;eui-slide-toggle
  [iconSvgNameOn]=&quot;&#39;check&#39;&quot;
  [iconSvgNameOff]=&quot;&#39;close&#39;&quot;
  [(isChecked)]=&quot;enabled&quot; /&gt;

&lt;!-- Reactive forms --&gt;
&lt;form [formGroup]=&quot;form&quot;&gt;
  &lt;eui-slide-toggle formControlName=&quot;notifications&quot; /&gt;
&lt;/form&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Provide meaningful aria-label describing the toggle&#39;s purpose</li>
<li>Toggle is keyboard accessible (Space/Enter to toggle)</li>
<li>Disabled state is properly communicated to screen readers</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Supports semantic color variants (euiPrimary, euiSuccess, euiDanger, etc.)</li>
<li>Size variants (euiSizeS, euiSizeM, euiSizeL, euiSizeXL) control toggle dimensions</li>
<li>Icons are optional and can be customized for ON/OFF states</li>
</ul>


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

**Standalone:** false

## Inputs

- **ariaLabel**: `string` - <p>attribute attached to the aria-label of the input field</p>

- **disabled**: `boolean` - <p>Whether the toggle is disabled</p>

- **iconSvgFillColorOff**: `string` - <p>Fill color for the OFF state icon</p>

- **iconSvgFillColorOn**: `string` - <p>Fill color for the ON state icon</p>

- **iconSvgNameOff**: `string` - <p>Name of the icon to display when toggle is OFF</p>

- **iconSvgNameOn**: `string` - <p>Name of the icon to display when toggle is ON</p>

- **id**: `string` - <p>Unique identifier for the toggle</p>

- **isChecked**: `boolean` - <p>Current checked state of the toggle</p>


## Outputs

- **slideToggleChange**: `EventEmitter` - <p>Event emitted when toggle state changes</p>

