Selection controls are UI elements or components that allow users to make choices or selections from a set of options. They are used in various user interfaces to enable users to interact with and manipulate data, make decisions, and provide input.
Deciding on the appropriate user interface element, whether it's radio buttons, checkboxes, or toggles, can sometimes be challenging. When you're unsure about the best choice for your specific situation, take into account factors such as the number and nature of the options available, as well as whether there is a clear default value.
Radio Buttons | Checkboxes | Single Checkbox | Toggle Switches | Dropdown Lists | Sliders | |
How many options are available? | Multiple | Multiple | 1 | 1 | Multiple | Multiple |
How many selections can the user make at one time? | 1 | 0-all | 1 (yes or no) | 1 (on or off) | 1 | 1 |
Is there a default option? | Yes | No | Yes | Yes | Yes | No |
How would you describe the choices? | Mutually exclusive | Independent of each other | Mutually exclusive | Mutually exclusive | Mutually exclusive | Mutually exclusive |
When does the selection take effect? | After a user clicks a submit button | After a user clicks a submit button | After a user clicks a submit button | Immediately | After a user clicks a submit button | Immediately |
Selection controls guidlines:
- Use standard visual representation Checkbox: A small square with a checkmark or an X when selected. Radio button: A small circle with a solid circle inside when chosen. Toggle: A rounded rectangle with a switch-like control that can be toggled on or off. Slider: A draggable handle on a horizontal or vertical track, representing a value within a range. Dropdown menu: A downward-pointing arrow that, when clicked, displays a list of selectable options.
- Label margins Ensure an adequate amount of whitespace surrounds your selection controls and labels to avoid overcrowding and enhance readability.
Tip: Too large margins make it hard for users to tell which label corresponds to which selection control, especially if the list of options is long.
- Lay out your lists vertically with one choice per line You can still use a horizontal layout, but your buttons and labels should be arranged so that users can tell without trouble which choice corresponds to which label.
- If possible, use radio buttons rather than drop-down menus Radio buttons reduce cognitive load by displaying all options permanently, enabling easy comparison for users. They are particularly user-friendly for individuals with difficulties in precise mouse movements.
- Make labels actionable Enhance usability by utilizing actionable labels for checkboxes and radio buttons. Actionable labels are clickable, allowing users to activate the selection by clicking anywhere within the label area.
- Write clear labels, avoid negations Avoid situations when users need to tick the box in order for something not to happen.
- Use left-aligned checkboxes and radio buttons Left-aligned controls and labels will work best as they closely positioned to each other. This supports the fastest completion times and fewer mistakes.
- Subhead alignment Subheads should be aligned with radio buttons or checkboxes rather than their labels. It looks better and supports better scannability.
- Label text wrapping When wrapping text, be sure that you keep the same alignment for each line to improve its legibility.
- Control alignment If a checkbox or radio button is accompanied by a multiline label, it’s important to align the checkbox with the top line of the label, rather than the entire label for the best legibility.
👉 Checkboxes vs. Radio Buttons
👉 Selection controls - UI component series
👉 Toggle-Switch Guidelines