Build Assets
UI Component
Checkbox Group
Multi-select input where users can choose any number of options simultaneously.
Platform: bothTags: checkbox, form, multi-select, boolean, input
Purpose
Allows zero, one, or multiple selections from a visible list. Use for multi-select form fields. Use a single checkbox for standalone boolean (agree to terms, enable feature). Distinguish from radio buttons: checkboxes = multiple allowed, radios = one only.
Anatomy
- Group label: 14px semibold above the options
- Checkbox: 16×16px square, 4px radius, 2px border
- Checked state: filled accent background, white checkmark
- Indeterminate state: horizontal dash for "some selected" (parent in nested groups)
- Item label: 14px to the right, clickable
- Optional description: 13px secondary below label
- Select all: optional item at top that checks/unchecks all
States
- Unchecked: empty square with grey border
- Checked: accent fill, white ✓
- Indeterminate: accent fill, white — (dash)
- Focused: visible focus ring
- Disabled: 40% opacity
- Error: red border on all options
Tokens
spacing
checkboxSize: 16pxlabelGap: 8pxitemGap: 10px
Do
- Use for any scenario where 0, 1, or many selections are valid
- Make the full row (checkbox + label) clickable
- Show a "Select all" option when the list is long
- List the most relevant options first
Don't
- Use checkboxes when only one option can be selected — use radios
- Use a single checkbox for a choice that needs explanation — use a toggle
- Nest more than 2 levels of checkboxes
- Submit a form silently when checkboxes change — require explicit submit
Accessibility
- role="group" with aria-labelledby on the container
- Each checkbox: <input type="checkbox"> — not a div
- Indeterminate state: input.indeterminate = true (JS)
- Tab moves between checkboxes; Space toggles