Check boxes can be used to select multiple choices (or zero choices) from a small list of options. When space is limited, or when there are more than seven options in the list, consider using a Select Field with multi-select check boxes in the menu.
Check boxes can also stand-alone to be used to enable (turn on) or disable (turn off) a single option. When using this type of check box, be sure the result of enabling or disabling the choice is clear.
Using browser default styles for check boxes is often times the best choice. You can still define the check box size, font size and margin spaces, but the coloring and behavior will be consistent with the specific browser’s styles.
If you or your team decides to use custom colors, choose colors from the standard palette.
1. Always provide a label, positioned to the right of the check box 2. Use positive and activating labels, avoiding negations 3. Be clear about will what happen if a check box is selected, and what will happen if it is not selected 4. Allow clicking on the check box and its label
For better readability, use vertical check box lists rather than horizontal lists.
In a nested check box list, allow the parent check box to toggle on or off all child check boxes to match its own state. In this case, a parent check box should display as indeterminate (partially checked) whensome nested child checkboxes are selected and some are not.
Horizontal check box lists can be used when vertical space is limited.
Can’t find what you’re looking for?
Feel free to share any comments or concerns, and request any other elements you might need.