Toggle

Usage #

<label class="toggle">
    <input class="toggle-checkbox" type="checkbox">
    <div class="toggle-toggle"></div>
    <span class="toggle-label">Wi-fi</span>
</label>

And here is toggle with the checked state enabled.

<label class="toggle">
    <input class="toggle-checkbox" type="checkbox" checked>
    <div class="toggle-toggle"></div>
    <span class="toggle-label">Bluetooth</span>
</label>

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.

// colors
--toggle-background-color: var(--palette-neutral-mid);
--toggle-active-background-color: var(--palette-active-base);
--toggle-handle-background-color: var(--palette-white);

// vars
--toggle-label-font-size: 15px;
--toggle-label-font-weight: normal;
--toggle-label-line-height: var(--body-text-line);
--toggle-label-text-transform: none;
--toggle-label-top: 2px;
--toggle-label-margin-left: 2px;
--toggle-width: 36px;
--toggle-height: 22px;
--toggle-border-radius: calc(var(--toggle-height)/2);
--toggle-size: 18px;
--toggle-space: 2px;