Checkbox
A checkbox is an input control that allows a user to select one or more options from a number of choices.
Section titled “ Design”Variants
Section titled “Variants”
Section titled “ In Practice”Checkboxes should:
Section titled “Checkboxes should:”- Work independently from each other. Selecting one checkbox shouldn’t change the selection status of another checkbox in the list. The exception is when a checkbox is used to make a bulk selection of multiple items.
- Be framed positively. For example, say “Show file path for uploaded data” instead of “Hide file path for uploaded data”.
- Always have a label when used to activate or deactivate a setting.
- Be listed according to a logical order, whether it’s alphabetical, numerical, time-based, or some other clear system.
- Link to more information or include a subtitle as required to provide more explanation. Don’t rely on tooltips to explain a checkbox.
Section titled “ Content guidelines”Labels
Section titled “Labels”- Keep checkbox labels short and descriptive.
- Start all checkbox labels with a capital letter.
- Don’t include punctuation after checkbox labels.
Section titled “ Accessibility”Keyboard support
Section titled “Keyboard support”- Move focus to each checkbox using the tab key (or shift + tab when tabbing backwards).
- To interact with the checkbox when it has keyboard focus, press the space key.