Checkboxes

A checkbox is a type of button that lets the user choose between two opposite states, actions, or values. A selected checkbox is considered on when it contains a checkmark and off when it's empty. A checkbox is almost always followed by a title unless it appears in a checklist.

Provide a title that implies two opposite states. Make sure it’s clear what happens when the checkbox is selected or deselected. In general, use sentence case without punctuation. If you can’t find an unambiguous title, consider using a pair of radio buttons instead, so you can clarify the states with two different labels. See Radio Buttons.

Use a checkbox in a view, not a window frame. Checkboxes aren’t intended for use in window frame elements like toolbars and status bars.

Use a radio button when the user needs to choose between more than two states. See Radio Buttons.

Consider using a label to introduce a group of checkboxes if their relationship isn't evident. Describe the set of options and align the label’s baseline with the first checkbox in the group.

In general, arrange multiple checkboxes vertically. When checkboxes are listed vertically, it’s easier to distinguish their states.

Use alignment and indentation to group related checkboxes. In general, checkboxes should be left-aligned. Use indentation when you need to denote hierarchy or dependency, such as when the state of a parent checkbox governs the state of child checkboxes. The Clock pane in Date & Time preferences uses this style to show that some settings are dependent on others.

Enable and disable checkboxes and related controls accordingly. Checkboxes and related controls should be disabled if they’re not applicable in the current state. In the Junk preference pane in Mail, the options for customizing junk mail behavior are inactive unless the user selects “Enable junk mail filtering.”

Deselected

Selected

Mixed

Use a mixed state when it makes sense. A checkbox should accurately reflect its state. If a checkbox is used to globally enable and disable multiple child checkboxes, it should show a mixed state—reflected by a dash—when those children are not all in the same state.

For developer guidance, see NSSwitchButton.