# Radio cards (goodtabs UI)

A single choice laid out as cards, with a title, description and meta line each.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/radio-cards.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/radio-cards`

## Usage

```tsx
import { RadioCard, RadioCards } from "@/components/ui/radio-cards"

<RadioCards aria-label="Plan" defaultValue="pro" columns={3}>
  <RadioCard value="hobby" title="Hobby" description="For side projects." meta="$0 per month" />
  <RadioCard value="pro" title="Pro" description="For one person." meta="$12 per month" />
</RadioCards>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value, defaultValue, onValueChange | `radix RadioGroup props` |  | Controlled or uncontrolled, on RadioCards. |
| columns | `1 | 2 | 3` | `1` | On RadioCards: columns from the md and lg container widths. |
| value | `string` |  | On RadioCard: the value reported when it is selected. |
| title | `ReactNode` |  | The card's title and the radio's accessible name. |
| description | `ReactNode` |  | One line under the title. |
| meta | `ReactNode` |  | Mono meta line at the bottom, for example a price. |
| icon | `ReactNode` |  | A 16px icon before the title. |
| disabled | `boolean` | `false` | Disables one card. |

## When to use

- One choice from two to six options that each need a line of context: plans, regions, levels
- Checkout and onboarding steps where the choice should read at a glance
- Anywhere a select would hide the differences between the options

## When not to use

- For several choices at once, use checkbox-card
- For more than six options or options without context, use a select or plain radios
- For switching views of the same content, use segmented-tabs

## Notes for agents

- RadioCards is shadcn's RadioGroup, so value, defaultValue, onValueChange, name and required work as in shadcn
- onValueChange is a function: pass it from a client component. defaultValue works from a server component
- Give RadioCards an aria-label; each card names its radio from the title and describes it from the description
- Selected styling targets radix's data-state=checked, so it does not depend on the primitive's own checked classes

Docs: https://ui.goodtabs.co/components/radio-cards