siimple 3.2.0 siimple.xyz
Form
The guide to style your form elements using siimple.
Checkbox
The redesigned checkbox element
For adding a checkbox element to your project, first you must create a div with the class siimple-checkbox:
<div class="siimple-checkbox"></div>
Inside it, create an input with the attribute type="checkbox". Also, you must add an id attribute that will be used in the last step.
<div class="siimple-checkbox">
    <input type="checkbox" id="myCheckbox">
</div>
Finally, create a label element bound to the previous input element.
<div class="siimple-checkbox">
    <input type="checkbox" id="myCheckbox">
    <label for="myCheckbox"></label>
</div>
Final result:
<label class="siimple-label">Your checkbox:</label>
<div class="siimple-checkbox">
    <input type="checkbox" id="myCheckbox" checked>
    <label for="myCheckbox"></label>
</div>
Colored checkbox
Added in v3.2.0
Use siimple-checkbox--error, siimple-checkbox--warning and siimple-checkbox--success to change the color of the checked checkbox.
<label class="siimple-label">Your checkbox:</label>
<div class="siimple-checkbox siimple-checkbox--success">
    <input type="checkbox" id="myCheckbox2" checked>
    <label for="myCheckbox2"></label>
</div>
Found a mistake or want to help improve this documentation? Suggest changes.