laif-ds/dist/agent-docs/components/RadioGroup.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # 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`.