# Radio Group

- Page: <https://kznlabs.github.io/labsUI/components/radio-group>

## Radio Group (`radio-group`, component)

Native radios in a fieldset with a legend: browser arrow keys and form submit, a dot that springs in, optional per-option descriptions, vertical or horizontal.

- Install: `npx @kznlabs/labsui add radio-group`
- Docs: <https://kznlabs.github.io/labsUI/components/radio-group>
- Brings: field, label, use-controllable-state, utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<RadioGroup>` (+ <fieldset> props): Native radios in a fieldset: arrow keys, form submit and labels work as the browser does.
  - `aria-invalid?: boolean`: Indicates the entered value does not conform to the format expected by the application.
  - `defaultValue?: string` = `""`: Value at first render (uncontrolled).
  - `legend?: ReactNode`: Visible group label, rendered as the fieldset's <legend>.
  - `name?: string`: Form field name; generated when omitted.
  - `onValueChange?: (value: string) => void`: Called with the picked item's value.
  - `orientation?: "vertical" | "horizontal"` = `"vertical"`: Stack items or lay them in a row.
  - `value?: string`: Controlled value; pair with `onValueChange`.
- `<RadioGroupItem>`: One option. `children` is its label; `description` adds a muted line under it.
  - `children: ReactNode`: Label.
  - `value: string`: Submitted value.
  - `description?: ReactNode`: Muted line under the label.
  - `disabled?: boolean`: Shown but not selectable.

### Usage

```tsx
<RadioGroup legend="Plan" defaultValue="pro" name="plan"><RadioGroupItem value="free">Free</RadioGroupItem><RadioGroupItem value="pro" description="Unlimited clips">Pro</RadioGroupItem></RadioGroup>
```

### Example: plan-picker.tsx

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

export function PlanPicker() {
  return (
    <RadioGroup legend="Plan" name="plan" defaultValue="pro">
      <RadioGroupItem value="free" description="1 server, 50 clips a month.">Free</RadioGroupItem>
      <RadioGroupItem value="pro" description="10 servers, unlimited clips.">Pro</RadioGroupItem>
    </RadioGroup>
  );
}
```