Documentation
Basic
Extended
Blocks

Form switch

You may use this as a replacement for <input type="checkbox">

<div class="form-field form-switch">
    <label for="switch" class="form-switch-label">
        <input type="checkbox" name="switch" id="switch" class="form-switch-input" />
        <span class="form-switch-slider"></span>

        <span class="form-switch-slider-text">Toggle or switch</span>
    </label>
</div>

If you need larger size use class form-switch-large

Dark Light 
<div class="form-field form-switch form-switch-large">
    <span class="form-switch-label-text">Dark</span>
    <label for="switch2" class="form-switch-label">
        <input type="checkbox" name="switch2" id="switch2" class="form-switch-input" />
        <span class="form-switch-slider"></span>
    </label>
    <span class="form-switch-label-text">Light</span>
</div>
SASS reference
$switch-size: rem(36) !default;
$switch-size-large: rem(44) !default;

--r-form-switch-background-color: var(--r-color-light-darken-10);
--r-form-switch-checked-background-color: var(--r-color-primary);
--r-form-switch-handler-color: var(--r-color-white);
--r-form-switch-size: #{$switch-size};
--r-form-switch-size-large: #{$switch-size-large};