Prepared Docs

Overview

CheckboxCard and CheckboxCardGroup 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.

QA Review

Score calls for quality and compliance.

Supervisor Review

Bypass disputes and finalize reviews.

Radio Dialogue

Monitor and annotate radio channels.

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 RadioCardGroup 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 CheckboxCardGroup 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

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 CheckboxCardGroup. 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.

Checkbox for compact multi-select.
Radio cards for mutually exclusive rich choices.
Segmented control for a few mutually exclusive modes without cards.

Checkbox / Accessibility

Checkbox Cards / API and Development

Overview

QA Review

Score calls for quality and compliance.

Supervisor Review

Bypass disputes and finalize reviews.

Radio Dialogue

Monitor and annotate radio channels.

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 RadioCardGroup 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

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

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 CheckboxCardGroup. Split into sections with headings.
Use cards when a one-line label suffices—prefer plain Checkbox.