Switch

The Switch component is an enhanced version of a standard HTML checkbox, designed for a more intuitive and visually appealing user interface. It comprises a hidden checkbox (mgnl-switch__checkbox) and a custom label (mgnl-switch__slider). It's crucial to ensure that the for attribute of the label matches the id of the corresponding checkbox. This linkage is essential for the switch's functionality, allowing the label to effectively toggle the state of the hidden checkbox, while maintaining accessibility and ease of use.

Draft

                    
import "@solutas/mgnl-elements-css/build/components/switch/switch.css"

Switch

Switch standard

                    
<div class="mgnl-switch">
    <input type="checkbox" id="mgnl-switch-checkbox" class="mgnl-switch__checkbox" />
    <label for="mgnl-switch-checkbox" class="mgnl-switch__slider"></label>
</div>

Switch not Checked

Disabled Switch

                    
<div class="mgnl-switch">
    <input type="checkbox" disabled id="mgnl-switch-checkbox" class="mgnl-switch__checkbox" />
    <label for="mgnl-switch-checkbox" class="mgnl-switch__slider"></label>
</div>

Switch Checked

Disabled Switch

                    
<div class="mgnl-switch">
    <input type="checkbox" checked disabled id="mgnl-switch-checkbox" class="mgnl-switch__checkbox" />
    <label for="mgnl-switch-checkbox" class="mgnl-switch__slider"></label>
</div>

Use CSS Var

--mgnl-switch-md-width

--mgnl-switch-md-height

--mgnl-switch-md-typography-font-family

--mgnl-switch-md-typography-font-size

--mgnl-switch-md-typography-font-weight

--mgnl-switch-md-typography-letter-spacing

--mgnl-switch-md-typography-line-height

--mgnl-animation-duration-50

--mgnl-animation-timing-50

--mgnl-switch-off-color-fill-default

--mgnl-switch-md-border-radius

--mgnl-switch-off-border-default

--mgnl-switch-md-padding

--mgnl-switch-md-toggle-size

--mgnl-switch-off-color-toggle-default

--mgnl-switch-off-color-fill-hover

--mgnl-switch-off-border-hover

--mgnl-switch-off-color-toggle-hover

--mgnl-switch-off-focus-outline-focus

--mgnl-switch-off-border-focus

--mgnl-switch-off-color-fill-disabled

--mgnl-switch-disabled-border-default

--mgnl-switch-off-color-toggle-disabled

--mgnl-switch-on-color-fill-default

--mgnl-switch-on-border-default

--mgnl-switch-on-color-toggle-default

--mgnl-switch-on-color-fill-hover

--mgnl-switch-on-border-hover

--mgnl-switch-on-color-toggle-hover

--mgnl-switch-on-focus-outline-focus

--mgnl-switch-on-border-focus

--mgnl-switch-on-color-fill-disabled

--mgnl-switch-on-color-toggle-disabled