Switch

// apps/docs/examples/ui/switch.tsx'use client';
import {useState} from 'react';
import {  Field,  FieldContent,  FieldDescription,  FieldGroup,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {Switch} from '@workspace/active-ui/components/primitives/switch';
/** * Settings that take effect at once: a switch beside its label and * description, the small size, and a disabled switch. A switch reports its * state with `role="switch"` and `aria-checked`. */export default function SwitchExample() {  const [alerts, setAlerts] = useState(true);  return (    <FieldGroup className="w-full max-w-md">      <Field orientation="horizontal">        <FieldContent>          <FieldLabel htmlFor="switch-alerts">Email alerts</FieldLabel>          <FieldDescription>            {alerts              ? 'You receive an email when a payment fails.'              : 'You receive no emails about failed payments.'}          </FieldDescription>        </FieldContent>        <Switch          id="switch-alerts"          checked={alerts}          onCheckedChange={setAlerts}        />      </Field>      <Field orientation="horizontal">        <Switch id="switch-compact" size="sm" />        <FieldLabel htmlFor="switch-compact">Compact rows</FieldLabel>      </Field>      <Field orientation="horizontal" data-disabled>        <Switch id="switch-sync" disabled defaultChecked />        <FieldLabel htmlFor="switch-sync">          Synchronise with the archive (managed by your administrator)        </FieldLabel>      </Field>    </FieldGroup>  );}