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
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.
<div class="siimple-switch">
<input type="checkbox" id="mySwitch">
<label for="mySwitch"></label>
</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>
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>
Found a mistake or want to help improve this documentation?
Suggest changes.