CheckboxCardGroup from @prepared911/ui-core is a Radix checkbox-cards primitive that renders each option as a styled card with built-in group semantics. The component handles roving focus and aria-readonly mapping; your job is to provide group context and make selection state non-visual where needed.
What the component handles
- Group semantics. Container exposes a group role; options expose checked state via
aria-checked.
- Read-only mapping.
readOnly applies aria-readonly on the root.
- Lock icon tooltip. The read-only lock icon has a tooltip; state is also reflected programmatically.
- Group label. Pair the group with a caption or heading via
aria-labelledby so screen-reader users know what they're choosing.
- Non-color selection signaling. Selected cards must be distinguishable beyond color—border weight, filled indicator, or both.
- Disabled option explanations. When an option is disabled, include the reason inline or via a tooltip exposed to assistive tech.
- Tab / Shift+Tab move focus into and out of the group.
- Space toggles the focused card.
- Arrow keys move between cards when the group uses roving focus.
- Group container exposes a grouping role with
aria-labelledby when a caption is provided.
- Each card renders as an interactive checkbox with
aria-checked.
- Card density. Large cards on narrow viewports can push content below the fold; ensure the selected state remains visible when cards wrap.
- Description text. If a card includes a description, associate it with the checkbox via
aria-describedby so screen readers announce it as part of the option.
