# RadioGroup

## Overview

Set of mutually exclusive options with accessible keyboard navigation. Includes an item component styled for DS tokens.

---

## Subcomponents & Props

- **RadioGroup**: Root container (Radix RadioGroup Root props)
  - `value`, `defaultValue`: controlled/uncontrolled
  - `onValueChange(value: string)`: change handler
  - `orientation`: `"horizontal" | "vertical"` (default `"vertical"`)
  - `disabled`: `boolean`
  - `required`: `boolean`
  - `name`: `string`
- **RadioGroupItem**: Individual radio control (Radix Item props)
  - `value`: `string`
  - `disabled`: `boolean`

---

## Behavior

- **Keyboard**: Arrow keys move focus; Space/Enter selects.
- **Validation styles**: `aria-invalid` triggers error ring/border.
- **Accessibility**: Pair with `Label` using `htmlFor` and `id`.

---

## Examples

### Default

```tsx
import { useState } from "react";
import { Label, RadioGroup, RadioGroupItem } from "laif-ds";

export function PlanSelector() {
  const [plan, setPlan] = useState("startup");
  return (
    <RadioGroup value={plan} onValueChange={setPlan} className="space-y-4">
      <div className="flex items-start space-x-3">
        <RadioGroupItem value="startup" id="startup" className="mt-1" />
        <div className="grid gap-1">
          <Label htmlFor="startup" className="font-medium">
            Startup
          </Label>
          <p className="text-d-muted-foreground text-sm">Fino a 10 utenti</p>
        </div>
      </div>
      <div className="flex items-start space-x-3">
        <RadioGroupItem value="business" id="business" className="mt-1" />
        <div className="grid gap-1">
          <Label htmlFor="business" className="font-medium">
            Business
          </Label>
          <p className="text-d-muted-foreground text-sm">Fino a 100 utenti</p>
        </div>
      </div>
    </RadioGroup>
  );
}
```

### Disabled

```tsx
import { Label, RadioGroup, RadioGroupItem } from "laif-ds";

export function DisabledRadios() {
  return (
    <RadioGroup defaultValue="option1" disabled className="space-y-2">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option1" id="disabled1" />
        <Label htmlFor="disabled1" className="text-d-muted-foreground">
          Opzione 1
        </Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option2" id="disabled2" />
        <Label htmlFor="disabled2" className="text-d-muted-foreground">
          Opzione 2
        </Label>
      </div>
    </RadioGroup>
  );
}
```

---

## Notes

- **Deprecated?** In some projects a higher-level `AppRadioGroup` may be preferred. Check your project conventions.
- **A11y**: Always link `Label` to `RadioGroupItem` via `htmlFor`/`id`.