# Radio Group

> Single choice among mutually exclusive options.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/radio-group.json`

## Install

```tsx
import { RadioGroup, RadioGroupItem } from "@aspyn-io/kit";
```

### Plan selection

```tsx
<RadioGroup defaultValue="pro">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="starter" id="starter" />
    <Label htmlFor="starter">Starter: $29/mo</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="pro" id="pro" />
    <Label htmlFor="pro">Pro: $89/mo</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="team" id="team" />
    <Label htmlFor="team">Team: $290/mo</Label>
  </div>
</RadioGroup>
```

### Choice cards

Wrap each option in a Label so the whole bordered card is clickable.

```tsx
<RadioGroup defaultValue="pro" className="gap-2">
  <Label
    htmlFor="card-starter"
    className="flex items-center gap-3 rounded-lg border p-4 has-data-[state=checked]:border-primary"
  >
    <RadioGroupItem value="starter" id="card-starter" />
    <span className="font-medium">Starter</span>
  </Label>
  <Label
    htmlFor="card-pro"
    className="flex items-center gap-3 rounded-lg border p-4 has-data-[state=checked]:border-primary"
  >
    <RadioGroupItem value="pro" id="card-pro" />
    <span className="font-medium">Pro</span>
  </Label>
</RadioGroup>
```

### With descriptions

Add helper text per option via aria-describedby.

```tsx
<RadioGroup defaultValue="all">
  <div className="flex items-start gap-3">
    <RadioGroupItem value="all" id="all" aria-describedby="all-desc" />
    <div className="grid gap-1">
      <Label htmlFor="all">Everything</Label>
      <p id="all-desc" className="text-sm text-muted-foreground">
        Email me about all activity.
      </p>
    </div>
  </div>
  <div className="flex items-start gap-3">
    <RadioGroupItem value="mentions" id="mentions" aria-describedby="mentions-desc" />
    <div className="grid gap-1">
      <Label htmlFor="mentions">Mentions only</Label>
      <p id="mentions-desc" className="text-sm text-muted-foreground">
        Only when someone @-mentions me.
      </p>
    </div>
  </div>
</RadioGroup>
```

### Disabled

```tsx
<RadioGroup defaultValue="pro" disabled>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="starter" id="d-starter" />
    <Label htmlFor="d-starter">Starter</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="pro" id="d-pro" />
    <Label htmlFor="d-pro">Pro</Label>
  </div>
</RadioGroup>
```

## Notes

- Arrow keys move selection within the group (Radix roving focus).
- Controlled: value + onValueChange: values map to your API enums (snake_case).