siimple 3.2.0 siimple.xyz
Form
The guide to style your form elements using siimple.
Switch
A redesigned checkbox element that looks like a switch
You can style a checkbox like a switch. First create a div element with a siimple-switch class:
<div class="siimple-switch"></div>
Then add a input element inside the div, and add the type="checkbox" attribute. You must also assign an id to the input element.
<div class="siimple-switch">
    <input type="checkbox" id="mySwitch">
</div>
Finally, add a label bound to the previously input and an empty div element.
<div class="siimple-switch">
    <input type="checkbox" id="mySwitch">
    <label for="mySwitch"></label>
    <div></div>
</div>
Final result:
<label class="siimple-label">Your switch:</label>
<div class="siimple-switch">
    <input type="checkbox" id="mySwitch" checked>
    <label for="mySwitch"></label>
    <div></div>
</div>
Colored switch
Added in v3.2.0
Use siimple-switch--error, siimple-switch--warning and siimple-switch--success to change the color of the checked checkbox.
<label class="siimple-label">Your switch:</label>
<div class="siimple-switch siimple-switch--error">
    <input type="checkbox" id="mySwitch2" checked>
    <label for="mySwitch2"></label>
    <div></div>
</div>
Found a mistake or want to help improve this documentation? Suggest changes.