CheckboxCards from @prepared911/ui 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.
What you must provide
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.
Keyboard behavior
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.
Semantics and roles
Group container exposes a grouping role with aria-labelledby when a caption is provided.
Each card renders as an interactive checkbox with aria-checked.
Known caveats
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.