Checkbox - UI Element

The checkbox is a UI element that allows users to choose any number of items from a selection set – zero, one, or more.

‍

‍

1. 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.
‍

‍

2. Checkbox Groups

‍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.

‍

• Behavior

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

1. Question: The question users must answer;
2. Selected Checkbox/Checkboxes: The selected option/s;
3. Checkboxes: Other options that have not been selected;
4. 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”.

‍

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!