A check box is...

Typical Appearance

Across nearly all platforms, check boxes are virtually identical. This component's simplicity prevents it from having a wide variety of designs.

The appearance of a check box mirrors the real-world check box, which makes a mental model blatant.

Typical Behavior

This component has many states across most platforms: checked, unchecked, disabled, and pressed down. Like a button, these different states should be obvious in the event that someone clicks (or holds down) on it. The two states that are most important, however, and checked and unchecked. This allows the user to designate the statement next to the check box as either true or false.

Events

A check box can be checked or unchecked as the result of a click. Additionally, check boxes represent the event of an item in a list. A simple example of this representation is a to-do list, which showcases whether a certain task has been completed.

The most relevant button event is the click. A click event indicates that the user has switched the check box's state. Secondary events include hover, indicating that a pointing device is explicitly within the button’s bounds. In the event that a user presses and holds on a check box, the release event is applicable.

State Diagram

The following diagram shows the six states of a standard check box and the events/actions that cause each state to change.

Most check box designs have the following states: the checked (enabled) , checked (disabled) , unchecked (enabled) , and unchecked (disabled) states. The disabled check boxes can be viewed as “dormant” check box states—they are the only states that a check box can have when a user is not interacting with the check box, and is not permitted to do so either. In contrast, the enabled states means that a user can interact with them.

In most cases, if a button is not disabled, a click action will cause the check box to change states from checked to unchecked or vice-versa.

The other two states occur when a user invokes the press event. These states are checked (held) and unchecked (held). Upon release, the check box enters the corresponding state, either checked or unchecked.

Variants

Radio Buttons and Switches

Deviations from the original check box include both radio buttons and switches.

• Radio Buttons A radio button has a different design but conveys nearly the same information by being able to be either selected or unselected. Traditionally, radio buttons are used when only one option from a list of options is able to be selected at a time. Another way of saying this is that radio buttons are used when the choices are mutually exclusive, while checkboxes are more often used when the choices are not mutually exclusive.
  This radio button will become deselected when you...
  Select this radio button. And vice-versa.
• Switch Buttons The switch button also has two primary states: on and off. The switch, also known as a toggle, changes state also by a click, however, is usually used to enact an action rather than mark a statement as true or false.
  
  This gif of a switch represents ON and OFF states by changing color.

Component in Action

See the check boxes below to interact with some basic check boxes!

Please fast forward to time 3:08 in the following video done by DetroitBORG to experience the check box phenomenon.

When to Use What Widgets

Ever since the first edition of Inside Macintosh in 1984, the rule has been the same for when to use checkboxes versus radio buttons. All subsequent GUI standards and the official W3C Web standards have included the same definition of these two controls:

1. Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.
2. Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others.
3. A stand-alone checkbox is used for a single option that the user can choose by marking the statement as true or false.

Priority Metrics

Because check boxes are so intuitive for users, all usability metrics are applicable, with efficiency and memorability being the most significant.

Because check boxes are such a fundamental part of so many user interfaces available today, it can be said that all usability metrics are equally important for this component. Users who are seeing a check box in a given platform for the first time must not have any issues recognizing it and knowing what to do with it (learnability). The high priority of learnability also implies that memorability is a given.

Users must also never experience undue delays with using a check box (efficiency), particularly because using a check box almost always involves an instantaneous, immediate-result action. Users should almost never trigger a check box by mistake (errors)—especially check boxes whose actions result in significant changes to data or the real world. Additionally, because check boxes are commonly used in lists, the user usually needs to submit the list, using a button.

If any metric at all can be considered as a “low priority” for check boxes, it would be satisfaction. The check box is such a utilitarian component that “joy” or “uncontrollable excitement” is hardly associated with its use. One exception to this prioritization may be for check boxes in applications whose primary metric is satisfaction (e.g. video games, entertainment platforms). As a part of that overall system, making check boxes “pleasurable” may then become more important than in other situations.

Key Characteristics

So what makes for a good check box?

According to Microsoft, one should limit the number of check boxes in the user interface. If one needs to include several options, consider using a list view or list box control instead. In addition, one should:

• Label all check boxes
• Use sentence caps for check box labels
• Write check box labels as sentence fragments (imperative sentences) with no ending punctuation
• Avoid long check-box labels
• Use select and clear in instructions for check boxes
• Use grammatically positive phrasing for all check box labels

In the image above, the check box is the primary action and the state indicator for the list item.

Feedback

Much like a button, it is important for check boxes to give instant feedback. Users must never doubt whether:

1. they have checked a box, or selected an option.
2. they have successfully unchecked a box, or in the case of switches, successfully disabled an action.