# Radio Group

Radio options for picking one choice from a list, as simple rows or cards. The chosen dot lights up with a soft glow while the previous choice fades.

> Primitive · Free · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add radio-group
```

## Import

```tsx
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group/radio-group";
```

## Variants

- `delivery` — Delivery windows: `npx @lumioui/cli add radio-group-delivery`
- `payment` — Plan picker: `npx @lumioui/cli add radio-group-payment`

## Props

### RadioGroup

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `string` | Controlled value. Omit with defaultValue for uncontrolled use. |
| `defaultValue?` | `string` | Uncontrolled initial value. |
| `onValueChange?` | `(value: string) => void` | — |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |

### RadioGroupItem

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `string` | — |
| `label?` | `string` | — |
| `icon?` | `IconName` | Leading icon in the option row. |
| `subtitle?` | `string` | Secondary text under the label. |
| `leading?` | `React.ReactNode` | Custom leading node (brand mark, colour tile, artwork). Wins over `icon`. |
| `trailing?` | `React.ReactNode` | Trailing node on the row's right edge (price, badge). |
| `indicatorPosition?` | `"leading" | "trailing"` | Put the ring on the trailing edge instead of the leading one — a  settings-list layout where the row content leads and the control follows. |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | Custom content rendered next to the ring when `label` is absent. |
| `surface?` | `"plain" | "card"` | "card" draws the option as a bordered row whose border and accent wash  crossfade on pick and whose ring keeps a faint light. Default "plain". |

Source: https://lumioui.com/components/radio-group