diff --git a/components/base/toggle/toggle.demo.tsx b/components/base/toggle/toggle.demo.tsx
index ad2a00b..02b7789 100644
--- a/components/base/toggle/toggle.demo.tsx
+++ b/components/base/toggle/toggle.demo.tsx
@@ -74,3 +74,22 @@ export const ToggleSlimBase = () => (
         </div>
     </div>
 );
+
+export const TogglesFullWidth = () => (
+    <div className="flex w-full max-w-lg flex-col gap-4">
+        <Toggle
+            label="Remember me"
+            hint="Save my login details for next time, so you can skip this step on this device until you sign out or clear your browser data."
+            size="sm"
+            className="w-full"
+        />
+        <Toggle label="Remember me" hint="Save my login details for next time." size="sm" className="w-full" />
+        <Toggle
+            label="Remember me"
+            hint="Save my login details for next time, so you can skip this step on this device until you sign out or clear your browser data."
+            size="md"
+            className="w-full"
+        />
+        <Toggle label="Remember me" hint="Save my login details for next time." size="md" className="w-full" />
+    </div>
+);
diff --git a/components/base/toggle/toggle.story.tsx b/components/base/toggle/toggle.story.tsx
index b4546fd..00c84df 100644
--- a/components/base/toggle/toggle.story.tsx
+++ b/components/base/toggle/toggle.story.tsx
@@ -21,3 +21,6 @@ TogglesSlim.storyName = "Toggles slim";
 
 export const ToggleSlimBase = () => <ToggleComponents.ToggleSlimBase />;
 ToggleSlimBase.storyName = "Toggle slim base";
+
+export const TogglesFullWidth = () => <ToggleComponents.TogglesFullWidth />;
+TogglesFullWidth.storyName = "Toggles full width";
diff --git a/components/base/toggle/toggle.tsx b/components/base/toggle/toggle.tsx
index ad8eda6..5e30f19 100644
--- a/components/base/toggle/toggle.tsx
+++ b/components/base/toggle/toggle.tsx
@@ -51,7 +51,7 @@ export const ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, i
     return (
         <div
             className={cx(
-                "cursor-pointer rounded-full bg-tertiary ring-[0.5px] ring-secondary outline-focus-ring transition duration-150 ease-linear ring-inset",
+                "shrink-0 cursor-pointer rounded-full bg-tertiary ring-[0.5px] ring-secondary outline-focus-ring transition duration-150 ease-linear ring-inset",
                 isSelected && "bg-brand-solid",
                 isSelected && isHovered && "bg-brand-solid_hover",
                 isDisabled && "cursor-not-allowed opacity-50",