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 an optional 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.
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.
Accessible Interaction: Design checkboxes to be accessible to all users, including those using assistive technologies, by ensuring proper HTML semantics and keyboard navigation support.
Indeterminate State: Optionally provide an indeterminate state for checkboxes when a group of options has a mix of selected and unselected items, indicating partial selection.
Grouping: Group related checkboxes together when presenting multiple options within a list or form, facilitating easier comprehension and selection for users.
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.
Example