Components/Inputs
Checkbox
Checkboxes let people pick any number of options from a list, or confirm a single choice like agreeing to terms
Playground
Playground
Pick a variant, then click the preview to check and uncheck it
Sizes
Sizes
Medium sits next to body text and in forms, Small fits dense tables and lists
States
States
Each state has a disabled twin. Indeterminate only comes from a parent whose children are partly checked
With label
With label
Checkbox-label adds a label, an optional description, badge and link button. Position sets which side the box sits on
Pattern
Select all
Try it: the parent shows Indeterminate while only some children are checked, and checks or clears them all on click
Usage
When to use
Use when
- People can pick any number of options from a list, including none
- A single option needs explicit consent, like accepting terms before signing up
- A parent option controls a group of children, show Indeterminate when only some are on
Avoid when
- Only one option can be picked, use a Radio Group
- The change applies right away, like turning on notifications, use a Switch
- The list is long and people pick one item, use a Dropdown
Guidance
Do and don’t
Write labels as positive statements, so checking the box means yes
Don’t use negative labels that make people uncheck to opt in
Specs