Checkbox, Radio & Switch

Checkbox

html
<div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkbox1">
    <label class="form-check-label" for="checkbox1">Checkbox</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkbox2" checked>
    <label class="form-check-label" for="checkbox2">Checkbox</label>
  </div>
</div>
html
<div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkbox3" disabled>
    <label class="form-check-label" for="checkbox3">Checkbox</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkbox4" checked disabled>
    <label class="form-check-label" for="checkbox4">Checkbox</label>
  </div>
</div>

Radio

html
<div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="radioSet1" id="radio1">
    <label class="form-check-label" for="radio1">Radio</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="radioSet1" id="radio2" checked>
    <label class="form-check-label" for="radio2">Radio</label>
  </div>
</div>
html
<div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="radioSet2" id="radio3" disabled>
    <label class="form-check-label" for="radio3">Radio</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="radioSet2" id="radio4" checked disabled>
    <label class="form-check-label" for="radio4">Radio</label>
  </div>
</div>

Switch

html
<div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switch1">
    <label class="form-check-label" for="switch1">Switch</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switch2" checked>
    <label class="form-check-label" for="switch2">Switch</label>
  </div>
</div>
html
<div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switch3" disabled>
    <label class="form-check-label" for="switch3">Switch</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switch4" checked disabled>
    <label class="form-check-label" for="switch4">Switch</label>
  </div>
</div>

Square Switch

html
<div>
  <div class="form-check form-switch form-switch-square">
    <input class="form-check-input" type="checkbox" id="switch5">
    <label class="form-check-label" for="switch5">Switch</label>
  </div>
  <div class="form-check form-switch form-switch-square">
    <input class="form-check-input" type="checkbox" id="switch6" checked>
    <label class="form-check-label" for="switch6">Switch</label>
  </div>
</div>
html
<div>
  <div class="form-check form-switch form-switch-square">
    <input class="form-check-input" type="checkbox" id="switch7" disabled>
    <label class="form-check-label" for="switch7">Switch</label>
  </div>
  <div class="form-check form-switch form-switch-square">
    <input class="form-check-input" type="checkbox" id="switch8" checked disabled>
    <label class="form-check-label" for="switch8">Switch</label>
  </div>
</div>

Material Design Switch

html
<div>
  <div class="form-check form-switch form-switch-material">
    <input class="form-check-input" type="checkbox" id="switch9">
    <label class="form-check-label" for="switch9">Switch</label>
  </div>
  <div class="form-check form-switch form-switch-material">
    <input class="form-check-input" type="checkbox" id="switch10" checked>
    <label class="form-check-label" for="switch10">Switch</label>
  </div>
</div>
html
<div>
  <div class="form-check form-switch form-switch-material">
    <input class="form-check-input" type="checkbox" id="switch11" disabled>
    <label class="form-check-label" for="switch11">Switch</label>
  </div>
  <div class="form-check form-switch form-switch-material">
    <input class="form-check-input" type="checkbox" id="switch12" checked disabled>
    <label class="form-check-label" for="switch12">Switch</label>
  </div>
</div>