RadioCardGroup

Radio group whose options are full-size selectable cards (Radix RadioGroup). Shares size/icon/indicatorSide/showIndicator with every RadioCard through context, so set them once here. Controlled via value/onValueChange, uncontrolled via defaultValue; layout picks a stacked grid or an inline wrap.

Sample swatch

A5 card, ships in 2 days.

Full sheet

1.2 × 2.4 m, made to order.

Usage

import { RadioCard, RadioCardContent, RadioCardDescription, RadioCardGroup, RadioCardGroupProps, RadioCardIcon, RadioCardProps, RadioCardTitle } from "@desk/ui/components/radio-card";

Best practices

Use RadioCardGroup for single-select cards and CheckboxCardGroup for multi-select — a radio group enforces exactly one choice.
Set size/icon/indicatorSide/showIndicator once on the group; each RadioCard reads them from context — don't repeat per item.
Drive selection with value/onValueChange (controlled) or defaultValue (uncontrolled); use layout="inline" for a wrapping row instead of the stacked grid.

Props

RadioCard

Prop	Type	Description
disabled	`boolean`	Whether this radio is disabled
icon	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>>`	Icon to display as indicator (overrides group-level icon)
suffixIcon	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>>`	Icon to display at the end of the card
value(required)	`string`	Value for this radio option (required for RadioGroup)

RadioCardGroup

Prop	Type	Default	Description
icon	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>>`		Icon shown in place of the radio indicator on every item.
indicatorSide	`"end" \| "start"`	`"start"`	Which side the indicator/icon sits on.
layout	`"grid" \| "inline"`	`"grid"`	Stacked grid or inline-wrapping row of cards.
showIconOnlyWhenSelected	`boolean`		Only show icon when item is selected (for selection indicators like Check)
showIndicator	`boolean`	`true`	Render the radio dot indicator.
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`	`"base"`	Card sizing shared with every item.

Also exports

componentRadioCardContent
componentRadioCardDescription
interfaceRadioCardGroupProps
componentRadioCardIcon
interfaceRadioCardProps
componentRadioCardTitle

Composition

Builds on

InputCard, Radio

Used by

ProductSpecificationsSelector