RadioCard
Selectable card backed by a native radio input. Use RadioCardGroup for single-select groups.
Category: inputs · WCAG 2.2-AA · radio, card, selectable, form
States
- default
- checked
- disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
hideIndicator | boolean | — | Hide the radio indicator glyph, showing only the card content. |
value | string | — | Radio value. On RadioCardGroup: the controlled selected value |
title | ReactNode | — | Card title |
description | ReactNode | — | Optional description |
disabled | boolean | — | Disables the card |
defaultValue | string | — | RadioCardGroup only: the initially selected value when uncontrolled |
onValueChange | (value: string) => void | — | RadioCardGroup only: called with the value of the card the person selects |
Design tokens
--cascivo-color-accent--cascivo-color-border--cascivo-radius-surface--cascivo-color-active-bg
When to use
- 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
- 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
How to build an accessible RadioCard in React →
Examples
Plan selector
Single-select plan picker
<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>Related components
- Radio — Use for plain text options without descriptions
- CheckboxCard — Use the card pattern when multiple selections are allowed
- SegmentedControl — Use for a compact inline single choice