diff --git a/src/components/common/Toggle/index.tsx b/src/components/common/Toggle/index.tsx
index d02a793..111a05a 100644
--- a/src/components/common/Toggle/index.tsx
+++ b/src/components/common/Toggle/index.tsx
@@ -15,6 +15,7 @@ type ToggleProps = {
   id?: string;
   disabled?: boolean;
   label?: string;
+  className?: string;
 } & InputWrapperProps;
 
 const ToggleContainer = styled(Box)<ToggleProps>`
@@ -89,6 +90,7 @@ export const Toggle = forwardRef<CustomCheckboxProps, ToggleProps>(
       id: givenId,
       disabled,
       label,
+      className,
       ...rest
     },
     ref,
@@ -112,6 +114,7 @@ export const Toggle = forwardRef<CustomCheckboxProps, ToggleProps>(
           as="label"
           htmlFor={id}
           disabled={disabled}
+          className={className}
           {...pick(rest)}
         >
           <CustomCheckbox
diff --git a/src/components/common/Toggle/toggle.stories.tsx b/src/components/common/Toggle/toggle.stories.tsx
index 9756914..ac3b277 100644
--- a/src/components/common/Toggle/toggle.stories.tsx
+++ b/src/components/common/Toggle/toggle.stories.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 
 import { Toggle } from '~components';
 
+import { styled } from '~lib';
+
 export default {
   component: Toggle,
   title: 'components/Toggle',
@@ -22,4 +24,21 @@ export default {
   parameters: { controls: { hideNoControlsWarning: true } },
 };
 
+const ExtendedToggle = styled(Toggle, {
+  baseStyles: {
+    '> .slider': {
+      backgroundColor: 'grey300',
+      borderColor: 'grey300',
+    },
+    "[data-reach-custom-checkbox][data-state='checked']": {
+      '& + .slider': {
+        backgroundColor: 'grey800',
+        borderColor: 'grey800',
+      },
+    },
+  },
+});
+
 export const Basic = (args) => <Toggle {...args} />;
+
+export const Extended = (args) => <ExtendedToggle />;