RadioCards from @prepared911/ui is Radix RadioCards with built-in group semantics, roving focus, and selection. Your job is to label the group, ensure selection state is non-visual, and keep hidden-indicator modes accessible.
What the component handles
Group semantics. Container exposes a group role; cards expose role="radio" with aria-checked.
Arrow-key navigation. Arrow Up/Down/Left/Right move selection between cards.
Read-only mapping.readOnly applies aria-readonly on the root.
What you must provide
Group label. Pair the group with a caption or heading referenced via aria-labelledby.
Non-color selection signaling. When showIndicator={false}, ensure the selected card is distinguishable beyond color—border weight, elevated surface, or a filled chevron.
Read-only explanations. Pair a read-only group with copy explaining why the selection can't change.
Keyboard behavior
Tab moves focus into the group (lands on the selected card or first card).
Arrow keys move selection between cards.
Enter / Space activate the focused card.
Semantics and roles
Group container exposes a grouping role with aria-labelledby or aria-label.
Each card renders as role="radio" with aria-checked reflecting selection.
Known caveats
Description text. Descriptions inside a card should associate with the option via aria-describedby so screen readers announce them as part of the selection.
Pricing or dense metadata. Long numerical content inside cards (prices, tiers) should be announced clearly; consider concise aria-label for the card when the visual emphasizes numbers that read poorly in speech.