<Toggle id="notifications" label="Enable notifications" checked={enabled} onChange={setEnabled} size="md" />

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

<Toggle id="toggle" label="Disabled" checked disabled onChange={() => {}} />

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="" checked={s[key]} onChange={() => setS(p => ({ ...p, [key]: !p[key] }))} />
        </div>
      ))}
    </div>
  );
}