# Radio group: Cards

> With `variant="card"`, use `RadioGroupCard` for options with more to say. The selection ring slides to the new card while its surface fades in.

Example: https://hextaui.com/docs/radio-group/examples/cards
Component docs: https://hextaui.com/docs/radio-group.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/radio-group-cards.json
```

This adds `components/examples/radio-group/cards.tsx` with the Radio group component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/radio-group/cards.tsx"
import {
  RadioGroup,
  RadioGroupCard,
  RadioGroupCardDescription,
  RadioGroupCardTitle,
} from "@/components/ui/radio-group"

const plans = [
  {
    value: "hobby",
    title: "Hobby",
    price: "Free",
    description: "For side projects and trying things out.",
  },
  {
    value: "pro",
    title: "Pro",
    price: "$20/mo",
    description: "Unlimited projects, analytics and priority builds.",
  },
  {
    value: "team",
    title: "Team",
    price: "$60/mo",
    description: "Everything in Pro, plus roles and audit logs.",
  },
]

export function RadioGroupCards() {
  return (
    <RadioGroup
      variant="card"
      aria-label="Plan"
      defaultValue="pro"
      className="max-w-md"
    >
      {plans.map((plan) => (
        <RadioGroupCard key={plan.value} value={plan.value}>
          <span className="flex items-baseline justify-between gap-3">
            <RadioGroupCardTitle>{plan.title}</RadioGroupCardTitle>
            <span className="text-muted-foreground tabular-nums">
              {plan.price}
            </span>
          </span>
          <RadioGroupCardDescription>
            {plan.description}
          </RadioGroupCardDescription>
        </RadioGroupCard>
      ))}
    </RadioGroup>
  )
}
```

## Props in this example

### RadioGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "card"` | `"default"` | card adds the sliding selection ring. |
| `defaultValue` | `Value` | – |  |

### RadioGroupCard

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Value` | – |  |

## More Radio group examples

- [Horizontal](https://hextaui.com/docs/radio-group/examples/horizontal.md)
- [Form](https://hextaui.com/docs/radio-group/examples/form.md)
- [Disabled and read-only](https://hextaui.com/docs/radio-group/examples/states.md)
- [Controlled](https://hextaui.com/docs/radio-group/examples/controlled.md)
- [Right to left](https://hextaui.com/docs/radio-group/examples/rtl.md)