Checkboxes
Checkboxes signal to the user that an option is selectable. They allow for users to select as many or as few checkable options as listed. The checkable option states for the user are selected, unselected or indeterminate.
Using checkboxes
Checkboxes must feature a descriptive label. Checkboxes may appear alone or as a part of a group. A checkbox may also have sub-components or child checkboxes.
Designing
Checkbox
Checkboxes make the selection visually distinct.
Checkbox label
Its labels should be short, with text that clearly states what action is selected.
Checkboxes group label (optional)
If 2 or more checkboxes are grouped, it's recommended that the group also carries a clear label.
States of checkboxes
The styles for checkbox states were designed with accessible color variations, additional to the 'check' 
icon to distinguish the checkbox following visually separated states in selected or unselected mode (e.g. disabled, hover, active):
Types
Indeterminate
In addition to selected and unselected, a checkbox can be in indeterminate state. This state uses the 'subtract' 
icon.
The most common is when a checkbox is available that "owns" a number of sub-options (which are also checkboxes). If all of the sub-options are checked, the owning checkbox is also checked, and if they're all unchecked, the owning checkbox is unchecked. If any one or more of the sub-options have a different state than the others, the owning checkbox is in the indeterminate state.[1]