CheckboxCard
Multi-selectable card backed by a native checkbox. Use multiple independent CheckboxCards for multi-select scenarios.
Category: inputs · WCAG 2.2-AA · checkbox, card, selectable, form
States
- default
- checked
- disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Card title |
description | ReactNode | — | Optional description |
checked | boolean | — | Controlled checked state |
defaultChecked | boolean | — | Uncontrolled default |
onCheckedChange | (checked: boolean) => void | — | Change callback |
disabled | boolean | — | Disables the card |
Design tokens
--cascivo-color-accent--cascivo-color-border--cascivo-radius-surface
When to use
- Multi-select where each option needs a title and supporting description (feature toggles, add-ons)
- Presenting selectable options as larger, scannable click targets rather than a dense checkbox list
When not to use
- A simple labelled boolean in a form — use Checkbox
- Choosing exactly one option from a set — use RadioCard or Radio
How to build an accessible CheckboxCard in React →
Examples
Feature toggles
Multi-select feature toggles
<div style={{ display: 'grid', gap: 12 }}>
<CheckboxCard title="Automated backups" description="Daily snapshots, 30-day retention" defaultChecked />
<CheckboxCard title="Monitoring" description="Metrics + alerting" />
<CheckboxCard title="Audit log" description="Requires Team plan" disabled />
</div>