# Radio Group

A radio group where one dot travels to the option you choose instead of blinking, as plain rows or bordered cards with an outline that follows, with full arrow-key control.

- Page and source: https://uibrik.com/components/radio-group
- Install: `npx shadcn@latest add https://uibrik.com/r/radio-group.json`
- Packages (installed by the CLI): motion
- Import: `import { RadioGroup } from "@/components/uibrik/radio-group/radio-group"`

Where to use the Radio Group React component:

- **Plan choice in forms**: Bordered cards with an outline that follows suit choosing a plan or tier. Pairs with [Segmented Control](https://uibrik.com/components/segmented-control).
- **Shipping and payment methods**: One dot travelling to the chosen option makes the selection unmistakable.
- **Single-choice settings**: Full arrow-key control keeps the group accessible. Pairs with [Checkbox](https://uibrik.com/components/checkbox).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | `"cards" \| "list"` | `"cards"` | Plain rows, or a bordered card per option. |
| orientation | `"vertical" \| "horizontal"` | `"vertical"` | A column, or side by side where they fit. |
| size | `"sm" \| "md" \| "lg"` | `"md"` | Ring and text size. |
| duration | `number` | `0.3` | How long the dot takes to travel. |
| disabled | `boolean` | `false` | Grey the group out and ignore input. |
| options | `(string \| { value; label; description?; meta?; icon?; disabled? })[]` |  | Options in order. `meta` sits on the right, e.g. a price. |
| value / onChange | `string / (value) => void` |  | Controlled choice. |
| defaultValue | `string` |  | Choice on mount when uncontrolled. Leave out for none. |
| name | `string` |  | Submits the choice under this name with a surrounding form. |
| label | `string` |  | Names the group for screen readers. |
| className | `string` |  | Classes for the group. |