New Design UI/UX
Checkbox
A checkbox is a common UI component used in almost any application on the market. The guidelines of this component are clear, but many times designs don’t provide this info for the developers. This can ultimately make for a poor experience for users. For example, the user must be able to navigate with a keyboard, and the checkbox must be usable with a screen reader.
Apart from desktop devices, you have to think about mobile devices too. You need to consider the size of the checkbox and the space between each element so that the user can easily tap on them.
Anatomy
A checkbox component has a simple anatomy. It consists of an input element, a label, and a sign, which can be one of three options: none, checked, or intermediate state:
In addition, the checkbox can also display an error or helper text to communicate information to the user.
The checkbox size can change depending on the user’s device. Usually, the size for desktops is 24×24 pixels so the user can click it easily and see it clearly. For mobile, the minimum size is usually 44x44px so users can tap it easily.
Checkbox selection states: Selected, not selected, and intermediate
A checkbox has three types of selections associated with it:
- Not selected — When the checkbox isn’t selected
- Selected — When the checkbox is marked with a check icon inside
- Intermediate — This is a situation where the checkbox indicates that some objects are selected and others aren’t. It’s used in a list with hierarchical relationships like a tree view or nested lists
Best practices for checkbox design
Keep it simple
As a designer, you want to make things stand out, and you investigate new, groundbreaking ways to do things.
However, this isn’t the case when you work on checkbox design. This is because this component is a very common one, and many people know how to use it. So, keep things as simple as possible so the users will understand its function quickly.
Arrange checkboxes vertically for better readability
Lists of multiple checkboxes should be organized vertically instead of horizontally because vertical lists are easier to read and scan, allowing users to navigate and find what they search for faster:
Indicate the minimum selection required
If the user has to select a minimum number of elements from a checkbox group, mention it. By doing so, they’ll understand how many elements they must select. This ensures the user knows what to do to complete the task:
Make the label clickable
Clickable labels enable users to select the checkbox more easily because they can click or tap on a larger area:
Make sure the checkbox is contrasted
Test the color contrast, and make sure the screen readers and keyboard navigation work well to ensure all users can use the component easily:
When to use checkboxes
Checkboxes should be used instead of switches if multiple options can be selected from a list.
Checkboxes let users select one or more options from a list. A parent checkbox allows for easy selection or deselection of all items.
If a list consists of multiple options, don't use switches. Instead, use checkboxes. Checkboxes imply the items are related, and take up less visual space.
New Design UI/UX
Checkbox
A checkbox is a common UI component used in almost any application on the market. The guidelines of this component are clear, but many times designs don’t provide this info for the developers. This can ultimately make for a poor experience for users. For example, the user must be able to navigate with a keyboard, and the checkbox must be usable with a screen reader.
Apart from desktop devices, you have to think about mobile devices too. You need to consider the size of the checkbox and the space between each element so that the user can easily tap on them.
Anatomy
A checkbox component has a simple anatomy. It consists of an input element, a label, and a sign, which can be one of three options: none, checked, or intermediate state:
In addition, the checkbox can also display an error or helper text to communicate information to the user.
The checkbox size can change depending on the user’s device. Usually, the size for desktops is 24×24 pixels so the user can click it easily and see it clearly. For mobile, the minimum size is usually 44x44px so users can tap it easily.
Checkbox selection states: Selected, not selected, and intermediate
A checkbox has three types of selections associated with it:
- Not selected — When the checkbox isn’t selected
- Selected — When the checkbox is marked with a check icon inside
- Intermediate — This is a situation where the checkbox indicates that some objects are selected and others aren’t. It’s used in a list with hierarchical relationships like a tree view or nested lists
Best practices for checkbox design
Keep it simple
As a designer, you want to make things stand out, and you investigate new, groundbreaking ways to do things.
However, this isn’t the case when you work on checkbox design. This is because this component is a very common one, and many people know how to use it. So, keep things as simple as possible so the users will understand its function quickly.
Arrange checkboxes vertically for better readability
Lists of multiple checkboxes should be organized vertically instead of horizontally because vertical lists are easier to read and scan, allowing users to navigate and find what they search for faster:
Indicate the minimum selection required
If the user has to select a minimum number of elements from a checkbox group, mention it. By doing so, they’ll understand how many elements they must select. This ensures the user knows what to do to complete the task:
Make the label clickable
Clickable labels enable users to select the checkbox more easily because they can click or tap on a larger area:
Make sure the checkbox is contrasted
Test the color contrast, and make sure the screen readers and keyboard navigation work well to ensure all users can use the component easily:
When to use checkboxes
Checkboxes should be used instead of switches if multiple options can be selected from a list.
- Do : Checkboxes let users select one or more options from a list. A parent checkbox allows for easy selection or deselection of all items.
- Don’t : If a list consists of multiple options, don't use switches. Instead, use checkboxes. Checkboxes imply the items are related, and take up less visual space.
How should the component be used?
What should you avoid?
Clicking anywhere within the header section should trigger the expansion of the accordion. Limiting the interaction to a small icon can create usability issues and make the component harder to interact with. A larger clickable area ensures a smoother and more intuitive user experience.
