diff --git a/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.stories.tsx b/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.stories.tsx
index cffbefe10e..3624f3349c 100644
--- a/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.stories.tsx
+++ b/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.stories.tsx
@@ -2,26 +2,19 @@ import { action } from '@storybook/addon-actions';
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
-import { ToggleSwitch, Label } from '../..';
-import { DECORATOR_ID, DECORATOR_LABEL } from '../../../.storybook/helpers';
+import { ToggleSwitch } from '../..';
+import {
+  DECORATOR_LABEL,
+  PropsVariationSection,
+} from '../../../.storybook/helpers';
 
 export default {
   title: 'Inputs/ToggleSwitch',
   component: ToggleSwitch,
-  decorators: [
-    (Story) => (
-      <>
-        <Story />
-        <Label mis='x4' htmlFor={DECORATOR_ID}>
-          {DECORATOR_LABEL}
-        </Label>
-      </>
-    ),
-  ],
 } as ComponentMeta<typeof ToggleSwitch>;
 
 const Template: ComponentStory<typeof ToggleSwitch> = (args) => (
-  <ToggleSwitch id={DECORATOR_ID} {...args} />
+  <ToggleSwitch aria-label={DECORATOR_LABEL} {...args} />
 );
 
 export const Default: ComponentStory<typeof ToggleSwitch> = Template.bind({});
@@ -39,3 +32,21 @@ export const Disabled: ComponentStory<typeof ToggleSwitch> = Template.bind({});
 Disabled.args = {
   disabled: true,
 };
+
+export const States: ComponentStory<typeof ToggleSwitch> = () => (
+  <PropsVariationSection
+    component={ToggleSwitch}
+    common={{ 'onChange': action('change'), 'aria-label': DECORATOR_LABEL }}
+    xAxis={{
+      checked: { checked: true },
+      unchecked: { checked: false },
+    }}
+    yAxis={{
+      default: {},
+      hover: { className: 'is-hovered' },
+      active: { className: 'is-active' },
+      focus: { className: 'is-focused' },
+      disabled: { disabled: true },
+    }}
+  />
+);
diff --git a/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.tsx b/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.tsx
index 624f7b7382..0eefefb780 100644
--- a/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.tsx
+++ b/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.tsx
@@ -5,11 +5,14 @@ import Box from '../Box';
 import { Label } from '../Label';
 
 export const ToggleSwitch = forwardRef(function ToggleSwitch(
-  props: ComponentProps<typeof Box> & AllHTMLAttributes<HTMLInputElement>,
+  {
+    className,
+    ...props
+  }: ComponentProps<typeof Box> & AllHTMLAttributes<HTMLInputElement>,
   ref: Ref<HTMLInputElement>
 ) {
   return (
-    <Box is={Label} rcx-toggle-switch>
+    <Box is={Label} className={className} rcx-toggle-switch>
       <Box
         is='input'
         ref={ref}
diff --git a/packages/fuselage/src/components/ToggleSwitch/__snapshots__/ToggleSwitch.spec.tsx.snap b/packages/fuselage/src/components/ToggleSwitch/__snapshots__/ToggleSwitch.spec.tsx.snap
index 9b18057b7b..89e0b45bea 100644
--- a/packages/fuselage/src/components/ToggleSwitch/__snapshots__/ToggleSwitch.spec.tsx.snap
+++ b/packages/fuselage/src/components/ToggleSwitch/__snapshots__/ToggleSwitch.spec.tsx.snap
@@ -7,9 +7,9 @@ exports[`[ToggleSwitch Rendering] renders Checked without crashing 1`] = `
       class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-toggle-switch"
     >
       <input
+        aria-label="Decorator Label"
         checked=""
         class="rcx-box rcx-box--full rcx-toggle-switch__input"
-        id="decoratorId"
         type="checkbox"
       />
       <i
@@ -17,12 +17,6 @@ exports[`[ToggleSwitch Rendering] renders Checked without crashing 1`] = `
         class="rcx-box rcx-box--full rcx-toggle-switch__fake"
       />
     </label>
-    <label
-      class="rcx-box rcx-box--full rcx-label rcx-css-b7g1a9"
-      for="decoratorId"
-    >
-      Decorator Label
-    </label>
   </div>
 </body>
 `;
@@ -34,8 +28,8 @@ exports[`[ToggleSwitch Rendering] renders Default without crashing 1`] = `
       class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-toggle-switch"
     >
       <input
+        aria-label="Decorator Label"
         class="rcx-box rcx-box--full rcx-toggle-switch__input"
-        id="decoratorId"
         type="checkbox"
       />
       <i
@@ -43,12 +37,6 @@ exports[`[ToggleSwitch Rendering] renders Default without crashing 1`] = `
         class="rcx-box rcx-box--full rcx-toggle-switch__fake"
       />
     </label>
-    <label
-      class="rcx-box rcx-box--full rcx-label rcx-css-b7g1a9"
-      for="decoratorId"
-    >
-      Decorator Label
-    </label>
   </div>
 </body>
 `;
@@ -60,9 +48,9 @@ exports[`[ToggleSwitch Rendering] renders Disabled without crashing 1`] = `
       class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-toggle-switch"
     >
       <input
+        aria-label="Decorator Label"
         class="rcx-box rcx-box--full rcx-toggle-switch__input"
         disabled=""
-        id="decoratorId"
         type="checkbox"
       />
       <i
@@ -70,12 +58,306 @@ exports[`[ToggleSwitch Rendering] renders Disabled without crashing 1`] = `
         class="rcx-box rcx-box--full rcx-toggle-switch__fake"
       />
     </label>
-    <label
-      class="rcx-box rcx-box--full rcx-label rcx-css-b7g1a9"
-      for="decoratorId"
+  </div>
+</body>
+`;
+
+exports[`[ToggleSwitch Rendering] renders States without crashing 1`] = `
+<body>
+  <div>
+    <table
+      class="rcx-box rcx-box--full rcx-css-1s3wr6b"
+      style="border-collapse: collapse;"
     >
-      Decorator Label
-    </label>
+      <thead
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <td
+            aria-hidden="true"
+            class="rcx-box rcx-box--full"
+          />
+          <th
+            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+          >
+            checked
+          </th>
+          <th
+            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+          >
+            unchecked
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="rcx-box rcx-box--full"
+      >
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+          >
+            default
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-toggle-switch"
+              >
+                <input
+                  aria-label="Decorator Label"
+                  checked=""
+                  class="rcx-box rcx-box--full rcx-toggle-switch__input"
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-toggle-switch__fake"
+                />
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-toggle-switch"
+              >
+                <input
+                  aria-label="Decorator Label"
+                  class="rcx-box rcx-box--full rcx-toggle-switch__input"
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-toggle-switch__fake"
+                />
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+          >
+            hover
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-toggle-switch  is-hovered"
+              >
+                <input
+                  aria-label="Decorator Label"
+                  checked=""
+                  class="rcx-box rcx-box--full rcx-toggle-switch__input"
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-toggle-switch__fake"
+                />
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-toggle-switch  is-hovered"
+              >
+                <input
+                  aria-label="Decorator Label"
+                  class="rcx-box rcx-box--full rcx-toggle-switch__input"
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-toggle-switch__fake"
+                />
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+          >
+            active
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-toggle-switch  is-active"
+              >
+                <input
+                  aria-label="Decorator Label"
+                  checked=""
+                  class="rcx-box rcx-box--full rcx-toggle-switch__input"
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-toggle-switch__fake"
+                />
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-toggle-switch  is-active"
+              >
+                <input
+                  aria-label="Decorator Label"
+                  class="rcx-box rcx-box--full rcx-toggle-switch__input"
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-toggle-switch__fake"
+                />
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+          >
+            focus
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-toggle-switch  is-focused"
+              >
+                <input
+                  aria-label="Decorator Label"
+                  checked=""
+                  class="rcx-box rcx-box--full rcx-toggle-switch__input"
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-toggle-switch__fake"
+                />
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-toggle-switch  is-focused"
+              >
+                <input
+                  aria-label="Decorator Label"
+                  class="rcx-box rcx-box--full rcx-toggle-switch__input"
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-toggle-switch__fake"
+                />
+              </label>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="rcx-box rcx-box--full"
+        >
+          <th
+            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+          >
+            disabled
+          </th>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-toggle-switch"
+              >
+                <input
+                  aria-label="Decorator Label"
+                  checked=""
+                  class="rcx-box rcx-box--full rcx-toggle-switch__input"
+                  disabled=""
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-toggle-switch__fake"
+                />
+              </label>
+            </div>
+          </td>
+          <td
+            class="rcx-box rcx-box--full rcx-css-yoolx6"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-7rd89h"
+            >
+              <label
+                class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-toggle-switch"
+              >
+                <input
+                  aria-label="Decorator Label"
+                  class="rcx-box rcx-box--full rcx-toggle-switch__input"
+                  disabled=""
+                  type="checkbox"
+                />
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-toggle-switch__fake"
+                />
+              </label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </body>
 `;