Switch

import { useState } from "react"
import { Switch } from "@polyui/react/switch"
export function SwitchBasic() {
  const [checked, setChecked] = useState(false)
  return <Switch checked={checked} onCheckedChange={setChecked} />
}

import { useState } from "react"
import { Switch } from "@polyui/react/switch"
import { Label } from "@polyui/react/label"
export function SwitchWithLabel() {
  const [enabled, setEnabled] = useState(false)
  return (
    <div className="flex items-center gap-3">
      <Switch id="notifications" checked={enabled} onCheckedChange={setEnabled} />
      <Label htmlFor="notifications" className="cursor-pointer text-sm">
        {enabled ? "Enabled" : "Disabled"}
      </Label>
    </div>
  )
}

import { Switch } from "@polyui/react/switch"
import { Label } from "@polyui/react/label"
export function SwitchDisabled() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-3">
        <Switch id="d-off" checked={false} disabled />
        <Label htmlFor="d-off" className="text-muted-foreground cursor-not-allowed text-sm">
          Disabled (off)
        </Label>
      </div>
      <div className="flex items-center gap-3">
        <Switch id="d-on" checked={true} disabled />
        <Label htmlFor="d-on" className="text-muted-foreground cursor-not-allowed text-sm">
          Disabled (on)
        </Label>
      </div>
    </div>
  )
}

import { Switch } from "@polyui/react/switch"
import { Label } from "@polyui/react/label"
export function SwitchSizes() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-3">
        <Switch className="h-4 w-7" defaultChecked />
        <Label className="text-sm">Small</Label>
      </div>
      <div className="flex items-center gap-3">
        <Switch defaultChecked />
        <Label className="text-sm">Default</Label>
      </div>
      <div className="flex items-center gap-3">
        <Switch className="h-7 w-12" defaultChecked />
        <Label className="text-sm">Large</Label>
      </div>
    </div>
  )
}

import { useState } from "react"
import { Switch } from "@polyui/react/switch"
export function SwitchForm() {
  const [marketing, setMarketing] = useState(true)
  const [security, setSecurity] = useState(true)
  const [updates, setUpdates] = useState(false)

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between gap-4">
        <div>
          <p className="text-sm font-medium">Marketing emails</p>
          <p className="text-muted-foreground text-xs">Receive emails about new products and features.</p>
        </div>
        <Switch checked={marketing} onCheckedChange={setMarketing} />
      </div>
      <div className="flex items-center justify-between gap-4">
        <div>
          <p className="text-sm font-medium">Security alerts</p>
          <p className="text-muted-foreground text-xs">Get notified about account security events.</p>
        </div>
        <Switch checked={security} onCheckedChange={setSecurity} />
      </div>
      <div className="flex items-center justify-between gap-4">
        <div>
          <p className="text-sm font-medium">Product updates</p>
          <p className="text-muted-foreground text-xs">Receive updates about product changes.</p>
        </div>
        <Switch checked={updates} onCheckedChange={setUpdates} />
      </div>
    </div>
  )
}