diff --git a/change/@fluentui-web-components-f70c1f20-47e3-4e76-9cb0-53fef171209f.json b/change/@fluentui-web-components-f70c1f20-47e3-4e76-9cb0-53fef171209f.json
new file mode 100644
index 00000000000000..fe0cfd89136702
--- /dev/null
+++ b/change/@fluentui-web-components-f70c1f20-47e3-4e76-9cb0-53fef171209f.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: update switch to use margin instead of transform for the checked state to support RTL",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
index 81aa986c93ca5c..bb0f14dc84a4f1 100644
--- a/packages/web-components/src/switch/switch.styles.ts
+++ b/packages/web-components/src/switch/switch.styles.ts
@@ -118,14 +118,15 @@ export const styles = css`
     height: 14px;
     width: 14px;
     border-radius: 50%;
+    margin-inline-start: 0;
     background-color: ${colorNeutralForeground3};
     transition-duration: ${durationNormal};
     transition-timing-function: ${curveEasyEase};
-    transition-property: transform;
+    transition-property: margin-inline-start;
   }
   :host([aria-checked='true']) .checked-indicator {
     background-color: ${colorNeutralForegroundInverted};
-    transform: translateX(20px);
+    margin-inline-start: calc(100% - 14px);
   }
   :host([aria-checked='true']:hover) .checked-indicator {
     background: ${colorNeutralForegroundInvertedHover};