Search
Find
Form
Create and style a wide variety of forms
Checkbox
The redesigned checkbox element
Form field
A simple form container to group form sections
Input
The universal text input element
Label
Style your form labels
Radio button
The redesigned radio button element
Select
A basic dropdown selection element
Switch
A redesigned checkbox element that looks like a switch
Textarea
A multiline text input element
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.