Pick me! Pick me! No, pick me! In today’s cheat sheet we will be looking at selectors and how they differ. Unlike most of my other cheat sheets, this will focus on two components (radio buttons and checkboxes) side by side for easier comparison — while also comparing them to a few others.
In this cheat sheet we will cover the following:
- What selectors are
- Anatomy of checkboxes and radio buttons
- What is the difference between radio buttons and checkboxes
- Common styles of selectors
- States
- Rules for label text
- When you should use them
- Accessibility checklist
- Closing thoughts
A selector is an input field where the user has to select one (or more) options, unlike a text field where the user has free rein. Selectors, like Lady Gaga’s hairstyles, come in all different shapes and forms. Dropdowns, checkboxes, toggles, sliders, and more are all different types of selectors, yet they look nothing like each other. The main functional difference between these types of selectors is how many options the user can pick: one or more.
In a perfect world, where there was no more starvation, animal poaching, greenhouse gases, or crime, I would start a petition to change radio buttons to ‘single selectors’ and checkboxes to ‘multi-selectors’. I think they describe what they are much better, but, alas, these legacy names are too ingrained and we are probably stuck with them.
While we will look at various selector types in this cheat sheet, we will focus on radio buttons and checkboxes. Below is their anatomy.
Note: There is some discrepancy in which of the parts above are referred to as the ‘radio button’/’checkbox’. Sometimes people use ‘radio button’/’checkbox’ to refer to the label and the selector together, while other times they use the terms to refer to the selector alone. I prefer the latter.
Radio buttons and checkboxes are very similar, except for a few key differences. The primary difference is that with radio buttons you can only select one item, while with checkboxes you can select any number. I was going to write out a table to explain this, but didn’t because a) it sounded boring, b) Medium doesn’t allow you to insert tables, so I had a better idea:
POP QUIZ! Yay! Let’s see who can get 100% — winner gets to buy me an apple and call me ‘ma’am’.
ONE: In the standard checkbox component, how many items are you allowed to select (unless otherwise stated)?
- 1
- 3
- Unlimited
- 0
TWO: What is the shape of a radio button’s selector?
- Square
- Circle
- Hexagon
- Triangle
THREE: If you want to make a UI where a user can select multiple toppings to put on an ice cream, you would use:
- Radio buttons
- Checkboxes
FOUR: If you want to make a UI where a user can select what type of bank account they would like to open, you would use:
- Radio buttons
- Checkboxes
FIVE: If you wanted to create a ‘subscribe to our emailer’ selector, which selector type would you use?
- A radio button
- A checkbox
SIX: In the below image, which is a radio button?
- A
- B
ANSWERS:
ONE: 3. Unlimited
TWO: 2. Circle
THREE: 2. Checkboxes
FOUR: 1. Radio buttons
FIVE: 2. A checkbox
SIX: 1. A
WOOOOO you passed! (I hope.)
These are some of the common styles of checkboxes and radio buttons that you will come across in your field trip through the internet.
Standard style (radio buttons/checkboxes)
The most standard style of checkboxes and radio buttons uses buttons with ‘checkmarks’ or filled-in circles. I tend to prefer buttons with a checkmark UNLESS you are dealing with educational quizzes (see below).
Quiz button style (radio buttons/checkboxes)
When a user is answering questions in a quiz, we have to make sure of two things: 1) that they can clearly see what answers they are choosing, 2) that they don’t get confused about when they get feedback on their answer.
If you look at the example below, you can see that the ‘checkmark’ can get confusing — it looks like those answers are correct, even though it hasn’t been graded yet.
Basic image style (radio buttons/checkboxes)
While this style of selector can give the user a better idea of what they are selecting, I seldom use them as the image will always be too small to see clearly anyway.
Image in a grid style (single/multi-select)
I prefer this style to the basic image style as you are able to make the images a lot bigger, and it also just looks better.
I first became aware of this style in Buzzfeed’s quizzes. (If you have never heard of Buzzfeed’s quizzes — a whole new world of procrastination awaits you.) Here they just show the image and have no text. If you go with that layout, pretty please make sure that you have alt text for users who use a screen reader or have a poor internet connection.
Multi-level checkboxes
Multi-level checkboxes are needed if the items need to be split up into groups. Also, notice that if only a few of the child items are selected, the parent category is only partially selected.
One of the trickier UI elements around this is that the top item (parent) acts both as a selector and an accordion. So, if you click the label does it select the selector or does it open/close the accordion? I can’t find any definitive research on which way is the best, as this is a bit of an unusual pattern, but in the past, I have made the label part of the accordion and not the selector. Let me know if you have any suggestions for how to deal with this dilemma in the comments.
Forced selection
Sometimes you will only want to allow your users to select a certain number of an item. To force this, if the user clicks one more than the selected amount, their oldest selection will deselect and the recent selection will update.
Button style (single/multi-select)
This style allows you to stack a whole lot of different items on top of each other, which means you get to save space and have more options. Because this pattern isn’t that common, I suggest that you let the user know how many options they can select. While there is no reason to not use this for single selectors, I have never seen it in the wild.
This style is very common when asking the user to choose multiple content tags (although they may not be aware of it). In the below example, Apple Music is asking users to select their favourite genres, which will in turn recommend songs and artists based on the user’s selection.
Toggle (single select)
The toggle is most often used for settings and allows the user to choose between yes/no options.
On mobile, the toggle itself usually sits on the far right while the label sits on the far left. This is to make it easier for the right thumb to change options.
Checkboxes and radio buttons have to change their state/appearance so that users know they have been selected. We need to add these little visual cues to nudge the user in the right direction using patterns that they already know and understand.
Default/active
This is the starting state of selectors. This state indicates to the user that they can click the items in the questions.
Inactive
When the inactive state is set, the user won’t be able to interact with the options. It is seldom that a user will encounter this state unless the product rules specify it.
Hover
Like buttons, selectors should indicate to the users that they are interactive or clickable. Usually this is done with highlighting the background of the item on hover. It also indicates what area of the items is clickable. If you hover off it, it should revert to its original state.
Don’t be a n00b tip: Touch devices don’t have a hover state.
Focus/highlighted
The focus or highlighted state is usually indicated with a blue halo around the clickable item. You can see this for yourself by tabbing through an interface — which is the same thing someone who is poor sighted or had poor motor skills would do. It is seldom that a user will encounter this state, unless before someone clicks ‘enter’ to select an item.
Pressed
This is the state where the user holds down their mouse/finger and the item indicates back to the user that it is being clicked.
Selected
Once the user has clicked an item, the UI should let them know. As mentioned earlier, radio buttons can only have one selected item, while checkboxes can have multiple, depending on business rules.
Fail feedback
With free text input, it is possible for a user to make a typo, etc. However, since the options in a selector are predetermined, there should only be one type of fail feedback: the ‘incomplete’ type, which the user will only receive if they click the ‘submit’ button before they finished filling out the form. For checkboxes, this will only be necessary if the question forces them to choose one or more items.
There is only one hard and fast rule for selector labels: be consistent.
- Make sure that the case on every selector label is the same (sentence case, title case, etc.)
- Make sure that all items either end in a period or not.
- Try to make sure that all the items are either a sentence, phrase, or word. Try to avoid some options being sentences and others being single words. Using a combination makes it tricky to decide on what case and punctuation to use.
When should you use radio buttons or checkboxes? This relies entirely on what question you are asking. If you want your users to select multiple options, use checkboxes. If you want your users to select only one option, use radio buttons (or another alternative).
When to use a radio button
I have four rules about when, or when not to, use radio buttons. They are:
1. When you only want the user to select one item
If you want the user to select more than one item then you should rather use checkboxes.
2. If you have fewer than six options
Depending on your design rules, if there are more than five or six items to choose from, rather use a dropdown. Yes, yes, I know that they are clunky, but they save a lot of space in your design.
That being said, if space isn’t an issue, maybe consider using radio buttons instead — particularly if you are designing for mobile. I have seen it work well for fast food deliveries.
If you are interested in learning more about dropdowns, check out my previous cheat sheet here:
3. You want to force a selection of one
When you select an item in a radio button list, you can’t deselect it. You can select something else and change your selection, but you can’t un-answer the question once you have selected an answer.
4. If the question only has two options that are yes/no
If your question is ‘Would you like to receive notifications?’, ‘Play background music?’ etc., then rather use a toggle. They take up much less space, are cleaner, and — because they are a newer selector type — they have the added bonus of being trendy.
POST PUBLISH UPDATE:
5. If you want your users to click ‘save’ to implement the option
If you are in a settings page, or in a place where you want to allow the user to umm and err about their options before they click the big green save button - rather use radio buttons (or checkboxes). However, if you want your setting to happen immediately (turning wi-fi on/off) then rather use a toggle.
This suggestion comes from Thomas Veit, so go give them some claps in the comments below :)
POST PUBLISH UPDATE:
6. If your option’s labels are short, consider using a multiple-choice toggle
You very seldom see this cutie out in the wild, but it is a delight when you do. Multi-choice toggles merge the best of radio buttons and toggles into this little guy. Compact, neat and user friendly. I would only suggest using this if your labels are short — otherwise, it could get a bit hairy on mobile.
This suggestion came from Thomas Weitz, so give them some claps in the comments below :)
When to use checkboxes
I have two rules about when to use checkboxes, and here they are:
1. When you want the user to be able to select multiple options or none at all
If you want your user to be able to add multiple toppings to their pizza, this is the selector for you. The user could select all, some, or none of the checkboxes.
2. Single item
Follow-up pop quiz: Why is the ‘I have read the terms and conditions’ always a checkbox and not a radio button? Surely it makes sense for it to be a radio button as it is better for ‘yes/no’ type questions?
Answer: Because you can deselect it. Unlike a radio button with only one item, where you can’t deselect it. If you click it, soz for you: it is now selected FOREVER.
You’ve done it! You have completed designing your selectors, and it is time to ship it off to the development team. But wait! Have you checked that they are accessible first?
- Does your selector meet the WCAG AAA colour contrast standards? Some designers use the AA standards instead, but I’m far too paranoid for that. My current favourite contrast checker is WebAIM.
- Are your options/items bigger than 44px for touch screens? (Differing reports use 36px.)
- Is there more than 8px between each option/item?
- Is the label/question always visible?
- Do the relevant fields have helpful feedback text? (E.g. “Please complete this question”)
If you want to read more, check out: https://webaim.org/techniques/forms/controls
After this cheat sheet, I am going to move away from ‘form’ UI patterns and move onto other types of UI patterns. BUT if you have any requests to look into any other form field types let a girl know in the comments.
Stay safe out there Medium friends, the world is a crazy, crazy place right now.
