Switch Component

import { SwitchRoot, SwitchControl, SwitchLabel } from '@/components/ui/switch';

// Basic switch
const [enabled, setEnabled] = useState(false);
<SwitchRoot checked={enabled} onCheckedChange={({ checked }) => setEnabled(checked)}>
  <SwitchControl id="switch" />
</SwitchRoot>
<SwitchLabel htmlFor="switch">Enable notifications</SwitchLabel>

// With default checked
<SwitchRoot defaultChecked>
  <SwitchControl id="default-switch" />
</SwitchRoot>

// Disabled
<SwitchRoot disabled>
  <SwitchControl id="disabled-switch" />
</SwitchRoot>

// Different sizes
<SwitchRoot size="sm"> {/* sm, md, lg */}
  <SwitchControl id="size-switch" />
</SwitchRoot>