npm install @thrivecart/uiyarn add @thrivecart/uipnpm add @thrivecart/uibun add @thrivecart/uiimport { RadioCard, RadioCardItem } from '@thrivecart/ui';Radio cards for selecting a pricing plan
<RadioCard defaultValue="pro" className="max-w-md">
<RadioCardItem value="starter" label="Starter" description="For individuals getting started" />
<RadioCardItem value="pro" label="Pro" description="For growing businesses" />
<RadioCardItem value="enterprise" label="Enterprise" description="For large organizations" />
</RadioCard>The indicator renders a radio dot inside the card. Control its position with indicatorPlacement ('start', 'end'), or hide it with indicator={null}.
Radio indicator at different positions, or hidden
Indicator at end (default)
Indicator at start
No indicator
{/* End (default) */}
<RadioCardItem value="a" label="Option" description="..." />
{/* Start */}
<RadioCardItem indicatorPlacement="start" value="b" label="Option" description="..." />
{/* Hidden */}
<RadioCardItem indicator={null} value="c" label="Option" description="..." />Radio cards with leading icons
<RadioCard defaultValue="pro" className="max-w-md">
<RadioCardItem
value="starter"
icon={<MdRocketLaunch className="size-5 text-icon" />}
label="Starter"
description="Up to 1,000 contacts"
/>
<RadioCardItem
value="pro"
icon={<MdSpeed className="size-5 text-icon" />}
label="Pro"
description="Up to 10,000 contacts"
/>
<RadioCardItem
value="enterprise"
icon={<MdStar className="size-5 text-icon" />}
label="Enterprise"
description="Unlimited contacts"
/>
</RadioCard>Cards in a multi-column grid for layout selection
<RadioCard defaultValue="grid" className="grid-cols-3 max-w-2xl">
<RadioCardItem
value="module"
icon={<MdViewModule className="size-5 text-icon" />}
label="Module"
description="Card-based layout"
/>
<RadioCardItem
value="list"
icon={<MdViewList className="size-5 text-icon" />}
label="List"
description="Detailed list view"
/>
<RadioCardItem
value="grid"
icon={<MdGridView className="size-5 text-icon" />}
label="Grid"
description="Compact grid view"
/>
</RadioCard>Radio cards with additional metadata
<RadioCard defaultValue="card" className="max-w-md">
<RadioCardItem
value="card"
icon={<MdCreditCard className="size-5 text-icon" />}
label="Credit Card"
description="Visa, Mastercard, Amex"
addon={<span className="text-xs text-ink-muted">Processing fee: 2.9%</span>}
/>
<RadioCardItem
value="bank"
icon={<MdAccountBalance className="size-5 text-icon" />}
label="Bank Transfer"
description="Direct ACH payment"
addon={<span className="text-xs text-ink-muted">No fee</span>}
/>
<RadioCardItem
value="paypal"
icon={<MdPayment className="size-5 text-icon" />}
label="PayPal"
description="Pay with PayPal balance"
addon={<span className="text-xs text-ink-muted">Processing fee: 3.4%</span>}
/>
</RadioCard>Disabled radio cards
<RadioCard defaultValue="active" className="max-w-md">
<RadioCardItem value="active" label="Active Option" description="This option can be selected" />
<RadioCardItem value="disabled" label="Disabled Option" description="This option is not available" disabled />
</RadioCard>Keep the number of radio cards manageable. Too many options cause decision fatigue.
When appropriate, pre-select the most common or recommended option.
If options don't need descriptions, use standard RadioGroup instead.
Use either card radios or standard radios within the same form section.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Unique value for the radio item |
label | ReactNode | - | Card title text |
description | ReactNode | - | Card description text |
icon | ReactElement | - | Leading icon element |
addon | ReactNode | - | Additional content below the description |
indicator | ReactNode | null | Default radio dot | Custom indicator element, or null to hide |
indicatorPlacement | 'start' | 'end' | 'end' | Position of the indicator |
disabled | boolean | false | Disable the radio card |
className | string | - | Additional className for the card wrapper |
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Controlled selected value |
defaultValue | string | - | Default selected value (uncontrolled) |
onValueChange | (value: string) => void | - | Callback when selection changes |
className | string | - | Additional className for the group |
aria-checked.role="radiogroup" for the container.