diff --git a/core/api.txt b/core/api.txt
index 47b1307e5a..0f16f5afa3 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -289,12 +289,13 @@ ion-card-title,prop,mode,"ios" | "md",undefined,false,false
 ion-card-title,css-prop,--color
 
 ion-checkbox,shadow
+ion-checkbox,prop,alignment,"center" | "start",'center',false,false
 ion-checkbox,prop,checked,boolean,false,false,false
 ion-checkbox,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-checkbox,prop,disabled,boolean,false,false,false
 ion-checkbox,prop,indeterminate,boolean,false,false,false
 ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',false,false
-ion-checkbox,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
+ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-checkbox,prop,legacy,boolean | undefined,undefined,false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
@@ -1008,10 +1009,11 @@ ion-progress-bar,part,stream
 ion-progress-bar,part,track
 
 ion-radio,shadow
+ion-radio,prop,alignment,"center" | "start",'center',false,false
 ion-radio,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-radio,prop,disabled,boolean,false,false,false
 ion-radio,prop,justify,"end" | "space-between" | "start",'space-between',false,false
-ion-radio,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
+ion-radio,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-radio,prop,legacy,boolean | undefined,undefined,false,false
 ion-radio,prop,mode,"ios" | "md",undefined,false,false
 ion-radio,prop,name,string,this.inputId,false,false
@@ -1038,7 +1040,7 @@ ion-range,prop,debounce,number | undefined,undefined,false,false
 ion-range,prop,disabled,boolean,false,false,false
 ion-range,prop,dualKnobs,boolean,false,false,false
 ion-range,prop,label,string | undefined,undefined,false,false
-ion-range,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
+ion-range,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-range,prop,legacy,boolean | undefined,undefined,false,false
 ion-range,prop,max,number,100,false,false
 ion-range,prop,min,number,0,false,false
@@ -1478,12 +1480,13 @@ ion-toast,part,icon
 ion-toast,part,message
 
 ion-toggle,shadow
+ion-toggle,prop,alignment,"center" | "start",'center',false,false
 ion-toggle,prop,checked,boolean,false,false,false
 ion-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toggle,prop,disabled,boolean,false,false,false
 ion-toggle,prop,enableOnOffLabels,boolean | undefined,config.get('toggleOnOffLabels'),false,false
 ion-toggle,prop,justify,"end" | "space-between" | "start",'space-between',false,false
-ion-toggle,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
+ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-toggle,prop,legacy,boolean | undefined,undefined,false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 1cd7c27747..d048e31f10 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -602,6 +602,10 @@ export namespace Components {
         "mode"?: "ios" | "md";
     }
     interface IonCheckbox {
+        /**
+          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment": 'start' | 'center';
         /**
           * If `true`, the checkbox is selected.
          */
@@ -623,9 +627,9 @@ export namespace Components {
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement": 'start' | 'end' | 'fixed';
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the `aria-label` attribute or have text in the default slot. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior.  Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
@@ -2216,6 +2220,10 @@ export namespace Components {
         "value": number;
     }
     interface IonRadio {
+        /**
+          * How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment": 'start' | 'center';
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
@@ -2229,9 +2237,9 @@ export namespace Components {
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement": 'start' | 'end' | 'fixed';
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
@@ -2291,9 +2299,9 @@ export namespace Components {
          */
         "label"?: string;
         /**
-          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
          */
-        "labelPlacement": 'start' | 'end' | 'fixed';
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
@@ -3165,6 +3173,10 @@ export namespace Components {
         "trigger": string | undefined;
     }
     interface IonToggle {
+        /**
+          * How to control the alignment of the toggle and label on the cross axis. ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment": 'start' | 'center';
         /**
           * If `true`, the toggle is selected.
          */
@@ -3186,9 +3198,9 @@ export namespace Components {
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement": 'start' | 'end' | 'fixed';
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
@@ -4625,6 +4637,10 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
     }
     interface IonCheckbox {
+        /**
+          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment"?: 'start' | 'center';
         /**
           * If `true`, the checkbox is selected.
          */
@@ -4646,9 +4662,9 @@ declare namespace LocalJSX {
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement"?: 'start' | 'end' | 'fixed';
+        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the `aria-label` attribute or have text in the default slot. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior.  Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
@@ -6226,6 +6242,10 @@ declare namespace LocalJSX {
         "value"?: number;
     }
     interface IonRadio {
+        /**
+          * How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment"?: 'start' | 'center';
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
@@ -6239,9 +6259,9 @@ declare namespace LocalJSX {
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement"?: 'start' | 'end' | 'fixed';
+        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
@@ -6319,9 +6339,9 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
          */
-        "labelPlacement"?: 'start' | 'end' | 'fixed';
+        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
@@ -7298,6 +7318,10 @@ declare namespace LocalJSX {
         "trigger"?: string | undefined;
     }
     interface IonToggle {
+        /**
+          * How to control the alignment of the toggle and label on the cross axis. ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment"?: 'start' | 'center';
         /**
           * If `true`, the toggle is selected.
          */
@@ -7319,9 +7343,9 @@ declare namespace LocalJSX {
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement"?: 'start' | 'end' | 'fixed';
+        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
index 9f2b6269ea..41beb296d5 100644
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -108,6 +108,14 @@
   @include margin($checkbox-item-label-margin-top, null, $checkbox-item-label-margin-bottom, null);
 }
 
+:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {
+  @include margin($checkbox-item-label-margin-top, null, $form-control-label-margin, null);
+}
+
+:host(.in-item.checkbox-label-placement-stacked) .native-wrapper {
+  @include margin(null, null, $checkbox-item-label-margin-bottom, null);
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -181,6 +189,17 @@ input {
   justify-content: end;
 }
 
+// Align Items
+// ---------------------------------------------
+
+:host(.checkbox-alignment-start) .checkbox-wrapper {
+  align-items: start;
+}
+
+:host(.checkbox-alignment-center) .checkbox-wrapper {
+  align-items: center;
+}
+
 
 // Label Placement - Start
 // ----------------------------------------------------------------
@@ -248,6 +267,24 @@ input {
   max-width: 200px;
 }
 
+// Label Placement - Stacked
+// ----------------------------------------------------------------
+
+/**
+ * Label is on top of the checkbox.
+ */
+:host(.checkbox-label-placement-stacked) .checkbox-wrapper {
+  flex-direction: column;
+}
+
+:host(.checkbox-label-placement-stacked) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the checkbox should be on the bottom
+   * when the label sits at the top.
+   */
+  @include margin(null, 0, $form-control-label-margin, 0);
+}
 
 // Checked / Indeterminate Checkbox
 // ---------------------------------------------
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index 08cfc581ff..cf463bfbf5 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -81,8 +81,9 @@ export class Checkbox implements ComponentInterface {
    * `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.
    * `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.
    * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+   * `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
    */
-  @Prop() labelPlacement: 'start' | 'end' | 'fixed' = 'start';
+  @Prop() labelPlacement: 'start' | 'end' | 'fixed' | 'stacked' = 'start';
 
   /**
    * How to pack the label and checkbox within a line.
@@ -95,6 +96,13 @@ export class Checkbox implements ComponentInterface {
    */
   @Prop() justify: 'start' | 'end' | 'space-between' = 'space-between';
 
+  /**
+   * How to control the alignment of the checkbox and label on the cross axis.
+   * `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
+   * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+   */
+  @Prop() alignment: 'start' | 'center' = 'center';
+
   // TODO(FW-3100): remove this
   /**
    * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
@@ -224,6 +232,7 @@ export class Checkbox implements ComponentInterface {
       labelPlacement,
       name,
       value,
+      alignment,
     } = this;
     const mode = getIonMode(this);
     const path = getSVGPath(mode, indeterminate);
@@ -240,6 +249,7 @@ export class Checkbox implements ComponentInterface {
           'checkbox-indeterminate': indeterminate,
           interactive: true,
           [`checkbox-justify-${justify}`]: true,
+          [`checkbox-alignment-${alignment}`]: true,
           [`checkbox-label-placement-${labelPlacement}`]: true,
         })}
       >
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts b/core/src/components/checkbox/test/item/checkbox.e2e.ts
index 0e4402bd8e..220d8332b1 100644
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts
@@ -70,4 +70,21 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       await expect(list).toHaveScreenshot(screenshot(`checkbox-long-label-in-item`));
     });
   });
+
+  test.describe(title('checkbox: stacked label in item'), () => {
+    test('should render margins correctly when using stacked label in item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-item>
+              <ion-checkbox label-placement="stacked">Enable Notifications</ion-checkbox>
+            </ion-item>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`checkbox-stacked-label-in-item`));
+    });
+  });
 });
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4d6af40c9c
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..86359e9da9
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..59af36718c
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/index.html b/core/src/components/checkbox/test/item/index.html
index 156e3ca6dc..0d8b8ca18c 100644
--- a/core/src/components/checkbox/test/item/index.html
+++ b/core/src/components/checkbox/test/item/index.html
@@ -137,6 +137,27 @@
           </div>
         </div>
 
+        <h1>Placement Stacked</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Align Start</h2>
+            <ion-list>
+              <ion-item>
+                <ion-checkbox label-placement="stacked" alignment="start">Enable Notifications</ion-checkbox>
+              </ion-item>
+            </ion-list>
+          </div>
+
+          <div class="grid-item">
+            <h2>Align Center</h2>
+            <ion-list>
+              <ion-item>
+                <ion-checkbox label-placement="stacked" alignment="center">Enable Notifications</ion-checkbox>
+              </ion-item>
+            </ion-list>
+          </div>
+        </div>
+
         <h1>States</h1>
         <div class="grid">
           <div class="grid-item">
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts b/core/src/components/checkbox/test/label/checkbox.e2e.ts
index 1507ee857d..0724007464 100644
--- a/core/src/components/checkbox/test/label/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/label/checkbox.e2e.ts
@@ -138,5 +138,31 @@ configs().forEach(({ title, screenshot, config }) => {
         await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-fixed-justify-space-between`));
       });
     });
+
+    test.describe('checkbox: stacked placement', () => {
+      test('should align the label to the start of the container in the stacked position', async ({ page }) => {
+        await page.setContent(
+          `
+            <ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">This is a long label</ion-checkbox>
+          `,
+          config
+        );
+
+        const checkbox = page.locator('ion-checkbox');
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-stacked-align-start`));
+      });
+
+      test('should align the label to the center of the container in the stacked position', async ({ page }) => {
+        await page.setContent(
+          `
+            <ion-checkbox label-placement="stacked" alignment="center" style="width: 200px">This is a long label</ion-checkbox>
+          `,
+          config
+        );
+
+        const checkbox = page.locator('ion-checkbox');
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-stacked-align-center`));
+      });
+    });
   });
 });
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4436c8c492
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..806038db5b
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..106e8c2558
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..cd5896ac16
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..806038db5b
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..106e8c2558
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1ac4e3c311
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1881022673
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4fbbd73174
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1ac4e3c311
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1881022673
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4fbbd73174
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7fe7847537
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f31eeedf37
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1122890b87
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c2d6670092
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1b9cdcaa08
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ef9656499e
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e89f750106
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..aa6852de06
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..046c094c79
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1826b94de4
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..50a976a543
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a2f5210b63
Binary files /dev/null and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/label/index.html b/core/src/components/checkbox/test/label/index.html
index cdc9a913d2..7efe2bca31 100644
--- a/core/src/components/checkbox/test/label/index.html
+++ b/core/src/components/checkbox/test/label/index.html
@@ -104,6 +104,19 @@
             <ion-checkbox label-placement="fixed" justify="space-between">Enable Notifications</ion-checkbox>
           </div>
         </div>
+
+        <h1>Placement Stacked</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Align Start</h2>
+            <ion-checkbox label-placement="stacked" alignment="start">Enable Notifications</ion-checkbox>
+          </div>
+
+          <div class="grid-item">
+            <h2>Align Center</h2>
+            <ion-checkbox label-placement="stacked" alignment="center">Enable Notifications</ion-checkbox>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.scss
index 3fe6053680..66610791ec 100644
--- a/core/src/components/radio/radio.scss
+++ b/core/src/components/radio/radio.scss
@@ -127,6 +127,14 @@ input {
   @include margin($radio-item-label-margin-top, null, $radio-item-label-margin-bottom, null);
 }
 
+:host(.in-item.radio-label-placement-stacked) .label-text-wrapper {
+  @include margin($radio-item-label-margin-top, null, $form-control-label-margin, null);
+}
+
+:host(.in-item.radio-label-placement-stacked) .native-wrapper {
+  @include margin(null, null, $radio-item-label-margin-bottom, null);
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -160,6 +168,17 @@ input {
   justify-content: end;
 }
 
+// Radio Align
+// --------------------------------------------------
+
+:host(.radio-alignment-start) .radio-wrapper {
+  align-items: start;
+}
+
+:host(.radio-alignment-center) .radio-wrapper {
+  align-items: center;
+}
+
 // Radio Label Placement - Start
 // ----------------------------------------------------------------
 
@@ -222,3 +241,22 @@ input {
   width: 100px;
   min-width: 100px;
 }
+
+// Radio Label Placement - Stacked
+// ----------------------------------------------------------------
+
+/**
+ * Label is on top of the radio.
+ */
+:host(.radio-label-placement-stacked) .radio-wrapper {
+  flex-direction: column;
+}
+
+:host(.radio-label-placement-stacked) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the radio should be on the bottom
+   * when the label sits on top.
+   */
+  @include margin(null, 0, $form-control-label-margin, 0);
+}
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index d6618dcffe..b43f2c2c55 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -84,8 +84,9 @@ export class Radio implements ComponentInterface {
    * `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL.
    * `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL.
    * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+   * `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
    */
-  @Prop() labelPlacement: 'start' | 'end' | 'fixed' = 'start';
+  @Prop() labelPlacement: 'start' | 'end' | 'fixed' | 'stacked' = 'start';
 
   // TODO FW-3125: Remove the legacy property and implementation
   /**
@@ -110,6 +111,13 @@ export class Radio implements ComponentInterface {
    */
   @Prop() justify: 'start' | 'end' | 'space-between' = 'space-between';
 
+  /**
+   * How to control the alignment of the radio and label on the cross axis.
+   * `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
+   * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+   */
+  @Prop() alignment: 'start' | 'center' = 'center';
+
   /**
    * Emitted when the styles change.
    * @internal
@@ -250,7 +258,7 @@ export class Radio implements ComponentInterface {
   }
 
   private renderRadio() {
-    const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex } = this;
+    const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
     const mode = getIonMode(this);
     const inItem = hostContext('ion-item', el);
 
@@ -265,6 +273,7 @@ export class Radio implements ComponentInterface {
           'radio-checked': checked,
           'radio-disabled': disabled,
           [`radio-justify-${justify}`]: true,
+          [`radio-alignment-${alignment}`]: true,
           [`radio-label-placement-${labelPlacement}`]: true,
           // Focus and active styling should not apply when the radio is in an item
           'ion-activatable': !inItem,
diff --git a/core/src/components/radio/test/item/index.html b/core/src/components/radio/test/item/index.html
index 42235e4115..36e46779fd 100644
--- a/core/src/components/radio/test/item/index.html
+++ b/core/src/components/radio/test/item/index.html
@@ -155,6 +155,31 @@
           </div>
         </div>
 
+        <h1>Placement Stacked</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Align Start</h2>
+            <ion-list>
+              <ion-radio-group>
+                <ion-item>
+                  <ion-radio label-placement="stacked" alignment="start">Enable Notifications</ion-radio>
+                </ion-item>
+              </ion-radio-group>
+            </ion-list>
+          </div>
+
+          <div class="grid-item">
+            <h2>Align Center</h2>
+            <ion-list>
+              <ion-radio-group>
+                <ion-item>
+                  <ion-radio label-placement="stacked" alignment="center">Enable Notifications</ion-radio>
+                </ion-item>
+              </ion-radio-group>
+            </ion-list>
+          </div>
+        </div>
+
         <h1>States</h1>
         <div class="grid">
           <ion-list>
diff --git a/core/src/components/radio/test/item/radio.e2e.ts b/core/src/components/radio/test/item/radio.e2e.ts
index 8d0037b892..5ebdba1549 100644
--- a/core/src/components/radio/test/item/radio.e2e.ts
+++ b/core/src/components/radio/test/item/radio.e2e.ts
@@ -59,4 +59,23 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       await expect(list).toHaveScreenshot(screenshot(`radio-long-label-in-item`));
     });
   });
+
+  test.describe(title('radio: stacked label in item'), () => {
+    test('should render margins correctly when using stacked label in item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-radio-group>
+              <ion-item>
+                <ion-radio label-placement="stacked">Enable Notifications</ion-radio>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`radio-stacked-label-in-item`));
+    });
+  });
 });
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4af57373e9
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f36462dc96
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e7c7fe3b5f
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/index.html b/core/src/components/radio/test/label-placement/index.html
index ccc77dd838..458a35d708 100644
--- a/core/src/components/radio/test/label-placement/index.html
+++ b/core/src/components/radio/test/label-placement/index.html
@@ -122,6 +122,23 @@
             </ion-radio-group>
           </div>
         </div>
+
+        <h1>Placement Stacked</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Align Start</h2>
+            <ion-radio-group value="1">
+              <ion-radio label-placement="stacked" alignment="start" value="1">Enable Notifications</ion-radio>
+            </ion-radio-group>
+          </div>
+
+          <div class="grid-item">
+            <h2>Align Center</h2>
+            <ion-radio-group value="1">
+              <ion-radio label-placement="stacked" alignment="center" value="1">Enable Notifications</ion-radio>
+            </ion-radio-group>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts b/core/src/components/radio/test/label-placement/radio.e2e.ts
index 331c468732..de348d9d29 100644
--- a/core/src/components/radio/test/label-placement/radio.e2e.ts
+++ b/core/src/components/radio/test/label-placement/radio.e2e.ts
@@ -137,5 +137,34 @@ configs().forEach(({ title, screenshot, config }) => {
         await expect(radio).toHaveScreenshot(screenshot(`radio-label-fixed-justify-space-between`));
       });
     });
+    test.describe('radio: stacked placement', () => {
+      test('should align the label to the start of the container in the stacked position', async ({ page }) => {
+        await page.setContent(
+          `
+            <ion-radio-group value="1">
+              <ion-radio label-placement="stacked" alignment="start" style="width: 200px" value="1">This is a long label</ion-radio>
+            </ion-radio-group>
+          `,
+          config
+        );
+
+        const radio = page.locator('ion-radio');
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-stacked-align-start`));
+      });
+
+      test('should align the label to the center of the container in the stacked position', async ({ page }) => {
+        await page.setContent(
+          `
+            <ion-radio-group value="1">
+              <ion-radio label-placement="stacked" alignment="center" style="width: 200px" value="1">This is a long label</ion-radio>
+            </ion-radio-group>
+          `,
+          config
+        );
+
+        const radio = page.locator('ion-radio');
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-stacked-align-center`));
+      });
+    });
   });
 });
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7061e76152
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..40afe9ca8c
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5a4a3a8b71
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7061e76152
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..40afe9ca8c
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5a4a3a8b71
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7fe52c9908
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..bcec60d520
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b0b4a8db20
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7fe52c9908
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..bcec60d520
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b0b4a8db20
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f4533f5509
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5b1cd7323c
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5e427fc0ca
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7c26368755
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b5840591a4
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..95b0d308f6
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..758f636fbb
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..081aca65b6
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..398f64d0f9
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..718b2b5ecc
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a2924ac40f
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..bc1ef1cc51
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss
index d1b57b1776..2b8e5ceb1d 100644
--- a/core/src/components/range/range.ios.scss
+++ b/core/src/components/range/range.ios.scss
@@ -34,10 +34,31 @@
   @include margin(0, 0, 0, 16px);
 }
 
-:host(.range-has-pin) {
+:host(.range-has-pin:not(.range-label-placement-stacked)) {
+  /**
+  * The pin should not overlap any elements that are
+  * above the range. By adding padding to the top of the
+  * range, it provides a buffer for the pin to move into
+  * when it is pressed.
+  *
+  * The padding is not included when the label is stacked
+  * because the pin is below the label.
+  * It still requires a buffer to prevent the pin from
+  * overlapping the range. The buffer is added to the
+  * bottom of the range label instead of the host.
+  */
   @include padding($range-ios-padding-vertical + $range-ios-pin-font-size, null, null, null);
 }
 
+:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
+  /**
+  * The pin should not overlap the stacked label. By adding
+  * margin to the bottom of the label, it provides a buffer
+  * for the pin to move into when it is pressed.
+  */
+  @include margin(null, null, $range-ios-padding-vertical + $range-ios-pin-font-size, null);
+}
+
 .range-bar-active {
   bottom: 0;
 
diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss
index 6fb2a4a9f8..b5b534527a 100644
--- a/core/src/components/range/range.md.scss
+++ b/core/src/components/range/range.md.scss
@@ -52,10 +52,31 @@
   @include margin(0, 0, 0, 14px);
 }
 
-:host(.range-has-pin) {
+:host(.range-has-pin:not(.range-label-placement-stacked)) {
+  /**
+  * The pin should not overlap any elements that are
+  * above the range. By adding padding to the top of the
+  * range, it provides a buffer for the pin to move into
+  * when it is pressed.
+  *
+  * The padding is not included when the label is stacked
+  * because the pin is below the label.
+  * It still requires a buffer to prevent the pin from
+  * overlapping the range. The buffer is added to the
+  * bottom of the range label instead of the host.
+  */
   @include padding($range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical, null, null, null);
 }
 
+:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
+  /**
+  * The pin should not overlap the stacked label. By adding
+  * margin to the bottom of the label, it provides a buffer
+  * for the pin to move into when it is pressed.
+  */
+  @include margin(null, null, $range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical, null);
+}
+
 .range-bar-active {
   bottom: 0;
 
diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss
index 500b0a0566..fef1ab6bcd 100644
--- a/core/src/components/range/range.scss
+++ b/core/src/components/range/range.scss
@@ -308,3 +308,24 @@
   min-width: 100px;
   max-width: 200px;
 }
+
+// Range Label Placement - Stacked
+// ----------------------------------------------------------------
+
+/**
+ * Label is on top of the range.
+ */
+:host(.range-label-placement-stacked) .range-wrapper {
+  flex-direction: column;
+
+  align-items: stretch;
+}
+
+:host(.range-label-placement-stacked) .label-text-wrapper {
+  /**
+  * The margin between the label and
+  * the range should be on the bottom
+  * when the label sits on top.
+  */
+  @include margin(null, 0, $form-control-label-margin, 0);
+}
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 04bc1f0798..2a6f0e7626 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -228,8 +228,9 @@ export class Range implements ComponentInterface {
    * `"start"`: The label will appear to the left of the range in LTR and to the right in RTL.
    * `"end"`: The label will appear to the right of the range in LTR and to the left in RTL.
    * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+   * `"stacked"`: The label will appear above the range regardless of the direction.
    */
-  @Prop() labelPlacement: 'start' | 'end' | 'fixed' = 'start';
+  @Prop() labelPlacement: 'start' | 'end' | 'fixed' | 'stacked' = 'start';
 
   /**
    * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
diff --git a/core/src/components/range/test/label/index.html b/core/src/components/range/test/label/index.html
index c4c4b4c6b6..770eec0ff3 100644
--- a/core/src/components/range/test/label/index.html
+++ b/core/src/components/range/test/label/index.html
@@ -65,6 +65,12 @@
               <span slot="label">Temperature</span>
             </ion-range>
           </div>
+          <div class="grid-item">
+            <h2>Placement Stacked</h2>
+            <ion-range label-placement="stacked">
+              <span slot="label">Temperature</span>
+            </ion-range>
+          </div>
         </div>
 
         <h1>Label Property</h1>
@@ -81,6 +87,10 @@
             <h2>Placement Fixed</h2>
             <ion-range label="Temperature" label-placement="fixed"></ion-range>
           </div>
+          <div class="grid-item">
+            <h2>Placement Stacked</h2>
+            <ion-range label="Temperature" label-placement="stacked"></ion-range>
+          </div>
         </div>
 
         <h1>Slotted Items</h1>
@@ -109,6 +119,14 @@
               <ion-icon name="flame" slot="end"></ion-icon>
             </ion-range>
           </div>
+          <div class="grid-item">
+            <h2>Placement Stacked</h2>
+            <ion-range label-placement="stacked">
+              <span slot="label">Temperature</span>
+              <ion-icon name="snow" slot="start"></ion-icon>
+              <ion-icon name="flame" slot="end"></ion-icon>
+            </ion-range>
+          </div>
         </div>
       </ion-content>
     </ion-app>
diff --git a/core/src/components/range/test/label/range.e2e.ts b/core/src/components/range/test/label/range.e2e.ts
index 948dbb6022..d0cb66f7f4 100644
--- a/core/src/components/range/test/label/range.e2e.ts
+++ b/core/src/components/range/test/label/range.e2e.ts
@@ -58,6 +58,22 @@ configs().forEach(({ title, screenshot, config }) => {
 
         await expect(range).toHaveScreenshot(screenshot(`range-no-items-fixed`));
       });
+      test('should render label above the range slider', async ({ page }) => {
+        await page.setContent(
+          `
+          <div id="container" style="padding-inline-start: 20px;">
+            <ion-range label-placement="stacked">
+              <span slot="label">Volume</span>
+            </ion-range>
+          </div>
+        `,
+          config
+        );
+
+        const range = page.locator('#container');
+
+        await expect(range).toHaveScreenshot(screenshot(`range-no-items-stacked`));
+      });
     });
 
     test.describe('range: start and end items', () => {
@@ -124,6 +140,22 @@ configs().forEach(({ title, screenshot, config }) => {
 
         await expect(range).toHaveScreenshot(screenshot(`range-items-fixed`));
       });
+      test('should render label above the range slider', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-range label-placement="stacked">
+            <ion-icon name="volume-off" slot="start"></ion-icon>
+            <ion-icon name="volume-high" slot="end"></ion-icon>
+            <span slot="label">Volume</span>
+          </ion-range>
+        `,
+          config
+        );
+
+        const range = page.locator('ion-range');
+
+        await expect(range).toHaveScreenshot(screenshot(`range-items-stacked`));
+      });
     });
 
     test.describe('range: label prop', () => {
@@ -150,6 +182,20 @@ configs().forEach(({ title, screenshot, config }) => {
 
         await expect(range).toHaveScreenshot(screenshot(`range-label-prop-fixed`));
       });
+      test('should render label above the range slider', async ({ page }) => {
+        await page.setContent(
+          `
+          <div id="container" style="padding-inline-start: 20px;">
+            <ion-range label-placement="stacked" label="Volume"></ion-range>
+          </div>
+          `,
+          config
+        );
+
+        const range = page.locator('#container');
+
+        await expect(range).toHaveScreenshot(screenshot(`range-label-prop-stacked`));
+      });
     });
   });
 });
@@ -171,4 +217,28 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       await expect(range).toHaveScreenshot(screenshot(`range-label-truncate`));
     });
   });
+
+  test.describe(title('range: with pin'), () => {
+    test('should render pin below a stacked label', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="container" style="padding-inline-start: 20px;">
+          <ion-range label-placement="stacked" pin="true">
+            <span slot="label">Volume</span>
+          </ion-range>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+      const range = page.locator('ion-range');
+      const knob = range.locator('.range-knob-handle');
+
+      // Force the pin to show
+      await knob.evaluate((el: HTMLElement) => el.classList.add('ion-focused'));
+
+      await expect(container).toHaveScreenshot(screenshot(`range-stacked-pin`));
+    });
+  });
 });
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..633f4e0473
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..fafc74042c
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..dea88f62b1
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2ba306bc7c
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..9216f2aebe
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..24741f8284
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..32163bd2e2
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..cf2469b3e3
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5badd3e6c7
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7784381a21
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..088b74ae2e
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c894737e31
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-stacked-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ad95333221
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..48ece92dab
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3821516b40
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3953cf53ca
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..0a9255fd2d
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..cbe941e73d
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..84e8f1d094
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b8731e5ad2
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3c21e2e5ec
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..226eab757b
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..9ec8619f7d
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4fbe4b39b6
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-label-prop-stacked-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ad95333221
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..48ece92dab
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3821516b40
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3953cf53ca
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..0a9255fd2d
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..cbe941e73d
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..84e8f1d094
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b8731e5ad2
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3c21e2e5ec
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..226eab757b
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..9ec8619f7d
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4fbe4b39b6
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-stacked-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..410e0d6d83
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2f84d343b1
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f3d452bf03
Binary files /dev/null and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-stacked-pin-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/index.html b/core/src/components/toggle/test/item/index.html
index e954e7db11..df48514445 100644
--- a/core/src/components/toggle/test/item/index.html
+++ b/core/src/components/toggle/test/item/index.html
@@ -135,6 +135,27 @@
           </div>
         </div>
 
+        <h1>Placement Stacked</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Align Start</h2>
+            <ion-list>
+              <ion-item>
+                <ion-toggle label-placement="stacked" alignment="start">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-list>
+          </div>
+
+          <div class="grid-item">
+            <h2>Align Center</h2>
+            <ion-list>
+              <ion-item>
+                <ion-toggle label-placement="stacked" alignment="center">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-list>
+          </div>
+        </div>
+
         <h1>Multiline Label</h1>
         <div class="grid">
           <div class="grid-item">
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts b/core/src/components/toggle/test/item/toggle.e2e.ts
index ac05fb963e..58d4802d94 100644
--- a/core/src/components/toggle/test/item/toggle.e2e.ts
+++ b/core/src/components/toggle/test/item/toggle.e2e.ts
@@ -70,4 +70,23 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       await expect(list).toHaveScreenshot(screenshot(`toggle-long-label-in-item`));
     });
   });
+
+  test.describe(title('toggle: stacked label in item'), () => {
+    test('should render margins correctly when using stacked label in item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-radio-group>
+              <ion-item>
+                <ion-toggle label-placement="stacked">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`toggle-stacked-label-in-item`));
+    });
+  });
 });
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e6b028147d
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e37abf1dbb
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d75caf66ed
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/index.html b/core/src/components/toggle/test/label/index.html
index d7797fc9f7..2c4a106223 100644
--- a/core/src/components/toggle/test/label/index.html
+++ b/core/src/components/toggle/test/label/index.html
@@ -102,6 +102,19 @@
             <ion-toggle label-placement="fixed" justify="space-between">Enable Notifications</ion-toggle>
           </div>
         </div>
+
+        <h1>Placement Stacked</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Align Start</h2>
+            <ion-toggle label-placement="stacked" alignment="start">Enable Notifications</ion-toggle>
+          </div>
+
+          <div class="grid-item">
+            <h2>Align Center</h2>
+            <ion-toggle label-placement="stacked" alignment="center">Enable Notifications</ion-toggle>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts b/core/src/components/toggle/test/label/toggle.e2e.ts
index c140ad7117..733a4457de 100644
--- a/core/src/components/toggle/test/label/toggle.e2e.ts
+++ b/core/src/components/toggle/test/label/toggle.e2e.ts
@@ -126,4 +126,30 @@ configs().forEach(({ title, screenshot, config }) => {
       await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-fixed-justify-space-between`));
     });
   });
+
+  test.describe(title('toggle: stacked placement'), () => {
+    test('should align the label to the start of the container in the stacked position', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-toggle label-placement="stacked" alignment="start" style="width: 200px">This is a long label</ion-toggle>
+        `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-stacked-align-start`));
+    });
+
+    test('should align the label to the center of the container in the stacked position', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-toggle label-placement="stacked" alignment="center" style="width: 200px">This is a long label</ion-toggle>
+        `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-stacked-align-center`));
+    });
+  });
 });
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c36c838039
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..9bc6663f5b
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c5436ad34b
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..874329ab0c
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..038694a328
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..954d12a7f1
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4d14c31486
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5fed5eb61e
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..841eed5394
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bfff15439f
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..578638a2b7
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1fe1959423
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-center-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ef4f9cd441
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..794b26be7b
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d7bb93d8f9
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bcfc1ce4de
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..caeef73cbf
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..85c8b403c7
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1318de4f5c
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..be40a28715
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ae360ac608
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8004bbfe71
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b50cc8d3c1
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..564c0e6275
Binary files /dev/null and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-stacked-align-start-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss
index ef10a95178..4ee7585f96 100644
--- a/core/src/components/toggle/toggle.scss
+++ b/core/src/components/toggle/toggle.scss
@@ -94,8 +94,6 @@ input {
 
   flex-grow: 1;
 
-  align-items: center;
-
   height: inherit;
 
   transition: background-color 15ms linear;
@@ -125,6 +123,14 @@ input {
   @include margin($toggle-item-label-margin-top, null, $toggle-item-label-margin-bottom, null);
 }
 
+:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper {
+  @include margin($toggle-item-label-margin-top, null, $form-control-label-margin, null);
+}
+
+:host(.in-item.toggle-label-placement-stacked) .native-wrapper {
+  @include margin(null, null, $toggle-item-label-margin-bottom, null);
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -158,6 +164,18 @@ input {
   justify-content: end;
 }
 
+// Toggle Align
+// --------------------------------------------------
+
+
+:host(.toggle-alignment-start) .toggle-wrapper {
+  align-items: start;
+}
+
+:host(.toggle-alignment-center) .toggle-wrapper {
+  align-items: center;
+}
+
 // Toggle Label Placement - Start
 // ----------------------------------------------------------------
 
@@ -222,6 +240,25 @@ input {
   max-width: 200px;
 }
 
+// Toggle Label Placement - Stacked
+// ----------------------------------------------------------------
+
+/**
+ * Label is on top of the toggle.
+ */
+:host(.toggle-label-placement-stacked) .toggle-wrapper {
+  flex-direction: column;
+}
+
+:host(.toggle-label-placement-stacked) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the toggle should be on the bottom
+   * when the label sits on top.
+   */
+  @include margin(null, 0, $form-control-label-margin, 0);
+}
+
 // Toggle Background Track: Unchecked
 // --------------------------------------------------
 
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index bc5316e7ad..934133cb8b 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -90,8 +90,9 @@ export class Toggle implements ComponentInterface {
    * `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL.
    * `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL.
    * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+   * `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
    */
-  @Prop() labelPlacement: 'start' | 'end' | 'fixed' = 'start';
+  @Prop() labelPlacement: 'start' | 'end' | 'fixed' | 'stacked' = 'start';
 
   /**
    * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
@@ -115,6 +116,13 @@ export class Toggle implements ComponentInterface {
    */
   @Prop() justify: 'start' | 'end' | 'space-between' = 'space-between';
 
+  /**
+   * How to control the alignment of the toggle and label on the cross axis.
+   * ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
+   * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+   */
+  @Prop() alignment: 'start' | 'center' = 'center';
+
   /**
    * Emitted when the user switches the toggle on or off. Does not emit
    * when programmatically changing the value of the `checked` property.
@@ -319,7 +327,7 @@ export class Toggle implements ComponentInterface {
   }
 
   private renderToggle() {
-    const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name } = this;
+    const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
 
     const mode = getIonMode(this);
     const value = this.getValue();
@@ -336,6 +344,7 @@ export class Toggle implements ComponentInterface {
           'toggle-checked': checked,
           'toggle-disabled': disabled,
           [`toggle-justify-${justify}`]: true,
+          [`toggle-alignment-${alignment}`]: true,
           [`toggle-label-placement-${labelPlacement}`]: true,
           [`toggle-${rtl}`]: true,
         })}
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 7429a4cc60..57462d5e85 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -529,14 +529,14 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
 
 
 @ProxyCmp({
-  inputs: ['checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
 })
 @Component({
   selector: 'ion-checkbox',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'],
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'],
 })
 export class IonCheckbox {
   protected el: HTMLElement;
@@ -1558,14 +1558,14 @@ export declare interface IonProgressBar extends Components.IonProgressBar {}
 
 
 @ProxyCmp({
-  inputs: ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
+  inputs: ['alignment', 'color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
 })
 @Component({
   selector: 'ion-radio',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'],
+  inputs: ['alignment', 'color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'],
 })
 export class IonRadio {
   protected el: HTMLElement;
@@ -2319,14 +2319,14 @@ Shorthand for ionToastDidDismiss.
 
 
 @ProxyCmp({
-  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
 })
 @Component({
   selector: 'ion-toggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'],
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'],
 })
 export class IonToggle {
   protected el: HTMLElement;
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 5e134feb16..99d6dd3dcd 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -212,6 +212,7 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
   'value',
   'labelPlacement',
   'justify',
+  'alignment',
   'legacy',
   'ionChange',
   'ionFocus',
@@ -585,6 +586,7 @@ export const IonRadio = /*@__PURE__*/ defineContainer<JSX.IonRadio, JSX.IonRadio
   'labelPlacement',
   'legacy',
   'justify',
+  'alignment',
   'ionStyle',
   'ionFocus',
   'ionBlur'
@@ -845,6 +847,7 @@ export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle, JSX.IonTog
   'labelPlacement',
   'legacy',
   'justify',
+  'alignment',
   'ionChange',
   'ionFocus',
   'ionBlur',