supabase/apps/design-system/registry/default/example/field-switch.tsx

import { Switch } from 'ui'
import {
  Field,
  FieldContent,
  FieldLabel,
  FieldDescription,
} from 'ui/src/components/shadcn/ui/field'

export default function FieldSwitch() {
  return (
    <div className="w-full max-w-md">
      <Field orientation="horizontal">
        <FieldContent>
          <FieldLabel htmlFor="2fa">Multi-factor authentication</FieldLabel>
          <FieldDescription>
            Enable multi-factor authentication. If you do not have a two-factor device, you can use
            a one-time code sent to your email.
          </FieldDescription>
        </FieldContent>
        <Switch id="2fa" />
      </Field>
    </div>
  )
}