Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. Checkbox Cards
  5. Usage

Checkbox cards

Usage

Overview
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.
Review tasks
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.
Related Components
  • Checkbox for compact multi-select.
  • Radio cards for mutually exclusive rich choices.
  • Segmented control for a few mutually exclusive modes without cards.
Previous
Checkbox / Accessibility
Next
Checkbox Cards / API and Development
On this page
Overview
When to use
When not to use
Composition
Content guidelines
Behavior and states
Best practices
Accessibility
Related Components