diff --git a/core/api.txt b/core/api.txt
index 47b1307e5ae..0f16f5afa33 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 1cd7c27747f..d048e31f102 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 9f2b6269ea4..41beb296d50 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 08cfc581ff5..cf463bfbf55 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 0e4402bd8e1..220d8332b11 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 00000000000..4d6af40c9c7
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 00000000000..86359e9da99
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 00000000000..59af36718c3
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 156e3ca6dca..0d8b8ca18cd 100644
--- a/core/src/components/checkbox/test/item/index.html
+++ b/core/src/components/checkbox/test/item/index.html
@@ -137,6 +137,27 @@ <h2>Justify Space Between</h2>
           </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 1507ee857d6..0724007464b 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 00000000000..4436c8c4924
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 00000000000..806038db5b5
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 00000000000..106e8c25587
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 00000000000..cd5896ac16d
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 00000000000..806038db5b5
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 00000000000..106e8c25587
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 00000000000..1ac4e3c3110
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 00000000000..1881022673f
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 00000000000..4fbbd731746
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 00000000000..1ac4e3c3110
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 00000000000..1881022673f
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 00000000000..4fbbd731746
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 00000000000..7fe78475375
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 00000000000..f31eeedf374
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 00000000000..1122890b87c
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 00000000000..c2d66700922
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 00000000000..1b9cdcaa08a
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 00000000000..ef9656499e6
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 00000000000..e89f7501063
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 00000000000..aa6852de06b
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 00000000000..046c094c796
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 00000000000..1826b94de4e
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 00000000000..50a976a5433
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 00000000000..a2f5210b63d
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 cdc9a913d27..7efe2bca31b 100644
--- a/core/src/components/checkbox/test/label/index.html
+++ b/core/src/components/checkbox/test/label/index.html
@@ -104,6 +104,19 @@ <h2>Justify Space Between</h2>
             <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 3fe60536809..66610791ecc 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 d6618dcffe6..b43f2c2c55c 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 42235e41155..36e46779fd2 100644
--- a/core/src/components/radio/test/item/index.html
+++ b/core/src/components/radio/test/item/index.html
@@ -155,6 +155,31 @@ <h2>Justify Space Between</h2>
           </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 8d0037b8921..5ebdba1549c 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 00000000000..4af57373e9f
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 00000000000..f36462dc96f
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 00000000000..e7c7fe3b5f9
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 ccc77dd8382..458a35d7086 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 @@ <h2>Justify Space Between</h2>
             </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 331c4687321..de348d9d292 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 00000000000..7061e76152e
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 00000000000..40afe9ca8c2
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 00000000000..5a4a3a8b71a
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 00000000000..7061e76152e
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 00000000000..40afe9ca8c2
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 00000000000..5a4a3a8b71a
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 00000000000..7fe52c9908d
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 00000000000..bcec60d5208
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 00000000000..b0b4a8db20e
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 00000000000..7fe52c9908d
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 00000000000..bcec60d5208
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 00000000000..b0b4a8db20e
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 00000000000..f4533f5509a
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 00000000000..5b1cd7323c9
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 00000000000..5e427fc0ca0
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 00000000000..7c263687550
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 00000000000..b5840591a4c
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 00000000000..95b0d308f6c
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 00000000000..758f636fbb4
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 00000000000..081aca65b66
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 00000000000..398f64d0f94
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 00000000000..718b2b5ecc7
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 00000000000..a2924ac40f8
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 00000000000..bc1ef1cc517
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 d1b57b17761..2b8e5ceb1d8 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 6fb2a4a9f8a..b5b534527a3 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 500b0a05660..fef1ab6bcd9 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 04bc1f07983..2a6f0e76261 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 c4c4b4c6b68..770eec0ff38 100644
--- a/core/src/components/range/test/label/index.html
+++ b/core/src/components/range/test/label/index.html
@@ -65,6 +65,12 @@ <h2>Placement Fixed</h2>
               <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 End</h2>
             <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 @@ <h2>Placement Fixed</h2>
               <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 948dbb6022b..d0cb66f7f4d 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 00000000000..633f4e0473d
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 00000000000..fafc74042cb
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 00000000000..dea88f62b14
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 00000000000..2ba306bc7ce
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 00000000000..9216f2aebe2
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 00000000000..24741f8284c
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 00000000000..32163bd2e29
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 00000000000..cf2469b3e30
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 00000000000..5badd3e6c7a
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 00000000000..7784381a21c
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 00000000000..088b74ae2ee
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 00000000000..c894737e310
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 00000000000..ad953332213
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 00000000000..48ece92daba
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 00000000000..3821516b40a
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 00000000000..3953cf53ca3
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 00000000000..0a9255fd2d2
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 00000000000..cbe941e73d4
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 00000000000..84e8f1d094f
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 00000000000..b8731e5ad24
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 00000000000..3c21e2e5ec9
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 00000000000..226eab757bf
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 00000000000..9ec8619f7d6
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 00000000000..4fbe4b39b63
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 00000000000..ad953332213
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 00000000000..48ece92daba
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 00000000000..3821516b40a
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 00000000000..3953cf53ca3
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 00000000000..0a9255fd2d2
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 00000000000..cbe941e73d4
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 00000000000..84e8f1d094f
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 00000000000..b8731e5ad24
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 00000000000..3c21e2e5ec9
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 00000000000..226eab757bf
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 00000000000..9ec8619f7d6
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 00000000000..4fbe4b39b63
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 00000000000..410e0d6d83b
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 00000000000..2f84d343b1f
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 00000000000..f3d452bf037
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 e954e7db11d..df48514445f 100644
--- a/core/src/components/toggle/test/item/index.html
+++ b/core/src/components/toggle/test/item/index.html
@@ -135,6 +135,27 @@ <h2>Justify Space Between</h2>
           </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 ac05fb963e3..58d4802d94f 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 00000000000..e6b028147d4
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 00000000000..e37abf1dbbc
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 00000000000..d75caf66ed6
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 d7797fc9f71..2c4a1062239 100644
--- a/core/src/components/toggle/test/label/index.html
+++ b/core/src/components/toggle/test/label/index.html
@@ -102,6 +102,19 @@ <h2>Justify Space Between</h2>
             <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 c140ad71170..733a4457deb 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 00000000000..c36c8380394
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 00000000000..9bc6663f5b7
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 00000000000..c5436ad34b1
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 00000000000..874329ab0c3
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 00000000000..038694a328c
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 00000000000..954d12a7f1f
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 00000000000..4d14c31486e
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 00000000000..5fed5eb61ef
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 00000000000..841eed53943
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 00000000000..bfff15439f5
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 00000000000..578638a2b70
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 00000000000..1fe19594238
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 00000000000..ef4f9cd4410
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 00000000000..794b26be7ba
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 00000000000..d7bb93d8f95
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 00000000000..bcfc1ce4de8
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 00000000000..caeef73cbf8
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 00000000000..85c8b403c7d
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 00000000000..1318de4f5cb
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 00000000000..be40a287154
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 00000000000..ae360ac608b
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 00000000000..8004bbfe716
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 00000000000..b50cc8d3c18
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 00000000000..564c0e62753
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 ef10a951784..4ee7585f964 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 bc5316e7ad3..934133cb8b4 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 7429a4cc60d..57462d5e850 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 5e134feb166..99d6dd3dcdc 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',