Checkbox
Description
Checkboxes are interactive input elements that allow users to select one or more options from a list of choices. They consist of a small square box and a label, providing users with visual feedback upon selection.
Our checkbox labels are in normal text formatting, or if appropriate small text, but not the usual label text formatting.
Usually, checkboxes need to be preceded by a topic, a question or an explanation. Depending on the structure of the form, this can be in the form of a heading or body text. In rare cases, where only a small amount of text is required, this can also take the form of a label.
Use Cases
- Use checkboxes when users can select more than one option from a list.
- If only one selection is allowed, use radio buttons instead.
Usage
Single and Multiple Selection: Checkboxes can be used for both single and multiple selection scenarios, allowing users to choose from a list of options based on their preferences or requirements.
Clear Visual Representation: Our checkbox ensures to provide clear visual representation of selected and unselected states, with distinct visual cues to indicate user interaction.
Labeling: A descriptive label is mandatory to provide context and clarity about the options being presented. Labels should be concise and descriptive, aiding users in making informed selections. Make sure to either wrap the checkbox inside the label tag, or use the for attribute of the label to associate it with the checkbox. Avoid vague labels like “Enable”—instead, be specific: “Enable email notifications”. Always place the label to the right of the checkbox for readability.
Accessible Interaction: Design checkboxes to be accessible to all users, including those using assistive technologies, by ensuring proper HTML semantics and keyboard navigation support. Users should be able to navigate via Tab and toggle with Space or Enter.
Select All: If users might select many options, offer a "Select All" checkbox. When unchecked, it should deselect all options.
Indeterminate State: If using a "Select All" checkbox, show an indeterminate state (- instead of ✔) when some options are selected but not all.
Grouping: Group related checkboxes together when presenting multiple options within a list or form, facilitating easier comprehension and selection for users.
Defaults: Only pre-check boxes when it's an expected or user-preferred default. Avoid forcing selections that users might not want.
Responsive Design: Ensure that checkboxes are responsive and adapt gracefully to different screen sizes and device types, especially consider enough space for thump operation on mobile devices.
Validation: Integrate validation mechanisms to provide feedback to users if checkboxes are required or if specific selections are mandatory for form submission.
Interaction: The entire label should be clickable, not just the small checkbox.
Example