diff --git a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap
index fea84cb06f161..020bc40108c03 100644
--- a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap
+++ b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap
@@ -802,12 +802,12 @@ exports[`replay/transform transform inputs input - checkbox - $value 1`] = `
                           "type": 2,
                         },
                         {
-                          "id": 134,
+                          "id": 133,
                           "textContent": "first",
                           "type": 3,
                         },
                       ],
-                      "id": 133,
+                      "id": 134,
                       "tagName": "label",
                       "type": 2,
                     },
@@ -888,12 +888,12 @@ exports[`replay/transform transform inputs input - checkbox - $value 2`] = `
                           "type": 2,
                         },
                         {
-                          "id": 137,
+                          "id": 136,
                           "textContent": "second",
                           "type": 3,
                         },
                       ],
-                      "id": 136,
+                      "id": 137,
                       "tagName": "label",
                       "type": 2,
                     },
@@ -976,12 +976,12 @@ exports[`replay/transform transform inputs input - checkbox - $value 3`] = `
                           "type": 2,
                         },
                         {
-                          "id": 140,
+                          "id": 139,
                           "textContent": "third",
                           "type": 3,
                         },
                       ],
-                      "id": 139,
+                      "id": 140,
                       "tagName": "label",
                       "type": 2,
                     },
@@ -2188,6 +2188,11 @@ exports[`replay/transform transform inputs input - toggle - $value 1`] = `
                         "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
                       },
                       "childNodes": [
+                        {
+                          "id": 146,
+                          "textContent": "first",
+                          "type": 3,
+                        },
                         {
                           "attributes": {
                             "style": "height:100%;flex:1",
@@ -2228,13 +2233,8 @@ exports[`replay/transform transform inputs input - toggle - $value 1`] = `
                           "tagName": "div",
                           "type": 2,
                         },
-                        {
-                          "id": 147,
-                          "textContent": "first",
-                          "type": 3,
-                        },
                       ],
-                      "id": 146,
+                      "id": 147,
                       "tagName": "label",
                       "type": 2,
                     },
@@ -2304,6 +2304,11 @@ exports[`replay/transform transform inputs input - toggle - $value 2`] = `
                         "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
                       },
                       "childNodes": [
+                        {
+                          "id": 152,
+                          "textContent": "second",
+                          "type": 3,
+                        },
                         {
                           "attributes": {
                             "style": "height:100%;flex:1",
@@ -2344,13 +2349,8 @@ exports[`replay/transform transform inputs input - toggle - $value 2`] = `
                           "tagName": "div",
                           "type": 2,
                         },
-                        {
-                          "id": 153,
-                          "textContent": "second",
-                          "type": 3,
-                        },
                       ],
-                      "id": 152,
+                      "id": 153,
                       "tagName": "label",
                       "type": 2,
                     },
@@ -2420,6 +2420,11 @@ exports[`replay/transform transform inputs input - toggle - $value 3`] = `
                         "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;",
                       },
                       "childNodes": [
+                        {
+                          "id": 158,
+                          "textContent": "third",
+                          "type": 3,
+                        },
                         {
                           "attributes": {
                             "style": "height:100%;flex:1",
@@ -2460,13 +2465,8 @@ exports[`replay/transform transform inputs input - toggle - $value 3`] = `
                           "tagName": "div",
                           "type": 2,
                         },
-                        {
-                          "id": 159,
-                          "textContent": "third",
-                          "type": 3,
-                        },
                       ],
-                      "id": 158,
+                      "id": 159,
                       "tagName": "label",
                       "type": 2,
                     },
@@ -3208,12 +3208,12 @@ exports[`replay/transform transform inputs wrapping with labels 1`] = `
                           "type": 2,
                         },
                         {
-                          "id": 117,
+                          "id": 116,
                           "textContent": "i will wrap the checkbox",
                           "type": 3,
                         },
                       ],
-                      "id": 116,
+                      "id": 117,
                       "tagName": "label",
                       "type": 2,
                     },
diff --git a/ee/frontend/mobile-replay/transformers.ts b/ee/frontend/mobile-replay/transformers.ts
index 1c72e61e8f508..0e26c0aedb6ec 100644
--- a/ee/frontend/mobile-replay/transformers.ts
+++ b/ee/frontend/mobile-replay/transformers.ts
@@ -12,11 +12,13 @@ import {
     textNode,
     wireframe,
     wireframeButton,
+    wireframeCheckBox,
     wireframeDiv,
     wireframeImage,
     wireframeInputComponent,
     wireframePlaceholder,
     wireframeProgress,
+    wireframeRadio,
     wireframeRadioGroup,
     wireframeRectangle,
     wireframeSelect,
@@ -527,6 +529,29 @@ function makeToggleElement(wireframe: wireframeToggle): (elementNode & { id: num
     }
 }
 
+function makeLabelledInput(
+    wireframe: wireframeCheckBox | wireframeRadio | wireframeToggle,
+    theInputElement: serializedNodeWithId
+): serializedNodeWithId {
+    const theLabel: serializedNodeWithId = {
+        type: NodeType.Text,
+        textContent: wireframe.label || '',
+        id: idSequence.next().value,
+    }
+
+    const orderedChildren = wireframe.inputType === 'toggle' ? [theLabel, theInputElement] : [theInputElement, theLabel]
+
+    return {
+        type: NodeType.Element,
+        tagName: 'label',
+        attributes: {
+            style: makeStylesString(wireframe),
+        },
+        id: idSequence.next().value,
+        childNodes: orderedChildren,
+    }
+}
+
 function makeInputElement(
     wireframe: wireframeInputComponent,
     children: serializedNodeWithId[]
@@ -547,7 +572,7 @@ function makeInputElement(
         return makeProgressElement(wireframe, children)
     }
 
-    const theInputElement: (elementNode & { id: number }) | null =
+    const theInputElement: serializedNodeWithId | null =
         wireframe.inputType === 'toggle'
             ? makeToggleElement(wireframe)
             : {
@@ -557,27 +582,13 @@ function makeInputElement(
                   id: wireframe.id,
                   childNodes: children,
               }
+
     if (!theInputElement) {
         return null
     }
 
     if ('label' in wireframe) {
-        return {
-            type: NodeType.Element,
-            tagName: 'label',
-            attributes: {
-                style: makeStylesString(wireframe),
-            },
-            id: idSequence.next().value,
-            childNodes: [
-                theInputElement,
-                {
-                    type: NodeType.Text,
-                    textContent: wireframe.label || '',
-                    id: idSequence.next().value,
-                },
-            ],
-        }
+        return makeLabelledInput(wireframe, theInputElement)
     } else {
         return {
             ...theInputElement,