UI Controls Dictionary > Radio Buttons and Checkboxes
Radio button and checkbox controls each allow users to select items from a list. Despite that, they have different uses and guidelines.
Deciding when to use which one can be challenging, so this article explains the differences between them and when and how to use each.
Like dropdown menus, radio buttons and checkboxes are appropriate when there is a pre-defined range of selection options. The difference between them is that radio buttons are for cases where only a single selection is valid (marital status, gender, etc.), whereas checkboxes support zero or more selections (preferred activities or interests, for example).
Unlike dropdown menus, radio buttons and checkboxes let users see all options at once. This can make selection faster. Their primary limitation is the amount of space they take up. Because of this, the GNOME Human Interface Guidelines recommend no more than "about eight" choices for a single group.
The most difficult scenario for choosing between radio buttons and checkboxes is when there is a binary (e.g., yes/no) choice, since both controls could be used. The deciding factor should be whether the second choice becomes obvious from the first one. In the example above, radio buttons are used for Digital vs. Analog in the time options. These alternatives are familiar, but there could still be some doubt if only one were used with a checkbox. The alternative to "Show AM/PM", when using a checkbox, becomes don't show AM/PM, which is unambiguous.
As with most form controls, radio buttons and checkboxes can be disabled as needed. One state that is unique to radio buttons and checkboxes is the non-binary indeterminate (also called mixed) state (neither on nor off).
The indeterminate / mixed state should only be used "to indicate that an option is set for some, but not all, child objects. [It] must not be used to represent a third state."4
The example below shows all states:
A scrolling checkbox group can be used when the number of items isn't known in advance or can be customized by the user and space is limited.
On mobile, radio buttons and checkboxes can look different in order to be optimized for touch. On iOS, for example, check marks can be used for mutually exclusive options instead of radio buttons. And checkbox functionality may be indicated by a toggle switch instead.