## Radio Cards (S—082)

Selectable option cards with a title, detail and price; the radio ring fills and the card border tightens.

- URL: https://sundaeui.dev/components/radio-cards
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/radio-cards.json`
- Tags: plan, form, radio, shipping, select, cards

Bigger hit targets than radio buttons, with room for a description and a trailing value such as a price or ETA.
Selecting fills the ring with a springy dot and draws the card outline in the foreground colour. Arrow keys move the selection like native radios.

### Usage

```tsx
import { RadioCards } from '@/components/sundae/radio-cards'

<RadioCards />
```

### Props

- `options` (`{ value: string; title: string; detail?: string; aside?: string }[]`, required): Cards.
- `value / defaultValue` (`string`): Selection.
- `onValueChange` (`(v: string) => void`): Called on change.
- `label` (`string`): Group label.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Shipping speed, plan choice, payment method.

### When not to use

- Long option lists: use a select.

### Accessibility

- role="radiogroup" with role="radio" cards and roving tabindex.
- Arrow keys select the previous / next card.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ↑ / ↓: Previous / next option