Checkbox β
Checkboxes allow users to enter data by selecting one or more option.
Usage guidelines β
When to use β
Checkboxes are most commonly used in forms, in filter menus, or before a submission (e.g. to agree to terms and conditions). In particular:
- Use checkbox when more than a single option in a group of items can be selected (or none).
- A checkbox can also be used as a standalone option (e.g. to agree to terms and condition before a submission).
When not to use β
- Do not use if only one option in a group of items can be selected. Use Radio select instead.
- Do not use if the selection has to be made between two distinct and opposite states, such as "On" and "Off". Use Switch instead.
Writing guidelines β
Labels:
- Checkboxes always include a label. Although the length of the label can vary according to the context, always keep it concise and direct.
- Frame labels positively, e.g. βI want to receive updatesβ instead of βI don't want to receive updatesβ (if applies).
Capitalization and case: Write labels in sentence case and without punctuation.
Text overflow: In case of overflow, text wraps to another line.
Specifications β
Anatomy β
- Checkbox input: Indicates wether an option is selected or not and its state. Checkbox is generally unselected by default.
- Checkbox label: Describes the option to select or unselect.
Size β
Checkboxes come in one size.
Styling β
Checkbox is available for both dark and light theme.
Two styling variants are available: βShapeβ and βOutlinedβ. Take into account factors such as contrast with the background and balance with other elements of the UI when choosing the variant to use.
Styling for this component also depends on whether items are selected, unselected or indeterminate. This last state variants is to be used when a checkbox contains nested checkboxes, some of which are selected, and some unselected. (Read Checkbox Group for detailed information)
Behavior β
Positioning β
Checkboxes are most often found in forms but can also be part of filter menus or tables, or used as standalone elements.
Alignment β
Checkboxes ar always aligned to the left of te label.
Interaction β
Apart from being selected, unselected or indeterminate, checkboxes come in five possible states: inactive hover, focused, disabled and error.
To select o deselect a option, simply press on the input or label.
Accessibility guidelines β
Make sure there is enough contrast between selection controls color and the background.