A checkbox lets users select one or more values from a list of options. Options are not mutually exclusive here so the selection of any option won’t affect the other.
The checkbox can have a help text below the label to provide some extra information about the particular option. The help text will always be aligned to the label. Clicking over the help text will not change the state of checkbox.
Checkbox group is a list of multiple standalone checkboxes with a group label on the top.
*Note: Multiple checkboxes should have a minimum of 8px spacing in between.
Checkboxes can be nested in case of a list having sub-sections. The parent remains unchecked if no child is checked.
Indeterminate state of the parent shows a partially checked state when there is a nested relationship. The parent checkbox will remain indeterminate until all of its child checkboxes are checked.
If the label or the help text with the checkbox overflows, wrap it to the next line but make sure that the control and the label are top aligned.