How to build an accessible RadioCard in React

Each card is a <label> wrapping a native <input type="radio"> and RadioCardGroup applies role="radiogroup" with an aria-label, so selection, arrow-key navigation, and label association come from the platform rather than custom click handling.

When to use a RadioCard

• Single-select from a few options where each choice needs a title plus supporting description (plans, tiers, shipping methods)
• Selection UIs where a larger, more prominent click target improves clarity over a plain radio

When not to use it

• Plain text options with no description — use Radio for a lighter footprint
• A compact inline switch between a few modes — use SegmentedControl
• Too many options to render as cards — use Select

Keyboard interactions

Role radiogroup, verified at WCAG 2.2-AA.

• ArrowDown
• ArrowUp
• Space

Common mistakes

Avoid: <RadioCard ... /> rendered standalone without RadioCardGroup

Prefer: <RadioCardGroup name="plan" label="Plan"><RadioCard value="pro" title="Pro" /></RadioCardGroup>

RadioCard reads its name, selected value, and change handler from RadioCardGroup context; outside a group it has no shared name and cannot enforce single-selection

Example

<RadioCardGroup name="plan" defaultValue="pro" label="Plan">
  <RadioCard value="free" title="Free" description="For hobbyists" />
  <RadioCard value="pro" title="Pro" description="For professionals" />
  <RadioCard value="team" title="Team" description="For teams" />
</RadioCardGroup>

See the full RadioCard reference →