# Switch ## Visual Structure ``` ga-switch [--invalid] ├── input[type="checkbox"] ├── ga-switch__marker │ ├── ga-switch__check-icon │ └── ga-switch__slider └── ga-switch__label (optional) ``` ## Elements Hierarchy ### Core Block - `ga-switch` - Main container for the switch component ### Mandatory Elements - `input` - Native HTML input element (type="checkbox") - `ga-switch__marker` - Visual container for the switch's visual elements - `ga-switch__check-icon` - Icon shown when switch is in the "on" state (use `CheckIcon` from Lucide icons) - `ga-switch__slider` - The sliding element of the switch ### Optional Elements - `ga-switch__label` - Text label for the switch component ### Modifiers - `ga-switch--invalid` - Styles the switch to indicate an invalid/error state ## Examples ### Default ```html

``` ### Disabled (Off) ```html

``` ### Disabled (On) ```html

``` ### With Label ```html

Label ``` ### Invalid ```html

Label ```