State the effect of marking
Do not pre-select optional consent in place of the user's decision.
Checkbox Design system
Select multiple items or enable an independent selection.
Checklist contents
Review progress
01
Structure and meaning
Compare information and presentation in context of use.
02
Interaction and usability
Try the operation, change the status and continue working.
03
Complete the experience
Check for details that are easy to miss when putting the design into use.
Progress is saved automatically in this browser.
GUIDANCE
How to review
EXAMPLES
Usage examples
State the effect of marking
“Receive product newsletters via email” is separated from accepting the terms.
Variants and use cases
Select boxes and labels
The selection box has clear boundaries, a label with an interactive area, and sufficient distance from the selection next to it.
Click both the box and the label and increase the font size; all change to the same choice.
Example The line "Get product information" can be clicked throughout the label area.
Select state
Distinguish between unselected, selected, mixed, focus and disabled according to the correct semantics.
Select a subgroup; The parent checkbox represents mixed instead of select all.
Example Selecting 2 of the 5 items causes the “Select All” box to have a partial status mark.
SelectedNot selected yetDefaultSelectingNot availableShow errorPartially selected