diff --git a/packages/form-layout/src/styles/vaadin-form-item-base-styles.js b/packages/form-layout/src/styles/vaadin-form-item-base-styles.js
index 3e694cb7e9d..fe8a076ce6e 100644
--- a/packages/form-layout/src/styles/vaadin-form-item-base-styles.js
+++ b/packages/form-layout/src/styles/vaadin-form-item-base-styles.js
@@ -33,8 +33,30 @@ export const formItemStyles = css`
     font-size: var(--vaadin-form-item-label-font-size, inherit);
     font-weight: var(--vaadin-form-item-label-font-weight, 500);
     line-height: var(--vaadin-form-item-label-line-height, inherit);
+    position: relative;
     width: var(--_form-item-labels-aside, var(--_label-width, 8em));
     word-break: break-word;
+    box-sizing: border-box;
+  }
+
+  :host([required]) [part='label'] {
+    padding-inline-end: 1em;
+  }
+
+  [part='required-indicator'] {
+    display: inline-block;
+    position: absolute;
+    width: 1em;
+    text-align: center;
+    color: var(--vaadin-input-field-required-indicator-color, var(--vaadin-text-color-secondary));
+  }
+
+  [part='required-indicator']::after {
+    content: var(--vaadin-input-field-required-indicator, '*');
+  }
+
+  :host(:not([required])) [part='required-indicator'] {
+    display: none;
   }
 
   #spacing {
diff --git a/packages/form-layout/test/visual/aura/form-layout.test.js b/packages/form-layout/test/visual/aura/form-layout.test.js
index e6bb50a3db7..05437bdd2da 100644
--- a/packages/form-layout/test/visual/aura/form-layout.test.js
+++ b/packages/form-layout/test/visual/aura/form-layout.test.js
@@ -1,3 +1,4 @@
+import { nextFrame } from '@vaadin/testing-helpers';
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '@vaadin/aura/aura.css';
@@ -50,4 +51,44 @@ describe('form-layout', () => {
       await visualDiff(element, 'basic');
     });
   });
+
+  describe('required indicator', () => {
+    beforeEach(async () => {
+      element = fixtureSync(`
+        <vaadin-form-layout>
+          <vaadin-form-item>
+            <label slot="label">First Name</label>
+            <input required value="Jane" />
+          </vaadin-form-item>
+
+          <vaadin-form-item>
+            <label slot="label">Last Name</label>
+            <input required />
+          </vaadin-form-item>
+
+          <vaadin-form-item>
+            <label slot="label">Email</label>
+            <input required value="jane.doe@example.com" />
+          </vaadin-form-item>
+        </vaadin-form-layout>
+      `);
+
+      await nextFrame();
+
+      // Make the second input validate so that it becomes invalid
+      element.querySelectorAll('input')[1].dispatchEvent(new CustomEvent('change'));
+    });
+
+    it('required indicator - labels aside', async () => {
+      await visualDiff(element, 'required-indicator-labels-aside');
+    });
+
+    it('required-indicator - labels on top', async () => {
+      element.responsiveSteps = element.responsiveSteps.map((step) => {
+        step.labelsPosition = 'top';
+        return step;
+      });
+      await visualDiff(element, 'required-indicator-labels-on-top');
+    });
+  });
 });
diff --git a/packages/form-layout/test/visual/aura/screenshots/dark/form-layout/baseline/required-indicator-labels-aside.png b/packages/form-layout/test/visual/aura/screenshots/dark/form-layout/baseline/required-indicator-labels-aside.png
new file mode 100644
index 00000000000..a28be42df68
Binary files /dev/null and b/packages/form-layout/test/visual/aura/screenshots/dark/form-layout/baseline/required-indicator-labels-aside.png differ
diff --git a/packages/form-layout/test/visual/aura/screenshots/dark/form-layout/baseline/required-indicator-labels-on-top.png b/packages/form-layout/test/visual/aura/screenshots/dark/form-layout/baseline/required-indicator-labels-on-top.png
new file mode 100644
index 00000000000..2a148e577bd
Binary files /dev/null and b/packages/form-layout/test/visual/aura/screenshots/dark/form-layout/baseline/required-indicator-labels-on-top.png differ
diff --git a/packages/form-layout/test/visual/aura/screenshots/default/form-layout/baseline/required-indicator-labels-aside.png b/packages/form-layout/test/visual/aura/screenshots/default/form-layout/baseline/required-indicator-labels-aside.png
new file mode 100644
index 00000000000..718efb9c777
Binary files /dev/null and b/packages/form-layout/test/visual/aura/screenshots/default/form-layout/baseline/required-indicator-labels-aside.png differ
diff --git a/packages/form-layout/test/visual/aura/screenshots/default/form-layout/baseline/required-indicator-labels-on-top.png b/packages/form-layout/test/visual/aura/screenshots/default/form-layout/baseline/required-indicator-labels-on-top.png
new file mode 100644
index 00000000000..3aaed51f3e9
Binary files /dev/null and b/packages/form-layout/test/visual/aura/screenshots/default/form-layout/baseline/required-indicator-labels-on-top.png differ
diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-aside.png b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-aside.png
index 997b899240b..6b31a1e10ea 100644
Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-aside.png and b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-aside.png differ
diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-on-top.png b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-on-top.png
index 0478ed41964..524d4a3bf32 100644
Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-on-top.png and b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-on-top.png differ
diff --git a/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/basic.png b/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/basic.png
index 62b6ab222f9..4d68cdbfb08 100644
Binary files a/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/basic.png and b/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/basic.png differ
diff --git a/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/required-indicator-labels-aside.png b/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/required-indicator-labels-aside.png
index b1e46cb0048..dd46e6de05c 100644
Binary files a/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/required-indicator-labels-aside.png and b/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/required-indicator-labels-aside.png differ
diff --git a/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/required-indicator-labels-on-top.png b/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/required-indicator-labels-on-top.png
index 6d8d8c11a44..c7d7747bbc7 100644
Binary files a/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/required-indicator-labels-on-top.png and b/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/required-indicator-labels-on-top.png differ
diff --git a/packages/vaadin-lumo-styles/src/components/form-item.css b/packages/vaadin-lumo-styles/src/components/form-item.css
index 28541fc85d0..4c47c029fdc 100644
--- a/packages/vaadin-lumo-styles/src/components/form-item.css
+++ b/packages/vaadin-lumo-styles/src/components/form-item.css
@@ -14,23 +14,15 @@
     margin-left: calc(var(--lumo-border-radius-m) / 4);
     margin-bottom: var(--lumo-space-xs);
     line-height: 1.333;
+    min-height: 1lh;
   }
 
   [part='required-indicator']::after {
     content: var(--vaadin-input-field-required-indicator, var(--lumo-required-field-indicator, '\2022'));
-    transition: opacity 0.2s;
-    opacity: 0;
     color: var(
       --vaadin-input-field-required-indicator-color,
       var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color))
     );
-    position: relative;
-    width: 1em;
-    text-align: center;
-  }
-
-  :host([required]) [part='required-indicator']::after {
-    opacity: 1;
   }
 
   :host([invalid]) [part='required-indicator']::after {