Types

Usage & Behavior

General guidelines

• If it is disabled, the cursor will indicate that the selection cannot be made.
• Checkboxes require the use of a button to apply the settings once they are selected.

• Only one option that can be selected or deselected, e.g. accept terms of use. use a single checkbox.

• A group or a list of options that can be selected independently of each other. use checkbox group.

• Do not use a checkbox (or a checkbox group) if:
  • Space is constrained → use a DropDown menu.
  • The user needs to select a single mutually exclusive choice within a group → useRadio Buttons.
  • The user may need to enter a choice that is not pre-defined →use aCombo Box.
  • The user needs to select from a range of values →use aSlider.
  • If the user needs to choose multiple options from a large list → consider using a multi combo box instead.
• Combine related options and separate unrelated options into groups of 10 or fewer, using multiple groups if necessary.
• List check boxes in a logical order, such as grouping highly related options together or placing most common options first, or following some other natural progression. Alphabetical ordering isn't recommended because it is language dependent, and therefore not localizable.
• Align check boxes vertically, not horizontally. Horizontal alignment is harder to read.
• Label every check box.
• Write the label as a phrase or an imperative sentence, and use no ending punctuation.
• Users should be able to select the checkbox by clicking on the box directly or by clicking on its label.

States

The checkbox control allows 3 states:

1. Selected.
2. Unselected.
3. Indeterminate - this option is used when the checkbox contains a sub-list of selections, of which some are selected and some are not.

Interaction

Validation and Errors

Image Added