<Toggle id="notif" label="Notifications enabled" checked onChange={setEnabled} />

<Toggle id="dark" label="Dark mode" checked={false} onChange={setDark} />

<Toggle id="t" label="" ariaLabel="Enable notifications" checked onChange={setEnabled} />

<Toggle id="a" label="Enabled (disabled)" checked disabled onChange={() => {}} />
<Toggle id="b" label="Disabled option" checked={false} disabled onChange={() => {}} />

<Toggle id="sm" label="Small" size="sm" checked onChange={set} />
<Toggle id="md" label="Medium" size="md" checked onChange={set} />
<Toggle id="lg" label="Large" size="lg" checked onChange={set} />

<Toggle id="heater" label="Heater" checked pending onChange={write} />

<Toggle id="heater" label="Heater" checked mismatch describedBy="heater-hint" onChange={write} />
<p id="heater-hint">The device reports a different value.</p>

<Toggle id="marketing" label="Marketing emails" description="Receive weekly updates." checked={value} onChange={setValue} />

function Demo() {
  const [s, setS] = useState({ notifications: true, marketing: false });
  return (
    <div className="divide-y border rounded-lg">
      {[{ key: 'notifications', label: 'Push notifications', desc: 'Alerts for new activity' }, ...].map(({ key, label, desc }) => (
        <div key={key} className="flex items-center justify-between px-4 py-3">
          <div>
            <p className="text-sm font-medium">{label}</p>
            <p className="text-xs text-text-secondary">{desc}</p>
          </div>
          <Toggle id={key} label="" ariaLabel={label} checked={s[key]} onChange={() => setS(p => ({ ...p, [key]: !p[key] }))} />
        </div>
      ))}
    </div>
  );
}