Checkbox with Code Examples

Basic

            
<div class="checkbox-group">
    <input type="checkbox">
    <input type="checkbox" checked>
    <input type="checkbox" disabled>
    <input type="checkbox" disabled>
</div>

Colors

                        
<div class="checkbox-group colored">
    <input type="checkbox" style="background-color: blue;">
    <input type="checkbox" style="background-color: black;">
    <input type="checkbox" style="background-color: green;">
    <input type="checkbox" style="background-color: yellow;">
    <input type="checkbox" style="background-color: red;">
</div>

Label

Primary Secondary Success Warning

            
<div class="label-group">
    <label><input type="checkbox" checked> Primary</label>
    <label><input type="checkbox"> Secondary</label>
    <label><input type="checkbox" style="background-color: green;" checked> Success</label>
    <label><input type="checkbox" style="background-color: yellow;"> Warning</label>
</div>

Sizes & Custom Icon

            
<div class="custom-icon">
    <input type="checkbox" checked>
    <input type="checkbox" checked>
    <input type="checkbox" checked style="border-radius: 50%;">
    <input type="checkbox" checked style="border-radius: 0;">
</div>