diff --git a/packages/shared/src/components/fields/Switch.module.css b/packages/shared/src/components/fields/Switch.module.css
index c23c2f78dd8..256be269eed 100644
--- a/packages/shared/src/components/fields/Switch.module.css
+++ b/packages/shared/src/components/fields/Switch.module.css
@@ -1,61 +1,95 @@
+/*
+ * Toggle / Switch — daily.dev design system.
+ * Track 44x24 (rounded-8), knob 20x20 (rounded-6) with a 2px inset.
+ * On press the knob squeezes to the track center (12x12) for tactile feedback,
+ * then snaps to the destination side on release.
+ */
+
 .track {
-  will-change: background-color, opacity;
-  transition: background-color 0.1s linear, opacity 0.2s linear;
+  background: var(--theme-surface-active);
+  will-change: background-color;
+  transition: background-color 0.12s linear;
+}
+
+.hoverLayer {
+  opacity: 0;
+  background: var(--theme-surface-hover);
+  will-change: opacity, background-color;
+  transition: opacity 0.15s linear, background-color 0.12s linear;
+}
+
+.focusRing {
+  opacity: 0;
+  border-color: var(--theme-surface-focus);
+  transition: opacity 0.1s linear;
 }
 
+/* Knob is solid primary white in both themes and states. */
 .knob {
-  will-change: transform, background-color;
-  transition: background-color 0.1s linear, transform 0.2s linear;
+  background: theme('colors.raw.salt.0');
+  transform: translateX(0) scale(1);
+  transform-origin: center;
+  will-change: transform, background-color, opacity;
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+    background-color 0.12s linear, opacity 0.12s linear;
+}
+
+.children {
+  color: var(--theme-text-secondary);
+  transition: color 0.12s linear;
+}
+
+.switch:hover .hoverLayer {
+  opacity: 1;
 }
 
-.switch {
-  &:hover .knob {
-    background: var(--theme-text-primary);
-  }
+.switch:hover .children,
+.switch:active .children {
+  color: var(--theme-text-primary);
+}
 
-  &:hover input:checked ~ * .knob {
-    background: theme('colors.raw.cabbage.20');
-  }
+/* Keyboard focus */
+.switch input:focus-visible ~ * .focusRing,
+.switch input:focus-visible ~ * .hoverLayer {
+  opacity: 1;
+}
 
-  &:active {
-    background: none;
-  }
+.switch input:focus-visible ~ .children {
+  color: var(--theme-text-primary);
+}
 
-  & input:checked {
-      & ~ * .track {
-        background: theme('colors.raw.cabbage.50');
-        opacity: 0.24;
-      }
+/* Checked (on) — solid brand track, white knob (à la iOS/Chrome) */
+.switch input:checked ~ * .track {
+  background: var(--theme-accent-cabbage-default);
+}
 
-      & ~ * .knob {
-        transform: translateX(100%);
-        background: theme('colors.raw.cabbage.40');
-      }
+.switch input:checked ~ * .hoverLayer {
+  background: color-mix(in srgb, var(--theme-surface-invert), transparent 88%);
+}
 
-      & ~ .children {
-        color: var(--theme-text-primary);
-      }
-  }
+.switch input:checked ~ * .knob {
+  transform: translateX(20px) scale(1);
 }
 
-:global(.light) .switch {
-   & input:checked ~ * .knob {
-    background: theme('colors.raw.cabbage.80');
-  }
+.switch input:checked ~ .children {
+  color: var(--theme-text-primary);
+}
+
+/* Press — knob squeezes toward the track center for both states */
+.switch:active .knob,
+.switch:active input:checked ~ * .knob {
+  transform: translateX(10px) scale(0.6);
+}
 
-  &:hover input:checked ~ * .knob {
-    background: theme('colors.raw.cabbage.60');
-  }
+/* Disabled — bump the off track so the toggle stays visible; knob unchanged */
+.disabled .track {
+  background: var(--theme-surface-disabled);
 }
 
-@media (prefers-color-scheme: light) {
-  :global(.auto) .switch {
-    & input:checked ~ * .knob {
-     background: theme('colors.raw.cabbage.80');
-   }
+.disabled .knob {
+  opacity: 0.32;
+}
 
-   &:hover input:checked ~ * .knob {
-     background: theme('colors.raw.cabbage.60');
-   }
- }
+.disabled .children {
+  color: var(--theme-text-disabled);
 }
diff --git a/packages/shared/src/components/fields/Switch.tsx b/packages/shared/src/components/fields/Switch.tsx
index 5f417fb9594..ee77f2fc0b4 100644
--- a/packages/shared/src/components/fields/Switch.tsx
+++ b/packages/shared/src/components/fields/Switch.tsx
@@ -1,13 +1,30 @@
 import type {
   ForwardedRef,
   InputHTMLAttributes,
+  PointerEvent as ReactPointerEvent,
+  MouseEvent as ReactMouseEvent,
   ReactElement,
   ReactNode,
 } from 'react';
-import React from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
 import styles from './Switch.module.css';
 
+// Knob slides this many px between the off and on positions (matches the CSS).
+const KNOB_TRAVEL = 20;
+// Knob center when translateX is 0 (2px track inset + 10px half knob width).
+const KNOB_CENTER_OFFSET = 12;
+// How far the pointer must move before a hold turns into a drag.
+const DRAG_THRESHOLD = 3;
+
+interface DragState {
+  pointerId: number;
+  startX: number;
+  startChecked: boolean;
+  moved: boolean;
+  lastPos: number;
+}
+
 export interface SwitchProps extends InputHTMLAttributes<HTMLInputElement> {
   children?: ReactNode;
   className?: string;
@@ -37,21 +54,123 @@ function SwitchComponent(
   }: SwitchProps,
   ref: ForwardedRef<HTMLLabelElement>,
 ): ReactElement {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const trackRef = useRef<HTMLSpanElement>(null);
+  const dragRef = useRef<DragState | null>(null);
+  // A drag ends with a synthetic click we must swallow so it doesn't re-toggle.
+  const suppressClickRef = useRef(false);
+  const [dragX, setDragX] = useState<number | null>(null);
+
+  const handlePointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLSpanElement>) => {
+      if (disabled || event.button !== 0) {
+        return;
+      }
+      dragRef.current = {
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startChecked: !!checked,
+        moved: false,
+        lastPos: checked ? KNOB_TRAVEL : 0,
+      };
+      trackRef.current?.setPointerCapture(event.pointerId);
+    },
+    [disabled, checked],
+  );
+
+  const handlePointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLSpanElement>) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+      if (
+        !drag.moved &&
+        Math.abs(event.clientX - drag.startX) < DRAG_THRESHOLD
+      ) {
+        return;
+      }
+      const rect = trackRef.current?.getBoundingClientRect();
+      if (!rect) {
+        return;
+      }
+      drag.moved = true;
+      const pos = Math.min(
+        KNOB_TRAVEL,
+        Math.max(0, event.clientX - rect.left - KNOB_CENTER_OFFSET),
+      );
+      drag.lastPos = pos;
+      setDragX(pos);
+    },
+    [],
+  );
+
+  const endDrag = useCallback(
+    (event: ReactPointerEvent<HTMLSpanElement>) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+      dragRef.current = null;
+      if (trackRef.current?.hasPointerCapture(event.pointerId)) {
+        trackRef.current.releasePointerCapture(event.pointerId);
+      }
+      if (drag.moved) {
+        const target = drag.lastPos >= KNOB_TRAVEL / 2;
+        // Swallow the click that fires after a drag so we toggle only once.
+        suppressClickRef.current = true;
+        if (target !== !!checked) {
+          if (inputRef.current) {
+            inputRef.current.checked = target;
+          }
+          onToggle?.();
+        }
+      }
+      // Drop the inline transform so the knob snaps to its side with the CSS transition.
+      setDragX(null);
+    },
+    [checked, onToggle],
+  );
+
+  const handlePointerCancel = useCallback(() => {
+    if (!dragRef.current) {
+      return;
+    }
+    dragRef.current = null;
+    setDragX(null);
+  }, []);
+
+  const handleClick = useCallback(
+    (event: ReactMouseEvent<HTMLLabelElement>) => {
+      if (suppressClickRef.current) {
+        event.preventDefault();
+        suppressClickRef.current = false;
+      }
+    },
+    [],
+  );
+
+  const knobStyle =
+    dragX !== null
+      ? { transform: `translateX(${dragX}px) scale(0.6)`, transition: 'none' }
+      : undefined;
+
   return (
-    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     <label
       className={classNames(
         className,
         'group relative flex items-center',
-        disabled
-          ? 'pointer-events-none cursor-not-allowed opacity-32'
-          : 'cursor-pointer',
+        disabled ? 'cursor-not-allowed' : 'cursor-pointer',
         styles.switch,
+        disabled && styles.disabled,
       )}
       ref={ref}
+      onClick={handleClick}
     >
       <input
         {...props}
+        ref={inputRef}
         disabled={disabled}
         id={inputId}
         name={name}
@@ -61,22 +180,32 @@ function SwitchComponent(
         className="absolute h-0 w-0 opacity-0"
       />
       <span
-        className={classNames(
-          'relative block',
-          compact ? 'h-4 w-8' : 'h-5 w-10',
-        )}
+        ref={trackRef}
+        className="relative block h-6 w-11 touch-none select-none"
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={endDrag}
+        onPointerCancel={handlePointerCancel}
       >
+        <span
+          className={classNames('absolute inset-0 rounded-8', styles.track)}
+        />
+        <span
+          className={classNames(
+            'absolute inset-0.5 rounded-6',
+            styles.hoverLayer,
+          )}
+        />
         <span
           className={classNames(
-            'absolute bottom-0 left-0 top-0 my-auto w-full bg-theme-overlay-quaternary',
-            compact ? 'h-2.5 rounded-3' : 'h-3 rounded-4',
-            styles.track,
+            'pointer-events-none absolute inset-0 rounded-8 border-2 border-solid',
+            styles.focusRing,
           )}
         />
         <span
+          style={knobStyle}
           className={classNames(
-            'absolute left-0 top-0 bg-text-tertiary',
-            compact ? 'h-4 w-4 rounded-3' : 'h-5 w-5 rounded-6',
+            'absolute left-0.5 top-0.5 h-5 w-5 rounded-6',
             styles.knob,
           )}
         />
@@ -84,8 +213,8 @@ function SwitchComponent(
       {children ? (
         <span
           className={classNames(
-            'ml-3 font-bold text-text-tertiary',
-            defaultTypo && 'typo-footnote',
+            'ml-3 font-medium antialiased',
+            defaultTypo && (compact ? 'typo-footnote' : 'typo-callout'),
             styles.children,
             labelClassName,
           )}
diff --git a/packages/storybook/stories/components/fields/Switch.stories.tsx b/packages/storybook/stories/components/fields/Switch.stories.tsx
new file mode 100644
index 00000000000..0c8ee165acc
--- /dev/null
+++ b/packages/storybook/stories/components/fields/Switch.stories.tsx
@@ -0,0 +1,319 @@
+import React, { useId, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Switch } from '@dailydotdev/shared/src/components/fields/Switch';
+import type { SwitchProps } from '@dailydotdev/shared/src/components/fields/Switch';
+import { LegacySwitch } from './legacy/LegacySwitch';
+
+const figmaUrl =
+  'https://www.figma.com/design/C7n8EiXBwV1sYIEHkQHS8R/daily.dev---Design-System?node-id=796-69&m=dev';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Fields/Switch',
+  component: Switch,
+  parameters: {
+    layout: 'fullscreen',
+    design: {
+      type: 'figma',
+      url: figmaUrl,
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    checked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    compact: {
+      control: 'boolean',
+      description:
+        'Small (footnote) label when true, medium (callout) when false',
+    },
+    children: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+/**
+ * A self-contained, interactive toggle that owns its checked state so the real
+ * hover / focus / press / toggle behaviour can be reviewed by clicking around.
+ */
+const InteractiveToggle = ({
+  variant,
+  ...props
+}: Omit<SwitchProps, 'inputId' | 'name' | 'onToggle'> & {
+  variant: 'legacy' | 'new';
+}) => {
+  const id = useId();
+  const [checked, setChecked] = useState(Boolean(props.checked));
+  const Component = variant === 'legacy' ? LegacySwitch : Switch;
+
+  return (
+    <Component
+      {...props}
+      inputId={id}
+      name={id}
+      checked={checked}
+      onToggle={() => setChecked((prev) => !prev)}
+    />
+  );
+};
+
+// --- Layout primitives for the comparison page ----------------------------
+
+const Page = ({ children }: { children: React.ReactNode }) => (
+  <div className="flex min-h-screen flex-col gap-10 bg-background-default p-8 text-text-primary">
+    {children}
+  </div>
+);
+
+const PageHeader = () => (
+  <header className="flex flex-col gap-2">
+    <span className="typo-footnote uppercase tracking-wide text-text-quaternary">
+      Design system · Review
+    </span>
+    <h1 className="typo-title1 font-bold">
+      Toggle / Switch — before &amp; after
+    </h1>
+    <p className="max-w-2xl typo-body text-text-tertiary">
+      A side-by-side review of the previous toggle and the redesigned toggle
+      from Figma. Every toggle on this page is live — hover, press, and tab to
+      focus to verify the states, animations, and interactions. Use the theme
+      toolbar to check light and dark.
+    </p>
+  </header>
+);
+
+const Section = ({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}) => (
+  <section className="flex flex-col gap-4">
+    <div className="flex flex-col gap-1">
+      <h2 className="typo-title3 font-bold">{title}</h2>
+      {description && (
+        <p className="max-w-2xl typo-callout text-text-tertiary">
+          {description}
+        </p>
+      )}
+    </div>
+    {children}
+  </section>
+);
+
+const Card = ({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) => (
+  <div
+    className="flex flex-col gap-3 rounded-12 border border-border-subtlest-tertiary bg-surface-float p-4"
+    style={{ width: '16rem' }}
+  >
+    <span className="typo-caption1 uppercase tracking-wide text-text-quaternary">
+      {label}
+    </span>
+    <div className="flex flex-1 items-center">{children}</div>
+  </div>
+);
+
+const comparisonGrid = { gridTemplateColumns: '200px 1fr 1fr' } as const;
+
+/** A "previous" vs "new" pair for the same set of props. */
+const ComparisonRow = ({
+  title,
+  caption,
+  switchProps,
+}: {
+  title: string;
+  caption?: string;
+  switchProps: Omit<SwitchProps, 'inputId' | 'name' | 'onToggle' | 'variant'>;
+}) => (
+  <div
+    className="grid items-center gap-4 rounded-12 border border-border-subtlest-tertiary p-4"
+    style={comparisonGrid}
+  >
+    <div className="flex flex-col gap-0.5">
+      <span className="typo-callout font-bold">{title}</span>
+      {caption && (
+        <span className="typo-caption1 text-text-tertiary">{caption}</span>
+      )}
+    </div>
+    <div className="flex items-center justify-center border-r border-border-subtlest-tertiary py-2">
+      <InteractiveToggle variant="legacy" {...switchProps} />
+    </div>
+    <div className="flex items-center justify-center py-2">
+      <InteractiveToggle variant="new" {...switchProps} />
+    </div>
+  </div>
+);
+
+const ComparisonHeader = () => (
+  <div className="grid gap-4 px-4" style={comparisonGrid}>
+    <span />
+    <span className="text-center typo-footnote font-bold uppercase tracking-wide text-text-tertiary">
+      Previous
+    </span>
+    <span className="text-center typo-footnote font-bold uppercase tracking-wide text-accent-cabbage-default">
+      New design
+    </span>
+  </div>
+);
+
+// --- Stories ---------------------------------------------------------------
+
+/**
+ * The headline comparison: previous design on the left, redesign on the right,
+ * across every static state. Hover / focus / press are live on each toggle.
+ */
+export const Comparison: Story = {
+  render: () => (
+    <Page>
+      <PageHeader />
+
+      <Section
+        title="States"
+        description="Each row renders the same props on the previous toggle and the new toggle so you can compare them directly."
+      >
+        <div className="flex flex-col gap-3">
+          <ComparisonHeader />
+          <ComparisonRow
+            title="On"
+            caption="checked"
+            switchProps={{ checked: true, children: 'Toggle label' }}
+          />
+          <ComparisonRow
+            title="Off"
+            caption="unchecked"
+            switchProps={{ checked: false, children: 'Toggle label' }}
+          />
+          <ComparisonRow
+            title="On · no label"
+            switchProps={{ checked: true, 'aria-label': 'Toggle' }}
+          />
+          <ComparisonRow
+            title="Off · no label"
+            switchProps={{ checked: false, 'aria-label': 'Toggle' }}
+          />
+          <ComparisonRow
+            title="Disabled · on"
+            switchProps={{
+              checked: true,
+              disabled: true,
+              children: 'Toggle label',
+            }}
+          />
+          <ComparisonRow
+            title="Disabled · off"
+            switchProps={{
+              checked: false,
+              disabled: true,
+              children: 'Toggle label',
+            }}
+          />
+          <ComparisonRow
+            title="Medium label"
+            caption="compact={false}"
+            switchProps={{
+              checked: true,
+              compact: false,
+              children: 'Toggle label',
+            }}
+          />
+        </div>
+      </Section>
+
+      <Section
+        title="Interactions & animations"
+        description="These are real, interactive toggles. Hover to reveal the surface layer, click and hold to squeeze the knob then drag it left/right to slide the switch (it snaps to the nearest side on release), and use Tab to see the keyboard focus ring."
+      >
+        <div className="flex flex-wrap gap-4">
+          <Card label="Hover me">
+            <InteractiveToggle
+              variant="new"
+              checked={false}
+              aria-label="Hover"
+            />
+          </Card>
+          <Card label="Click & hold (press)">
+            <InteractiveToggle variant="new" checked aria-label="Press" />
+          </Card>
+          <Card label="Tab to focus">
+            <InteractiveToggle
+              variant="new"
+              checked={false}
+              aria-label="Focus"
+            />
+          </Card>
+          <Card label="Toggle me">
+            <InteractiveToggle variant="new" checked aria-label="Toggle" />
+          </Card>
+        </div>
+      </Section>
+    </Page>
+  ),
+};
+
+/** Just the new toggle, in its on and off states with and without a label. */
+export const NewDesign: Story = {
+  render: () => (
+    <Page>
+      <Section
+        title="New toggle"
+        description="The redesigned daily.dev toggle."
+      >
+        <div className="flex flex-wrap items-center gap-8">
+          <InteractiveToggle variant="new" checked>
+            On by default
+          </InteractiveToggle>
+          <InteractiveToggle variant="new" checked={false}>
+            Off by default
+          </InteractiveToggle>
+          <InteractiveToggle variant="new" checked aria-label="On no label" />
+          <InteractiveToggle
+            variant="new"
+            checked={false}
+            aria-label="Off no label"
+          />
+          <InteractiveToggle variant="new" checked disabled>
+            Disabled on
+          </InteractiveToggle>
+          <InteractiveToggle variant="new" checked={false} disabled>
+            Disabled off
+          </InteractiveToggle>
+        </div>
+      </Section>
+    </Page>
+  ),
+};
+
+/** Fully controllable playground driven by Storybook controls. */
+export const Playground: Story = {
+  args: {
+    checked: true,
+    disabled: false,
+    compact: true,
+    children: 'Toggle label',
+  },
+  render: (args) => (
+    <Page>
+      <Section title="Playground">
+        <InteractiveToggle
+          variant="new"
+          checked={args.checked}
+          disabled={args.disabled}
+          compact={args.compact}
+          key={`${args.checked}-${args.disabled}-${args.compact}`}
+        >
+          {args.children}
+        </InteractiveToggle>
+      </Section>
+    </Page>
+  ),
+};
diff --git a/packages/storybook/stories/components/fields/legacy/LegacySwitch.module.css b/packages/storybook/stories/components/fields/legacy/LegacySwitch.module.css
new file mode 100644
index 00000000000..bae157e3ce3
--- /dev/null
+++ b/packages/storybook/stories/components/fields/legacy/LegacySwitch.module.css
@@ -0,0 +1,61 @@
+.track {
+  will-change: background-color, opacity;
+  transition: background-color 0.1s linear, opacity 0.2s linear;
+}
+
+.knob {
+  will-change: transform, background-color;
+  transition: background-color 0.1s linear, transform 0.2s linear;
+}
+
+.switch {
+  &:hover .knob {
+    background: var(--theme-text-primary);
+  }
+
+  &:hover input:checked ~ * .knob {
+    background: theme('colors.raw.cabbage.20');
+  }
+
+  &:active {
+    background: none;
+  }
+
+  & input:checked {
+    & ~ * .track {
+      background: theme('colors.raw.cabbage.50');
+      opacity: 0.24;
+    }
+
+    & ~ * .knob {
+      transform: translateX(100%);
+      background: theme('colors.raw.cabbage.40');
+    }
+
+    & ~ .children {
+      color: var(--theme-text-primary);
+    }
+  }
+}
+
+:global(.light) .switch {
+  & input:checked ~ * .knob {
+    background: theme('colors.raw.cabbage.80');
+  }
+
+  &:hover input:checked ~ * .knob {
+    background: theme('colors.raw.cabbage.60');
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :global(.auto) .switch {
+    & input:checked ~ * .knob {
+      background: theme('colors.raw.cabbage.80');
+    }
+
+    &:hover input:checked ~ * .knob {
+      background: theme('colors.raw.cabbage.60');
+    }
+  }
+}
diff --git a/packages/storybook/stories/components/fields/legacy/LegacySwitch.tsx b/packages/storybook/stories/components/fields/legacy/LegacySwitch.tsx
new file mode 100644
index 00000000000..7051a3ce993
--- /dev/null
+++ b/packages/storybook/stories/components/fields/legacy/LegacySwitch.tsx
@@ -0,0 +1,105 @@
+import type {
+  ForwardedRef,
+  InputHTMLAttributes,
+  ReactElement,
+  ReactNode,
+} from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './LegacySwitch.module.css';
+
+// Snapshot of the previous Switch design, kept only for the Storybook
+// before/after comparison page. Do not use in production code.
+export interface LegacySwitchProps
+  extends InputHTMLAttributes<HTMLInputElement> {
+  children?: ReactNode;
+  className?: string;
+  labelClassName?: string;
+  inputId: string;
+  name: string;
+  checked?: boolean;
+  onToggle?: () => unknown;
+  compact?: boolean;
+  defaultTypo?: boolean;
+}
+
+function LegacySwitchComponent(
+  {
+    className,
+    labelClassName,
+    inputId,
+    name,
+    checked,
+    children,
+    onToggle,
+    compact = true,
+    defaultTypo = true,
+    disabled,
+    'aria-label': ariaLabel,
+    ...props
+  }: LegacySwitchProps,
+  ref: ForwardedRef<HTMLLabelElement>,
+): ReactElement {
+  return (
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    <label
+      className={classNames(
+        className,
+        'group relative flex items-center',
+        disabled
+          ? 'pointer-events-none cursor-not-allowed opacity-32'
+          : 'cursor-pointer',
+        styles.switch,
+      )}
+      ref={ref}
+    >
+      <input
+        {...props}
+        disabled={disabled}
+        id={inputId}
+        name={name}
+        type="checkbox"
+        checked={checked}
+        onChange={onToggle}
+        className="absolute h-0 w-0 opacity-0"
+      />
+      <span
+        className={classNames(
+          'relative block',
+          compact ? 'h-4 w-8' : 'h-5 w-10',
+        )}
+      >
+        <span
+          className={classNames(
+            'absolute bottom-0 left-0 top-0 my-auto w-full bg-theme-overlay-quaternary',
+            compact ? 'h-2.5 rounded-3' : 'h-3 rounded-4',
+            styles.track,
+          )}
+        />
+        <span
+          className={classNames(
+            'absolute left-0 top-0 bg-text-tertiary',
+            compact ? 'h-4 w-4 rounded-3' : 'h-5 w-5 rounded-6',
+            styles.knob,
+          )}
+        />
+      </span>
+      {children ? (
+        <span
+          className={classNames(
+            'ml-3 font-bold text-text-tertiary',
+            defaultTypo && 'typo-footnote',
+            styles.children,
+            labelClassName,
+          )}
+        >
+          {children}
+        </span>
+      ) : (
+        ariaLabel && <span className="sr-only">{ariaLabel}</span>
+      )}
+    </label>
+  );
+}
+
+export const LegacySwitch = React.forwardRef(LegacySwitchComponent);