∴ 30 days of Design System • Yellow ∴ Day 14 ∴
Checkboxes allow multiple selections from a set of options.
Checkboxes may be nested to show a hierarchy of selections. Checking a parent will automatically activate and check all children. Unchecking a parent checkbox will deactivate and uncheck all children. If a group contains a mix of checked and unchecked children, the parent will show an indeterminate state. Use the Tree component if you would like collapsable and expandable nested checkboxes.
Checkbox interaction states are enabled, hovered, focused, disabled, and error. Checkbox selection states are checked, unchecked and indeterminate. Checkboxes can be configured to display checked, unchecked, or disabled by default. When using checkboxes, there should be no action that the user cannot undo by checking the box again. For example, it’s okay to use checkboxes for filtering but not for deletion.
- Always provide a label.- Write labels in sentence case.
- Do not use punctuation in labels or after checkbox fields.
- Keep labels short so users can check quickly and confidently.
- Write labels as statements that the checked state makes true and the unchecked state makes false.
- Title a checkbox group if the content of a group of checkboxes is not immediately apparent.
- Both the checkbox and label should trigger selection.
- See the form component for spacing guidance when grouping.
Design System • Yellow Figma file ↓https://lnkd.in/eV_2UjuK
I would love to hear your feedback.
Please share your thoughts with me.
