They provide a natural and familiar way of indicating preferences, allowing users to choose more than one option at a time. By default, a checkbox Input includes a selected and unselected state.
States
The checkbox supports different states: unselected, selected, indeterminate, focused, and disabled. 
<div class="form-field">
    <input type="checkbox">
    <label>Checkbox default</label>
</div>

<div class="form-field">
    <input type="checkbox" disabled>
    <label>Checkbox disabled</label>
</div>

<div class="form-field">
    <input type="checkbox" checked>
    <label>Checkbox checked</label>
</div>

<div class="form-field">
    <input type="checkbox" checked disabled>
    <label>Checkbox checked disabled</label>
</div>

<div class="form-field">
    <input type="checkbox" class="checkbox-indeterminate" checked>
    <label>Checkbox indeterminate</label>
</div>
                                                                  
<div class="form-field">
    <input type="checkbox" class="checkbox-indeterminate" checked disabled>
    <label>Checkbox indeterminate disabled</label>
</div>
General guidelines
  • Always use clear and concise labels.

  • Be explicit about the results that will follow if the checkbox is selected.

  • Place the labels to the right of the checkbox entries.
Structure
1
Group Label: Can be optional. Indicates what should be selected next.
2
Checkbox: Indicates the status of the checkbox. By default it is not selected.
3
Label: Information you want to select or deselect.
Align
Checkbox labels are placed to the right of your entries. If there is a grouping, they can be distributed vertically or horizontally depending on the use case and the structure of the user interface.
DO
  • To present multiple options that can be selected each.
  • For changes that require confirmation after selection.
DON'T
  • When only one of multiple options can be selected, use radio buttons.
  • When you need to group several options into a single basic option: follow the parameters of group labels.
  • When you need to apply unique on/off settings with instant response, use a switch.