Checkboxes are UI design elements that allow users to choose any number of items from a selection set – zero, one, or more. Checkboxes are used in lists, and notes, to mark a completed activity. Each checkbox is independent and gives the user the possibility of checking and unchecking each box.
All of us use them, either when marking the grocery list or when selecting an option, checkboxes help us stay more organized. Checkboxes also have the ability to turn selections on and off.
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.
Checkboxes can be used in multiple situations to help the user choose, fill in/out, or complete an action. When using checkboxes you need to be careful when choosing the right colors, to use the appropriate size. And, place the checkboxes where your users will see them best to ensure a good user experience.
- Use in forms when a user can choose one or more options from a selection set. In the world of UI design, forms are elements that gather information from users. Even more so, because they collect useful data for the system, they are crucial parts of digital design. At the same time, forms manage to increase customer usability and experience and contribute to the visual aspect of a page.
- Use on desktop or mobile screens to turn an item on and off. Checkboxes are easy to complete and help create a good user experience. We can see them everywhere on our screens when asking whether or not we want to complete certain tasks.
- Use to present a section with sub-selections.
- Use when the user has to agree to terms and conditions. Think about the little box that appears when entering a new website or app, asking if you agree with the terms or if you accept using cookies.
- 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 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:
- 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 checkboxes 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”.
We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.
“You press the button, we do the rest.” – Kodak.
Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.
Our design system includes UI components, icons, variables, cards, buttons and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!
