Components
Checkbox.
Checkboxes let users select one or more options from a list. Each can be checked (selected) or unchecked (unselected), giving users direct control over their choices.
Some checkboxes support an intermediate (indeterminate) state, shown with a dash or shaded box. This indicates a partial selection - often used on parent items when child items have mixed selections. It helps users understand the selection is not fully applied.
Anatomy
Size
Checkbox size scales with surrounding text. The 16px medium size is the Sprout default.
Do's & Don'ts
Your favourite fruit?
Do
Use for multiple selections from a group
Any allergies?
Don't
Don't use checkboxes when only one choice is allowed - use radio buttons
Do
Leave opt-in boxes unchecked by default unless a safe default is truly obvious
Don't
Don't pre-check options that benefit the product at the user's expense
Spec
Checkbox size16x16px (medium), 12x12px (small), 20x20px (large)
Checkbox radius2px