Checkbox cards

Accessibility

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.

Checkbox Cards / API and Development

Code Block / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats

Checkbox cards

Accessibility

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.

Checkbox Cards / API and Development

Code Block / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats