The checkbox is a UI element that allows users to choose any number of items from a selection set – zero, one, or more.
Checkboxes are used in lists, notes, to mark a completed activity. Each checkbox is independent and gives the user the possibility of checking and unchecking each box. They appear in the form of square or rectangular shapes and have two states – checked or unchecked. When the checkbox is selected, it is filled with a corresponding symbol – whether it is a checkmark, a solid dot, or other relevant icons. These serve as visual confirmation to users that their selection has been done.
Types of Checkboxes in UI Design
Single Checkbox
It appears in the form of square or rectangular shapes and has two states – checked or unchecked. When the checkbox is selected, it is filled with a corresponding symbol – whether it is a checkmark, a solid dot, or other relevant icons. These serve as visual confirmation to users that their selection has been done.
Checkbox groups are a collection of checkboxes where you can add more information regarding the checkboxes without adding visual clutter. When separated into cards, checkboxes with additional information will make users distinguish between the options.
Use in forms when a user can choose one or more options from a selection set.
Use on desktop or mobile screens to turn an item on and off.
Use to present a section with sub-selections.
Use when the user has to agree to terms and conditions.
If you want users to select only one item, choose a Radio Button instead of a Checkbox.
If you have a single checkbox, it functions similarly to a Toggle Switch. When a Switch is triggered, it will immediately change its state, but a checkbox marks the state (checked or unchecked) and needs to be submitted. Use checkboxes in lengthy forms or lists or when the user has to explicitly confirm the choice before proceeding.
When selected, checkboxes can instantly activate the action requested or might require the confirmation of a user to activate the state. In the case of multiple checkboxes, each checkbox functions independently within a list, and selecting other checkboxes does not have any effect on the status of the previous one.
States
Visually, checkboxes can have three states: checked, not-checked, or indeterminate.
The checked status represents a user selected a specific item and appears with a corresponding symbol. The not-checked status indicates that a user has not selected this item and appears unfilled. The indeterminate status displays that there is a section with sub-selections and often appears with a horizontal dashed line in the center.
Layout
Checkboxes can have two layouts: single or group. Use single checkboxes when the user has to turn an item on and off or when the user has to agree to terms and conditions. Use group checkboxes in forms when users can choose one or more options from a selection set or within a section with sub-selections.
Anatomy
Question: The question users must answer;
Selected Checkbox/Checkboxes: The selected option/s;
Checkboxes: Other options that have not been selected;
Labels: The content representing a possible answer.
Content
The labels of a checkbox should be short and clear so that users can easily scan through the text. Unless necessary, stay away from full sentences or complicated phrases that require multiline items. Grouping options will also increase readability and scannability.
List items in a logical order – for example, largest to smallest, or vice versa. Only list alphabetically if items can’t be compared – for example, “Cheese, Lettuce, Tomato”.
Use the Checkbox UI Element in Your UI/UX Designs With uinkits
Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find checkboxes, checkbox groups and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!
So, get your uinkits package and start designing now!
