Selection controls — UI component series
Making choices never was more satisfying. A detailed look at checkboxes, radio buttons, and toggles design.
The word “toggle” is a reference to a switch with a short handle that alternates between two states each time it is activated. You encounter it every time you “switch” on the lights.
As for “Radio Buttons” the word comes from the car radios that as common practice had a set of buttons under the dial that could mechanically store station presets, so the user switch between stations faster. Pressing one of these buttons would cause it to stay down until another was pressed.
Checkboxes — are used when there are one or many independent options and users may select any number of choices, including none, one, or several.
Radio buttons — are used when there is a list of two or more options that are mutually exclusive and users must select only one of them.
Toggle switches — are used when are two mutually exclusive options and always have a default value. Toggles selection takes effect immediately.
Choice chips - are a compact alternative to radio buttons. Containing at least two options, choice chips represent a single selection that users can make.
Multi-select chips — are a compact alternative to checkboxes. Allow users to select multiple options and are primarily used for filtering on mobile.
Selection controls have been used in user interfaces for a long time, so we have formed strong expectations on how they should behave. Here is a simple cheat sheet that you can follow to choose the right type for the right situation.
States
Checkboxes & radio buttons can be selected or unselected, and Toggles can be Off or On. All of them have enabled, disabled, hover, focused, and pressed states. And I know it looks like a lot), but it's good to create all those states for reliable interaction.
Don't forget about the indeterminate state
State for a checkbox that is neither checked nor unchecked. The state is not fully determined, hence the name- indeterminate. Created to handle a scenario when there's a parent checkbox that has multiple children, some of which are selected and others are not.
Stop misusing toggle switches
Do not create hierarchal structures with toggles. It's more visually distracting and can create a false impression that all child options are On/Off.
Use toggles when selection will immediately take effect
A toggle switch is digital on/off switch. Any effect triggered by the toggle switch should immediately take effect. If that is not the case better to replace toggle switch with a single checkbox.
Un-orthodox styling can confuse users
Any deviation from what is considered standard for the platform you design will add additional cognitive load for users. I often see circular checkboxes that can be easily confused with radio buttons.
Presenting options in the vertical list will help users easily scan them
Left-aligned controls and labels will work best as they closely positioned to each other. This supports the fastest completion times and fewer mistakes. Right-aligned controls have some benefits on mobile, as labels and buttons, can't get too far apart. Having a button close to the right edge makes it more easily reachable when holding the device in one hand. Also, we are not obscuring the labels with a finger during selection.
Consider chips if vertical space is an issue
You should prevent a situation when it’s really difficult to see which control is selected ( make sure to space the buttons and labels). Consider using chips to clearly visually separate options.
If possible, use radio buttons rather than drop-down menus
Making all options permanently visible so that users can easily compare them reduces cognitive load and help forms be more transparent.
Use dropdowns for numerous or similar options
If the number of options is more than 6–7 you should consider putting them in the dropdown as users anyway will not be able to keep all of them in mind. The same will apply to predictable, similar, or incremental options like (zoom — 10%, 20%, 30% ..).
It is better to have a selected radio button by default
Users cannot deselect and set the radio button back to its original state once one has been selected. If users might need to refrain from making a selection, you should provide a radio button labeled “None.” Structure the list of options in a logical order, and harness the power of suggestion.
Write clear labels, avoid negations
Avoid situations when users need to tick the box in order for something not to happen.
Highlight selected options to draw users attention
Visually differentiate selected options from others, especially important for rows selection in data tables.
Support bulk select and clear
Selecting or clearing multiple items at once should be effortless for users.
Make clickable areas large enough for reliable interaction
Include both buttons and labels in the generous clickable/tappable area. According to Fitts’s Law the size of the target plays an important role. Checkboxes and radio buttons are generally tiny and can be tricky to click or tap, especially on mobile.
You may also like
Components series — a detailed look on the components we use every day and how best to design them.
