Switch

<div className="flex items-center gap-3">
  <Switch id="ligatures" defaultChecked />
  <Label htmlFor="ligatures">Coding ligatures</Label>
</div>

{/* Choice card — whole field is clickable */}
<FieldLabel htmlFor="switch-2fa">
  <Field orientation="horizontal">
    <FieldContent>
      <FieldTitle>Two-factor auth</FieldTitle>
      <FieldDescription>…</FieldDescription>
    </FieldContent>
    <Switch id="switch-2fa" defaultChecked />
  </Field>
</FieldLabel>

{/* Invalid */}
<Field orientation="horizontal" data-invalid>
  <Switch aria-invalid />
</Field>

{/* Size */}
<Switch size="sm" /> <Switch />

{/* Tooltip — wrap the trigger in a hoverable span */}
<Tooltip>
  <TooltipTrigger render={<span className="inline-flex" tabIndex={0} />}>
    <Switch defaultChecked />
  </TooltipTrigger>
  <TooltipContent>Publish to the web</TooltipContent>
</Tooltip>

{/* Icon — flank an icon-only switch with its two states */}
<span className="inline-flex items-center gap-2">
  <List className="size-4" />
  <Switch defaultChecked />
  <LayoutGrid className="size-4" />
</span>