Switch

import { Label, Switch } from "@medway-ui/core";
 
<div className="flex flex-col gap-4">
  <div className="flex items-center gap-3">
    <Switch size="lg" id="s1" />
    <Label size="lg" htmlFor="s1">Airplane Mode</Label>
  </div>
  <div className="flex items-center gap-3">
    <Switch size="md" id="s2" defaultChecked />
    <Label size="md" htmlFor="s2">Enable notifications</Label>
  </div>
  <div className="flex items-center gap-3">
    <Switch size="sm" id="s3" />
    <Label size="sm" htmlFor="s3">Dark mode</Label>
  </div>
</div>

import { Label, Switch } from "@medway-ui/core";
 
<div className="flex flex-col gap-4">
  <div className="flex items-center gap-3">
    <Switch size="lg" disabled id="d1" />
    <Label size="lg" htmlFor="d1">Airplane Mode</Label>
  </div>
  <div className="flex items-center gap-3">
    <Switch size="md" disabled defaultChecked id="d2" />
    <Label size="md" htmlFor="d2">Enable notifications</Label>
  </div>
  <div className="flex items-center gap-3">
    <Switch size="sm" disabled id="d3" />
    <Label size="sm" htmlFor="d3">Dark mode</Label>
  </div>
</div>

import { Label, Switch } from "@medway-ui/core";
import { Sun, Moon, Check, CloseMd, ArrowRightMd, ArrowLeftMd } from "@medway-ui/icons";
 
<div className="flex flex-col gap-4">
  <div className="flex items-center gap-3">
    <Switch 
      size="lg" 
      id="wi1"
      checkedIcon={<Sun />}
      uncheckedIcon={<Moon />}
    />
    <Label size="lg" htmlFor="wi1">Light/Dark mode</Label>
  </div>
  <div className="flex items-center gap-3">
    <Switch 
      size="md" 
      id="wi2"
      defaultChecked
      checkedIcon={<Check />}
      uncheckedIcon={<CloseMd />}
    />
    <Label size="md" htmlFor="wi2">Accept terms</Label>
  </div>
  <div className="flex items-center gap-3">
    <Switch 
      size="sm" 
      id="wi3"
      checkedIcon={<ArrowRightMd />}
      uncheckedIcon={<ArrowLeftMd />}
    />
    <Label size="sm" htmlFor="wi3">Direction</Label>
  </div>
</div>

import { Label, Switch } from "@medway-ui/core";
 
<div className="flex flex-col gap-6">
  <Label block htmlFor="marketing">
    <div className="w-full flex items-center justify-between">
      <div className="flex flex-col gap-1">
        <span className="text-md font-semibold text-primary-foreground">Marketing emails</span>
        <span className="text-gray-foreground-muted text-xs">
          Receive emails about new products, features, and more.
        </span>
      </div>
      <Switch id="marketing" />
    </div>
  </Label>
  <Label block htmlFor="security">
    <div className="w-full flex items-center justify-between">
      <div className="flex flex-col gap-1">
        <span className="text-md font-semibold text-primary-foreground">Security emails</span>
        <span className="text-gray-foreground-muted text-xs">
          Receive emails about your account security.
        </span>
      </div>
      <Switch id="security" defaultChecked />
    </div>
  </Label>
</div>