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

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

 # Switch
 
 ## Overview
 
 Accessible on/off toggle built on Radix Switch with DS tokens and smooth thumb slide.
 
 ---
 
 ## Props
 
 Inherits Radix Switch props:
 
 - `checked?`, `defaultChecked?`
 - `onCheckedChange?(checked: boolean)`
 - `disabled?`, `required?`, `name?`, `value?`
 
 ---
 
 ## Example
 
 ```tsx
 import * as React from "react";
 import { Switch } from "laif-ds";
 
 export function ControlledSwitch() {
   const [checked, setChecked] = React.useState(false);
   return (
     <div className="flex items-center gap-2">
       <Switch id="wifi" checked={checked} onCheckedChange={setChecked} />
       <label htmlFor="wifi">Wi‑Fi {checked ? "on" : "off"}</label>
     </div>
   );
 }
 ```
 
 ---
 
 ## Notes
 
 - Track uses `bg-d-primary` when checked and `bg-d-foreground/20` when unchecked.
 - Thumb translation is optimized for a 32px track with 16px thumb.