Checkbox
A checkbox is a squared box that, when
clicked or tapped, can enable or disable a feature, confirm an option, or
select multiple items from a list. Whenever there is a list of selectable
items, this component allows our users to choose two or more of them in an
easy way.
Use Cases
- Whenever the system requires confirmation from a user on an option.
- When a list has multiple items and the user is able to choose more than one of them.
HTML
Do's & Dont's
Take advantage of space
Checkbox lists can be very populated and, as our systems can work
for different screen sizes, there can be a lot of blank space vs. a
lot of content side-to-side.
Always consider the amount of options in order to find the best way to stack them both vertically and horizontally.
Always consider the amount of options in order to find the best way to stack them both vertically and horizontally.
Listing Criteria
When a user reads through the options on a list, is easier to be
confused by the amount of text displayed.
Help our users on this task, by sorting the elements alphabetically, numerically or under any other appropiate criteria depending on the business case.
Help our users on this task, by sorting the elements alphabetically, numerically or under any other appropiate criteria depending on the business case.
Avoid too many lists on the same screen
Having too many checkboxes lists on-screen can make users feel
overwhelmed by the amount of options and exhausted by a repetitive
task.
Whenever possible, try to avoid this by exploring other components that can optimize space, interactions and user's time.
Whenever possible, try to avoid this by exploring other components that can optimize space, interactions and user's time.
Alternative and Related components
