Use checkboxes to offer the choice of one or numerous options in the list of a group. The various options proposed in checkboxes are not interdependent.
Use radio buttons to offer the choice of only one option in the list of a group. The radio buttons in a same group are dependent upon each other. Activating one, deactivates the others.
Best practices
- Use selection controls for choices that are frequent and low in number (3 or 4 options).
- Opt for a dropdown menu (single or multiple) when the option list is too significant, or if you have limited space.
- Opt for the Toggle if there is only one option, or an on/off mode of the same value.
- Opt for a vertical layout of the various options so the user takes less time to look for them. Put the elements in a logical order for the user, or in relation to the context.
- Use explicit and concise labels. If more details are necessary, use additional text.
- If it’s possible to have no choice selected, allow the user to uncheck all the options. If that is not possible, it’s better to have an option selected by default.
- If it’s not possible to have all the options in the list, use “Other option” with an associated text field.
Placement
Selection controls are mainly used in forms, but also in filter panels, modals and in tables. Remember the rules for managing groups of checkboxes and radio buttons for the various sections.
Appearance
Two types of selection controls exist: checkboxes and radio buttons. A minimum horizontal and spacing should be respected, and keep a “squeezed effect” to respect the law of proximity (ref. Gestalt’s theory).
Behavior
Selection controls have 4 states: Normal, selected, disabled and disabled selected.
