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

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

 # Checkbox
 
 ## Overview
 
 Accessible checkbox with support for checked, unchecked, and indeterminate states. Keyboard focus styles and disabled state included.
 
 ---
 
 ## Props
 
 ### Checkbox (Root)
 
 | Prop               | Type                                   | Default      | Description                                        |
 | ------------------ | -------------------------------------- | ------------ | -------------------------------------------------- |
 | `checked`          | `boolean \| "indeterminate"`          | `false`      | Current state of the checkbox.                     |
 | `disabled`         | `boolean`                               | `false`      | Disables interactions.                             |
 | `onCheckedChange`  | `(checked: boolean) => void`            | `undefined`  | Called when the state changes.                     |
 | `id`               | `string`                                | `undefined`  | Useful when paired with a label's `htmlFor`.       |
 | `className`        | `string`                                | `""`         | Additional classes for size/layout.                 |
 
 ---
 
 ## Behavior
 
 - **Indeterminate**: Use `checked="indeterminate"` to display a dash indicator.
 - **Focus & invalid**: Visual feedback for focus and invalid states is included.
 - **Labeling**: Pair with `Label` and `htmlFor` for accessible labeling.
 
 ---
 
 ## Examples
 
 ### Default
 
 ```tsx
 import { Checkbox } from "laif-ds";
 import { Label } from "laif-ds";
 
 export function DefaultCheckbox() {
   return (
     <div className="flex items-center gap-2">
       <Checkbox id="terms" />
       <Label htmlFor="terms">Accept terms and conditions</Label>
     </div>
   );
 }
 ```
 
 ### Indeterminate
 
 ```tsx
 import { Checkbox } from "laif-ds";
 import { Label } from "laif-ds";
 
 export function IndeterminateCheckbox() {
   return (
     <div className="flex items-center gap-2">
       <Checkbox id="partial" checked="indeterminate" />
       <Label htmlFor="partial">Partially selected options</Label>
     </div>
   );
 }
 ```
 
 ### Disabled
 
 ```tsx
 import { Checkbox } from "laif-ds";
 import { Label } from "laif-ds";
 
 export function DisabledCheckbox() {
   return (
     <div className="flex items-center gap-2">
       <Checkbox id="disabled" disabled />
       <Label htmlFor="disabled">Accept terms and conditions</Label>
     </div>
   );
 }
 ```
 
 ### Select All Pattern
 
 ```tsx
 import * as React from "react";
 import { Checkbox } from "laif-ds";
 import { Label } from "laif-ds";
 
 export function SelectAllExample() {
   const [items, setItems] = React.useState([
     { id: "item1", label: "Item 1", checked: false },
     { id: "item2", label: "Item 2", checked: true },
     { id: "item3", label: "Item 3", checked: false },
   ]);
 
   const checkedCount = items.filter((i) => i.checked).length;
   const selectAllState =
     checkedCount === 0 ? false : checkedCount === items.length ? true : ("indeterminate" as const);
 
   const handleSelectAll = () => {
     const newChecked = selectAllState !== true;
     setItems(items.map((i) => ({ ...i, checked: newChecked })));
   };
 
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-2 border-b pb-2">
         <Checkbox id="select-all" checked={selectAllState} onCheckedChange={handleSelectAll} />
         <Label htmlFor="select-all">Select All ({checkedCount}/{items.length})</Label>
       </div>
       <div className="space-y-2 pl-6">
         {items.map((item) => (
           <div key={item.id} className="flex items-center gap-2">
             <Checkbox
               id={item.id}
               checked={item.checked}
               onCheckedChange={(checked) =>
                 setItems(items.map((i) => (i.id === item.id ? { ...i, checked: checked as boolean } : i)))
               }
             />
             <Label htmlFor={item.id}>{item.label}</Label>
           </div>
         ))}
       </div>
     </div>
   );
 }
 ```
 
 ---
 
 ## Notes
 
 - **Indicator**: A check icon is shown when `checked=true`, a dash for indeterminate.
 - **Disabled**: Applies reduced opacity and disables pointer events.