Selector design tips (checkboxes, radio buttons, switches, etc.)

The choice of selectors has never been a pleasant one. We ll take a closer look at the design of the various controls

Read also: Radio buttons, checkboxes and other kinds of selectors

The word “toggle” is a reference to a short knob toggle that alternates between two states each time it is activated. You encounter it whenever you turn on the light.

As for Radio Buttons, the word comes from car radios, which usually have a set of buttons under the dial. It can store station presets mechanically, so the user can switch between them faster. Pressing one of these buttons will cause it to remain at the bottom until the other is pressed.

Checkboxes (flags) – are used when there are one or more independent options, and users can choose any number of options, including none, one or several.

Radio buttons (Radio buttons) – are used when there is a list of two or more mutually exclusive options, and users need to select only one of them.

Toggle switches (Toggle switches or switches) – are used when there are two mutually exclusive options and always have a default value. The selection of the switch takes effect immediately.

Choice chips Is a compact alternative to radio buttons. They contain at least two options, but the user can only choose one.

Multi–select chips Is a compact alternative to checkboxes. Allows users to select multiple options and is mainly used on mobile devices for filtering.

Selection controls have been around for a long time, so we have specific expectations about how they should behave. Here s a simple cheat sheet you can follow to choose the right type for your situation.

States

Checkboxes and radio buttons can be selected or unselected, and toggles can be turned on or off. They all have an on, off, focused and pressed state and a hover state. I know it seems like a lot, but for reliable interaction you need to create all these states.

Don t forget the indeterminate state

This is the state for a checkbox that the user has not interacted with. Its condition is not yet fully determined, hence the name. It was created for the scenario when there is a parent checkbox with several children, some of which are selected and some are not.

Stop misusing switches

Don t create hierarchical structures with toggles. This is visually distracting and can give the false impression that all child options are on / off.

When the selection takes effect immediately, use the switches

The switch is a digital switch. Any effect caused by it must take effect immediately. If this is not the case, it is better to replace the radio button with a checkbox.

Unusual styling can confuse users

Any deviation from what is considered the standard of the platform you are designing for will add an additional cognitive load to users. I often see circular checkboxes that can be easily confused with radio buttons.

Arranging options in a vertical list will help users scan them easily

Left-aligned controls and labels will work best because they are close together. This contributes to the fastest completion time of the interaction and the user makes fewer mistakes. Right-aligned controls have certain advantages for mobile devices because labels and buttons cannot be positioned too far apart. Having a button near the right edge makes it more accessible when holding the device with one hand. In addition, we do not cover the labels with our finger during selection.

Use chips if vertical space is an issue

You must avoid situations where it is difficult to see which control is selected (remember to add white space between buttons and labels). Consider using chips to clearly visually separate the choices.

If possible, use radio buttons instead of dropdowns

Display all options at all times so users can easily compare them, this reduces cognitive load and helps make forms more transparent.

Use dropdowns for multiple or similar options

If the number of options is more than 6-7, you should consider including them in the drop-down list, as users will not be able to remember all the options anyway. The same will apply for predictable, similar, or incremental options. For example, the increase is 10%, 20%, 30%.

Better to have the default radio button selected

Users cannot deselect and reset the radio button after selecting it. If users may need to refrain from making a selection, you should add the “None” radio button. Organize your list of options in a logical order.

Write clear labels, avoid negatives

Avoid situations where users need to check a checkbox to not happened.

Highlight selected options to grab users attention

Visually separate the selected options from the rest, which is especially important when selecting rows in data tables.

Support for group selection and cleaning

Selecting or clearing multiple items at the same time should be easy for users.

Make the clickable areas large enough for reliable interaction

Include both buttons and labels in a larger clickable area. According to Fitts s Law, target size plays an important role. Checkboxes and radio buttons are usually tiny and difficult to click or tap, especially on a mobile phone.