Checkbox Guidelines

A checkbox is a control that allows users to select multiple options from a list.

Styles

There are 2 common visual styles for checkboxes that you can bring to your wireframes, namely simple and simple with an icon.

There are also 4 different structural styles of checkboxes that you can consider as well, namely simple, hierarchical, horizontally grouped, or stand-alone.

Simple

The simple checkbox style is the most common type. This basic pattern is what you’ll probably use most of the time due to its ease of use.

Simple with an icon

The addition of an icon can make a checkbox list appear more attractive and inviting. However, this style is not always practical: the icons necessary for your options may not be readily available.

Hierarchy

When you want your users to select multiple options from a very long list, consider grouping them into different categories. Doing this allows your user to select a whole group or an individual option.

Horizontally grouped checkboxes

Grouping checkboxes horizontally allows users to read options from left to right as well as from top to bottom. This style is especially popular when you have long lists for them to go through.

Stand-alone checkbox

A stand-alone checkbox is usually used at the end of a form to confirm that the user agrees to certain conditions.

---

Labels

The labels in a checkbox component let the user know what they are supposed to do and what option best suits them.

Top label

The top label, or question label, should be short and to the point. Like most other input fields, the more direct it is, the easier it is for the user to fill out the form.

Option labels

When it comes to making labels for your options, the main thing to keep in mind is consistency. If you do something one way for one, you should do it that way for all. Here are a few rules you can set up to keep consistency:

1. Length. Decide if you want to use single words, phrases, or sentences.
2. Periods. If you’re using sentences and phrases, decide if you’re going to end on a period or not.
3. Capitalization. Decide on what case your label will be in. Your options are: Title Case, Sentence case, lower case, and (the less advisable) ALL CAPS.

Option label order

When deciding on what order to have your checkboxes in, you can consider some of the following options:

• Alphabetically or numerically. E.g., Apples, Bananas, Kiwis, Pears.
• Price. For items with a price attached to them, you may want to order them from the most to least expensive or vice versa. E.g., Bacon – $2, Avo – $1, Chili – $0.50.
• Scale. When selecting from a list of items that deal with size or magnitude, you can scale from biggest to smallest or vice versa. E.g., yearly, quarterly, monthly, weekly.
• Popularity. You may want to put your best sellers or most common choices at the top of the list.
• Profitability. You may want to arrange options in order from the most to the least profitable for the product or company.
• Shuffle. This method, often used in quizzes, will randomly shuffle the options each time to ensure that learners don’t cheat.

---

States

Checkboxes change their state or appearance so that users know what to do. These little visual cues nudge the user in the right direction.

Normal

This is the starting state of checkboxes; as you can see in the example below, no options are selected.

Selected

Once the user has clicked on an option, the checkbox’s square will get a check mark, indicating it is selected.

Disabled

When the disabled state is set, the user won’t be able to interact with the options. This will usually be because they have to select something else first.

Disabled and selected

An option can be disabled and selected if it was preselected for the user and they aren’t able to change their selection without altering another control.

Indeterminate

The indeterminate state is when a ‘parent’ checkbox is neither on nor off. This indicates that one of its children is selected.

Disabled and indeterminate

The disabled and indeterminate state is when an option is disabled and it has a selected child.

---

Feedback

Feedback lets the user know that they haven’t filled out the form correctly or that their answer is wrong.

Incomplete (optional)

A standard checkbox control allows the user to have none of the options selected. However, if your business rules require the user to choose a minimum amount of options, you have to make it clear in the label.

If the user clicks the ‘submit’ button without selecting the minimum amount of options, you will need to give them that feedback.

Incomplete stand-alone

Most stand-alone checkboxes that deal with legalities require you to select them before completing the form. Usually, the ‘submit’ button will be disabled, and when you try to click it, it will make the checkbox red and give a warning indicator.

Feedback in a quiz

There is another type of fail feedback associated with checkboxes in the context of online learning or quizzes. This type of feedback lets the learner know if they got the question right or wrong after they’ve clicked the ‘submit’ button.

---

Best practices

There are a few best practices when it comes to checkboxes. Overall, you want to make the already laborious task of filling out forms as easy and intuitive as possible.

When to use checkboxes

Despite their similarities, there are some instances where it is better to use checkboxes than radio buttons or multi-select dropdowns.

When you should use checkboxes:

• If you want users to select multiple options. This is especially true if they get charged per extra option selected (for example, pizza toppings).
• If you want to give your user the option of selecting nothing.

Checkboxes vs. radio buttons

Radio buttons are very similar to checkboxes. Unlike checkboxes, they only allow you to select one option at a time.

When you should use radio buttons:

• If you only want your user to select one option.

Checkboxes vs. dropdowns

Compared to multi-select dropdowns, checkboxes are much easier for users to see and use in an interface. However, if you're short on screen real estate, you can consider using a multi-select dropdown to save space.

When you should use multi-select dropdowns:

• You have limited space.
• The question isn’t required or critical.

State the minimum/maximum amount of items required

Depending on your business rules, your user may be required to select a minimum or maximum amount of options. Regardless of how many they need to choose, you have to let them know what the limit is in the label.

Consider adding the words ‘Select all that apply’

In some instances, it’s recommended that you have the words ‘select all that apply’ to let users know that they can select more than one option. Often users confuse radio buttons and checkboxes, so having that extra prompt can help them distinguish which is which. It's imperative that you do this for online quizzes or tests.

Defaults for stand-alone checkboxes

You will usually find stand-alone checkboxes at the end of a form. A stand-alone checkbox is an independent control that isn’t part of a larger group. The 2 most common types are:

1. Opt-in promotional and marketing checkboxes.
2. Legal checkboxes.

Opt-in promotional checkboxes

Opt-in promotional checkboxes are usually used to allow the user to sign up for marketing emails. Though this is technically a dark pattern, it’s common for these to be preselected, making this option the default and requiring the user to unselect it if they so wish. Please be considerate of what the user expects or wants when preselecting checkboxes.

Legal checkboxes

Legal checkboxes usually appear on registration screens and force the user to agree to the rules and regulations before signing up. In the context of publishing content on a site, a content creator may be required to select a checkbox to affirm that their content is not plagiarized or offensive.

By default, these checkboxes are unselected/normal and require the user to select them before completing their user journey.

Checkboxes on mobile devices

Checkboxes on websites are usually treated like bullet points. However, on mobile, we have to think about how users interact with their phones and how we can make using these controls easier for them.

When a right-handed person (approximately 90% of the population) uses a phone, it is easier for their thumb to reach the controls on the screen’s right-hand side. Knowing this, consider putting the checkbox ‘squares’ in reach of the user’s thumb.

---

Variations

You can choose to use other variations of checkboxes to make your designs easier to create.

Controls included in Balsamiq

Balsamiq offers a wide range of pre-made controls. Use the ‘Quick add’ tool to find the one you need, then drop it directly into your wireframe.

Checkbox group: Using a checkbox group will save you time when creating your options. In contrast to using individual controls, you can use a single control and update them all from the same list. You will need to keep note of the formatting syntax used to create these options.

---