# Radio group

> Radios as a list or as choice cards, with arrow-key navigation.

Component · Free · https://lodeui.com/components/radio-group

## When to use

- One choice from a few options that need descriptions, like plans or shipping speed.

## When not to use

- Short labels: a segmented control is more compact.
- Long lists: use a select.

## Installation

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

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { RadioGroup } from "@/components/ui/radio-group";

export function Shipping() {
  return (
    <RadioGroup
      aria-label="Shipping"
      variant="cards"
      defaultValue="standard"
      options={[
        { value: "standard", label: "Standard", description: "3–5 days · Free" },
        { value: "express", label: "Express", description: "1–2 days · $12" },
      ]}
    />
  );
}
```

## API reference

### RadioGroup

Radios as a list or as choice cards.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| options | `readonly { value: T; label; description?; disabled? }[]` | – | Choices. |
| value / defaultValue / onValueChange | `T` | – | Controlled or uncontrolled. |
| variant | `"list" \| "cards"` | `"list"` | Plain radios or bordered cards. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / ↓ / ← / → | Move and select |
| Tab | Enter or leave the group |

## Accessibility

- role="radiogroup" with role="radio" items and roving tabindex.
- Disabled options are skipped.

## Motion

- The dot scales in on select.

## Responsive behavior

- Cards stack; put them in a grid for wider screens.

## Performance

- Static markup.

## Notes for AI

- Always pass aria-label or a visible group label.

## Related

- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.
- [Checkbox](https://lodeui.com/components/checkbox) — A checkbox whose tick draws itself, with an indeterminate state.
- [Select](https://lodeui.com/components/select) — A pill trigger with a springy menu, typeahead, and full keyboard support.