Check Boxes

A check box is a control with an on and off setting.

Guidelines

  • Use a checkbox when your design requires users to decide between opposite choices. 
  • Select the recommended check box by default.  If there is no recommendation, clear all check boxes.
  • Within a group, use 10 or fewer check boxes. For more options, use a list box.
  • List multiple check boxes in an order that is easy for the user to scan, such as alphabetically or from most to less frequently selected choice.
  • In a datagrid:
    • Vertically align the check boxes in each column
    • Place a check box in the column header to toggle all rows on and off
  • Orient nested check boxes vertically and indent the children under the parent.  Optionally, allow the nested check box to expand and collapse.

  • Use a tri-state check box when you need an indeterminate state, in addition to the selected and deselcted states. A common use of a tri-state check box is with a tree control, in which the nodes can be in mixed state. 

  • Keep the check box label to a single line. Use regular font, sentence-style capitalization, and no ending punctuation. 
  • If the check box needs more explanation, add text below the component.  Use "select" and "deselect" for single check boxes and "clear" for deselecting several check boxes at the same time.

Visual Specification

Related Topics

Average (0 Votes)