Checkbox / Radio

.checkbox class allows you to set quick and default checkbox and radio input style.

Note: Add the checkbox label next to checkbox input

Type

.checkbox checkbox with checkmark
.radio radio input with bullet
.checkbox-bullet checkbox with bullet
.checkbox-round round checkbox with checkmark
  <div><input type="checkbox" class="checkbox" id="choice-1"/> <label for="choice-1"><span class="fs-s2">Checkbox</span></label></div>
  <div><input type="radio" class="radio" id="choice-2"/> <label for="choice-2"><span class="fs-s2">Radio</span></label></div>
  <div><input type="checkbox" class="checkbox-bullet" id="choice-3"/> <label for="choice-3"><span class="fs-s2">Bullet Checkbox</span></label></div>
  <div><input type="checkbox" class="checkbox-round" id="choice-4"/> <label for="choice-4"><span class="fs-s2">Round Checkbox</span></label></div>

Disabled

<input type="checkbox" class="checkbox" id="choice" disabled/>
<label for="choice">
  <span class="fs-s2">Disabled Checkbox</span>
</label>

<input type="checkbox" class="checkbox" id="choice" checked disabled/>
<label for="choice">
  <span class="fs-s2">Checked Disabled Checkbox</span>
</label>

Color

Add color class to label and checkbox inherit the color of label. And if you want to change the color of checkbox only than change the color of text 

<input type="checkbox" class="checkbox" id="color-1"/>
<label for="color-1" class="blue">
  <span class="fs-s2">Checkbox</span>
</label>

<input type="checkbox" class="checkbox" id="color-2"/>
<label for="color-2" class="indigo">
  <span class="fs-s2 gray">Checkbox</span>
</label>