### File

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

### Description

Slide toggle component that can be used as a standalone toggle or within reactive forms. Supports custom icons for on/off states and various size/variant options through BaseStatesDirective.

### Implements

`ControlValueAccessor`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary euiInfo euiWarning euiSuccess euiDanger euiAccent 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

- disabled
- iconSvgFillColorOff
- iconSvgFillColorOn
- iconSvgNameOff
- iconSvgNameOn
- id
- isChecked

###### Outputs

- slideToggleChange

###### HostBindings

- class

###### Accessors

- cssClasses

### Constructor

`constructor()`

### Inputs

disabled
Type : `boolean`
Default value : `false`
Whether the toggle is disabled

iconSvgFillColorOff
Type : `string`
Default value : `'neutral'`
Fill color for the OFF state icon

iconSvgFillColorOn
Type : `string`
Default value : `'neutral'`
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
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`

# results matching ""

# No results matching ""