A switch is a stylized version of checkbox inputs. They can be interacted with without the need for any JS, but the markup structure is very important.
Each .joy-switch element should contain an input element directly followed by a label element with the respective classes .joy-switch__checkbox and .joy-switch__label. The label should have two children span elements: .joy-switch__inner and .joy-switch__knob.
In order for the switch to be functional, be sure that the name="", id="", andfor=""attributes on theinputandlabel` match and are unique per switch.
<div class="joy-switch">
<input type="checkbox" name="joy-switch-ex-1" class="joy-switch__checkbox" id="joy-switch-ex-1" >
<label class="joy-switch__label" for="joy-switch-ex-1">
<span class="joy-switch__inner"></span>
<span class="joy-switch__knob"></span>
</label>
</div>If you want to understand how this works, read this article, but basically, we using the :checked pseudo class combined with the + adjacent selector in CSS to alter the look of the label depending on whether the hidden checkbox is check or unchecked. Pure CSS magic.
Switches can be modified to be different sizes. There are 5 sizes available to use: XS, SM, LG, XL, and the default switch size.
The size modifier classes simply needs to be added to the main .joy-switch element.
<div class="joy-switch joy-switch--xs">
<input type="checkbox" name="joy-switch-ex-2" class="joy-switch__checkbox" id="joy-switch-ex-2" >
<label class="joy-switch__label" for="joy-switch-ex-2">
<span class="joy-switch__inner"></span>
<span class="joy-switch__knob"></span>
</label>
</div>
<div class="joy-switch joy-switch--sm">
<input type="checkbox" name="joy-switch-ex-3" class="joy-switch__checkbox" id="joy-switch-ex-3" >
<label class="joy-switch__label" for="joy-switch-ex-3">
<span class="joy-switch__inner"></span>
<span class="joy-switch__knob"></span>
</label>
</div>
<div class="joy-switch">
<input type="checkbox" name="joy-switch-ex-4" class="joy-switch__checkbox" id="joy-switch-ex-4" >
<label class="joy-switch__label" for="joy-switch-ex-4">
<span class="joy-switch__inner"></span>
<span class="joy-switch__knob"></span>
</label>
</div>
<div class="joy-switch joy-switch--lg">
<input type="checkbox" name="joy-switch-ex-5" class="joy-switch__checkbox" id="joy-switch-ex-5" >
<label class="joy-switch__label" for="joy-switch-ex-5">
<span class="joy-switch__inner"></span>
<span class="joy-switch__knob"></span>
</label>
</div>
<div class="joy-switch joy-switch--xl">
<input type="checkbox" name="joy-switch-ex-6" class="joy-switch__checkbox" id="joy-switch-ex-6" >
<label class="joy-switch__label" for="joy-switch-ex-6">
<span class="joy-switch__inner"></span>
<span class="joy-switch__knob"></span>
</label>
</div>
Width modifier classes alter the relative width of the switch to make the switches wider. These become useful when you start including text in your switches.
The width modifier classes simply needs to be added to the main .joy-switch element.
<div class="joy-switch joy-switch--wide">
<input type="checkbox" name="joy-switch-ex-wide" class="joy-switch__checkbox" id="joy-switch-ex-wide" >
<label class="joy-switch__label" for="joy-switch-ex-wide">
<span class="joy-switch__inner"></span>
<span class="joy-switch__knob"></span>
</label>
</div>
<div class="joy-switch joy-switch--wider">
<input type="checkbox" name="joy-switch-ex-wider" class="joy-switch__checkbox" id="joy-switch-ex-wider" >
<label class="joy-switch__label" for="joy-switch-ex-wider">
<span class="joy-switch__inner"></span>
<span class="joy-switch__knob"></span>
</label>
</div>
<div class="joy-switch joy-switch--widest">
<input type="checkbox" name="joy-switch-ex-widest" class="joy-switch__checkbox" id="joy-switch-ex-widest" >
<label class="joy-switch__label" for="joy-switch-ex-widest">
<span class="joy-switch__inner"></span>
<span class="joy-switch__knob"></span>
</label>
</div>
<div class="joy-switch joy-switch--insanely-wide">
<input type="checkbox" name="joy-switch-ex-insane" class="joy-switch__checkbox" id="joy-switch-ex-insane" >
<label class="joy-switch__label" for="joy-switch-ex-insane">
<span class="joy-switch__inner"></span>
<span class="joy-switch__knob"></span>
</label>
</div>Width modifier classes can be used in conjustion with size classes as well. Here's a whole bunch of examples.
Add text to your switches to help make it even clearer to the user what the option they are selecting means.
To add text, you need to do 2 things:
data-checked-text="" and data-unchecked-text="" attributes to provide your text for the checked and unchecked options respectively. Try to keep them short. Capitalization does not matter (they will appear in all caps regardless)..joy-switch--insanely-wide option is not wide enough, you should probably rethink your text to something a bit shorter.Text will not be displayed when using the .joy-switch--xs size modifier.
<div class="joy-switch joy-switch--wide">
<input type="checkbox" name="joy-switch-ex-yes-no" class="joy-switch__checkbox" id="joy-switch-ex-yes-no" >
<label class="joy-switch__label" for="joy-switch-ex-yes-no">
<span class="joy-switch__inner" data-checked-text="Yes" data-unchecked-text="No"></span>
<span class="joy-switch__knob"></span>
</label>
</div>
<div class="joy-switch joy-switch--wide">
<input type="checkbox" name="joy-switch-ex-on-off" class="joy-switch__checkbox" id="joy-switch-ex-on-off" >
<label class="joy-switch__label" for="joy-switch-ex-on-off">
<span class="joy-switch__inner" data-checked-text="On" data-unchecked-text="Off"></span>
<span class="joy-switch__knob"></span>
</label>
</div>
<div class="joy-switch joy-switch--widest">
<input type="checkbox" name="joy-switch-ex-custom" class="joy-switch__checkbox" id="joy-switch-ex-custom" >
<label class="joy-switch__label" for="joy-switch-ex-custom">
<span class="joy-switch__inner" data-checked-text="Checked" data-unchecked-text="Unchecked"></span>
<span class="joy-switch__knob"></span>
</label>
</div>A few common color options have been made available:
.joy-switch--green unchecked: $grey-lightest, checked: $color-success.joy-switch--red-green unchecked: $color-error, checked: $color-success.joy-switch--red-base unchecked: $color-error, checked: $color-base<div class="joy-switch joy-switch--wide joy-switch--green">
<input type="checkbox" name="joy-switch-ex-green" class="joy-switch__checkbox" id="joy-switch-ex-green" >
<label class="joy-switch__label" for="joy-switch-ex-green">
<span class="joy-switch__inner" data-checked-text="Yes" data-unchecked-text="No"></span>
<span class="joy-switch__knob"></span>
</label>
</div>
<div class="joy-switch joy-switch--wide joy-switch--red-green">
<input type="checkbox" name="joy-switch-ex-red-green" class="joy-switch__checkbox" id="joy-switch-ex-red-green" >
<label class="joy-switch__label" for="joy-switch-ex-red-green">
<span class="joy-switch__inner" data-checked-text="Yes" data-unchecked-text="No"></span>
<span class="joy-switch__knob"></span>
</label>
</div>
<div class="joy-switch joy-switch--wide joy-switch--red-base">
<input type="checkbox" name="joy-switch-ex-red-base" class="joy-switch__checkbox" id="joy-switch-ex-red-base" >
<label class="joy-switch__label" for="joy-switch-ex-red-base">
<span class="joy-switch__inner" data-checked-text="Yes" data-unchecked-text="No"></span>
<span class="joy-switch__knob"></span>
</label>
</div>