CheckboxCard and CheckboxCards present multi-select options as tappable cards when each choice benefits from a short description, metadata, or icon. They trade vertical space for scannability—use them when operators compare choices before selecting, not when they flip many flags quickly. Typical dispatch contexts: feature toggles with consequences ("Enable call recording"), onboarding selections, bulk feature enablement with permission notes.
Reset zoom to 100%
When to use
Each option needs a supporting sentence, badge, or icon to disambiguate ("Enable transcript export: writes to the agency S3 bucket").
The set is small to moderate (roughly two to eight items) and operators should see every choice at once.
Selection is additive and independent across cards.
When not to use
Single selection among plans or tiers—use RadioCards or Radio.
Very long lists or frequent toggles—use Checkbox rows or a data table with selection.
Options are simple on/off with no need for explanation—plain Checkbox reduces noise and height.
Composition
A CheckboxCards wraps a set of CheckboxCards. Each card renders a checkbox indicator, a title, an optional description, and optional trailing metadata (icon, badge, price). Horizontal layouts work when viewports are wide; stack on narrow dispatch panels. Use design tokens for spacing—no ad-hoc margins.
Content guidelines
Parallel titles ("Enable call recording", "Enable transcript export"). Short descriptions—one or two lines each—and never duplicate the title in the description.
Call out risky or irreversible consequences in description text, not in a color cue alone.
Localize all strings with formatMessage.
Behavior and states
Indeterminate group state. Reflect partial selection on the group header when product logic permits.
Disabled cards. Explain the reason in description or helper copy—don't rely on the gray styling.
Keyboard. Each card's checkbox is reachable; the full card is a click target for pointer users; focus order matches visual order.
Best practices
Do
Limit the number of cards so operators can compare without scrolling.
Align selection feedback with form-level validation summaries on submit.
Keep titles parallel in grammar and case.
Don't
Embed primary page actions inside cards unless the card itself is the object being acted on.
Mix unrelated settings in one CheckboxCards. Split into sections with headings.
Use cards when a one-line label suffices—prefer plain Checkbox.
Accessibility
The checkbox keeps its programmatic label; descriptions associate via aria-describedby where supported; the card click target toggles selection without trapping keyboard users. See Accessibility for the full contract.