Components

Checkbox

Checkboxes are used to select multiple options from a set of options.

Example:



<div>
<label class="checkbox">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"> </span>
</label>
<label class="checkbox">Two
  <input type="checkbox">
  <span class="checkmark"> </span>
</label>
<label class="checkbox">Three
  <input type="checkbox">
  <span class="checkmark"> </span>
</label>
</div>

Checkbox Types:





<div>
<label class="checkbox">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"> </span>
</label>
<label class="checkbox">Two
  <input type="checkbox">
  <span class="checkmark"> </span>
</label>
<label class="checkbox">Three
  <input type="checkbox">
  <span class="checkmark"> </span>
</label>
</div>
<div class="success">
<label class="checkbox">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"> </span>
</label>
<label class="checkbox">Two
  <input type="checkbox">
  <span class="checkmark"> </span>
</label>
<label class="checkbox">Three
  <input type="checkbox">
  <span class="checkmark"> </span>
</label>
</div> <div class="danger">
<label class="checkbox">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"> </span>
</label>
<label class="checkbox">Two
  <input type="checkbox">
  <span class="checkmark"> </span>
</label>
<label class="checkbox">Three
  <input type="checkbox">
  <span class="checkmark"> </span>
</label>
</div> <div class="info">
<label class="checkbox">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"> </span>
</label>
<label class="checkbox">Two
  <input type="checkbox">
  <span class="checkmark"> </span>
</label>
<label class="checkbox">Three
  <input type="checkbox">
  <span class="checkmark"> </span>
</label>
</div>