6 #Checkbox Checkbox

A checkbox is a UI element that allows users to switch between two options(checked or uncheck, on or off).

Note: The <label> must appear after the <input type="checkbox" class="checkbox"> due to the lack of parent selectors in CSS.

Example

Default CheckBox

Checkbox

Selected CheckBox

Checkbox selected

Disabled CheckBox

Checkbox Disabled

Checkbox Disabled Checked

Markup

<h2>Default CheckBox</h2>
<div>
  <input type="checkbox" id="checkbox1" name="checkbox1" class="checkbox">
  <label for="checkbox1">Checkbox</label>
</div>
<h2>Selected CheckBox</h2>
<div>
  <input type="checkbox" id="checkbox1a" name="checkbox1a" checked class="checkbox">
  <label for="checkbox1a">Checkbox selected</label>
</div>
<h2>Disabled CheckBox</h2>
<div>
  <input type="checkbox" id="checkbox2" disabled name="checkbox2" class="checkbox">
  <label for="checkbox2">Checkbox Disabled</label>
</div>
<div>
  <input type="checkbox" id="checkbox3" disabled checked name="checkbox3" class="checkbox">
  <label for="checkbox3">Checkbox Disabled Checked</label>
</div>

Source: checkbox.css, line 1