diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png
index 44dc779ab3e..ccd569c8344 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png
index fb0a3ba3d96..6ed97185b5f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Playground.png
index 082fd46a18d..8e3238b3b63 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png
index aede257cfe5..55b1fd76bef 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
index b2f0be35dc8..8dc5fa3c872 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Playground.png
index 93a14af8ba4..5168aa02f8d 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png
index e97606cc7b8..f4e61afca63 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Playground.png
index a68eab52a69..44723ec070b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png
index 0cc95f3f6cb..3dde234364f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png
index 1921fd64987..2883ad41688 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png
index 292556a3c4e..f9217e4a21f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Playground.png
index 811f03cc64a..25ad801e4f0 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png
index 40578428372..338bbf80b3d 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
index aa15cbb7eb2..23ef9c369cf 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Playground.png
index 5a404b0f36f..ba3c8be4126 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png
index 86c8bb31ffe..76050a9ffb6 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Playground.png
index 0da0ec76166..523ec069dbb 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png
index 315efab86af..f0efe4bc1fa 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png differ
diff --git a/packages/eui/changelogs/upcoming/7967.md b/packages/eui/changelogs/upcoming/7967.md
new file mode 100644
index 00000000000..ce8ecbf7e84
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7967.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiFormLabel` and `EuiFormLegend` to Emotion; Removed `@euiFormLabel` mixin
diff --git a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
index 71d6ac1e6e8..c94923514f1 100644
--- a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
+++ b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
@@ -570,7 +570,7 @@ exports[`EuiColorPicker prepend and append 1`] = `
       class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
     >
       <label
-        class="euiFormLabel"
+        class="euiFormLabel emotion-euiFormLabel"
       >
         prepend
       </label>
@@ -619,7 +619,7 @@ exports[`EuiColorPicker prepend and append 1`] = `
       class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
     >
       <label
-        class="euiFormLabel"
+        class="euiFormLabel emotion-euiFormLabel"
       >
         append
       </label>
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
index f0a8e28e33c..8e11651e26b 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
@@ -316,7 +316,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             id="generated-id"
           >
             <label
-              class="euiFormLabel"
+              class="euiFormLabel emotion-euiFormLabel"
             >
               Refresh every
             </label>
diff --git a/packages/eui/src/components/form/_index.scss b/packages/eui/src/components/form/_index.scss
index a2f82046dd3..25fadb5c019 100644
--- a/packages/eui/src/components/form/_index.scss
+++ b/packages/eui/src/components/form/_index.scss
@@ -1,6 +1,4 @@
 @import 'checkbox/index';
-@import 'form_fieldset/index';
-@import 'form_label/index';
 @import 'form_row/index';
 @import 'radio/index';
 @import 'switch/index';
diff --git a/packages/eui/src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap b/packages/eui/src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap
index a2d9bbc2fbc..4181c4ed6b7 100644
--- a/packages/eui/src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap
+++ b/packages/eui/src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`EuiCheckboxGroup (mocked checkbox) legend is rendered 1`] = `
   class="euiCheckboxGroup emotion-euiCheckboxGroup"
 >
   <legend
-    class="euiFormLegend"
+    class="euiFormLegend emotion-euiFormLegend"
   >
     A legend
   </legend>
diff --git a/packages/eui/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap b/packages/eui/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
index 19e7eea0f8c..fadf9767ebe 100644
--- a/packages/eui/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
+++ b/packages/eui/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
@@ -308,7 +308,7 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
       >
         <label
           aria-invalid="true"
-          class="euiFormLabel euiFormRow__label euiFormLabel-isInvalid"
+          class="euiFormLabel euiFormRow__label euiFormLabel-isInvalid emotion-euiFormLabel-invalid"
           for="generated-id"
           id="generated-id-label"
         >
diff --git a/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap b/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
index 39845a04ec3..260aeb8580b 100644
--- a/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
+++ b/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
@@ -102,7 +102,7 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
     class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
   >
     <label
-      class="euiFormLabel"
+      class="euiFormLabel emotion-euiFormLabel"
     >
       String
     </label>
@@ -299,7 +299,7 @@ exports[`EuiFieldPassword props prepend and append is rendered 1`] = `
     class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
   >
     <label
-      class="euiFormLabel"
+      class="euiFormLabel emotion-euiFormLabel"
     >
       String
     </label>
@@ -333,7 +333,7 @@ exports[`EuiFieldPassword props prepend and append is rendered 1`] = `
     class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
   >
     <label
-      class="euiFormLabel"
+      class="euiFormLabel emotion-euiFormLabel"
     >
       String
     </label>
diff --git a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
index 6093a747678..b711adb7d68 100644
--- a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
+++ b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
@@ -369,7 +369,7 @@ exports[`EuiFormControlLayout props one append string is rendered 1`] = `
     class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
   >
     <label
-      class="euiFormLabel"
+      class="euiFormLabel emotion-euiFormLabel"
     >
       1
     </label>
@@ -421,7 +421,7 @@ exports[`EuiFormControlLayout props one prepend string is rendered 1`] = `
     class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
   >
     <label
-      class="euiFormLabel"
+      class="euiFormLabel emotion-euiFormLabel"
     >
       1
     </label>
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
index 024158cfa75..c1978bfbecb 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
@@ -125,7 +125,7 @@ export const euiFormControlLayoutSideNodeStyles = (
 
       ${text} {
         /* Override .euiFormLabel CSS */
-        cursor: default !important; /* stylelint-disable-line declaration-no-important */
+        cursor: default;
       }
 
       /* Account for button padding when spacing children */
diff --git a/packages/eui/src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap b/packages/eui/src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap
index 20203c9e495..aab6d4f6a24 100644
--- a/packages/eui/src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap
+++ b/packages/eui/src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`EuiFormFieldset is rendered 1`] = `
 exports[`EuiFormFieldset props legend is rendered 1`] = `
 <fieldset>
   <legend
-    class="euiFormLegend"
+    class="euiFormLegend emotion-euiFormLegend"
   >
     Legend
   </legend>
diff --git a/packages/eui/src/components/form/form_fieldset/__snapshots__/form_legend.test.tsx.snap b/packages/eui/src/components/form/form_fieldset/__snapshots__/form_legend.test.tsx.snap
index 37e5410c007..0e210f32e43 100644
--- a/packages/eui/src/components/form/form_fieldset/__snapshots__/form_legend.test.tsx.snap
+++ b/packages/eui/src/components/form/form_fieldset/__snapshots__/form_legend.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiFormLegend is rendered 1`] = `
 <legend
   aria-label="aria-label"
-  class="euiFormLegend testClass1 testClass2 emotion-euiTestCss"
+  class="euiFormLegend testClass1 testClass2 emotion-euiFormLegend-euiTestCss"
   data-test-subj="test subject string"
 >
   Legend
@@ -12,7 +12,7 @@ exports[`EuiFormLegend is rendered 1`] = `
 
 exports[`EuiFormLegend props compressed is rendered 1`] = `
 <legend
-  class="euiFormLegend euiFormLegend--compressed"
+  class="euiFormLegend emotion-euiFormLegend-compressed"
 >
   Legend
 </legend>
@@ -20,7 +20,7 @@ exports[`EuiFormLegend props compressed is rendered 1`] = `
 
 exports[`EuiFormLegend props hidden is rendered 1`] = `
 <legend
-  class="euiFormLegend euiFormLegend-isHidden"
+  class="euiFormLegend euiFormLegend-isHidden emotion-euiFormLegend"
 >
   <span
     class="emotion-euiScreenReaderOnly"
diff --git a/packages/eui/src/components/form/form_fieldset/_form_legend.scss b/packages/eui/src/components/form/form_fieldset/_form_legend.scss
deleted file mode 100644
index 0b79ffc6f06..00000000000
--- a/packages/eui/src/components/form/form_fieldset/_form_legend.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.euiFormLegend {
-  @include euiFormLabel;
-
-  &:not(.euiFormLegend-isHidden) {
-    margin-bottom: $euiSizeS;
-
-    &.euiFormLegend--compressed {
-      margin-bottom: $euiSizeXS;
-    }
-  }
-}
diff --git a/packages/eui/src/components/form/form_fieldset/_index.scss b/packages/eui/src/components/form/form_fieldset/_index.scss
deleted file mode 100644
index 2751e94c43c..00000000000
--- a/packages/eui/src/components/form/form_fieldset/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'form_legend';
diff --git a/packages/eui/src/components/form/form_fieldset/form_legend.styles.ts b/packages/eui/src/components/form/form_fieldset/form_legend.styles.ts
new file mode 100644
index 00000000000..4fbb5106664
--- /dev/null
+++ b/packages/eui/src/components/form/form_fieldset/form_legend.styles.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../services';
+import { logicalCSS } from '../../../global_styling';
+import { euiFormLabel } from '../form_label/form_label.styles';
+
+export const euiFormLegendStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiFormLegend: css`
+      ${euiFormLabel(euiThemeContext)}
+    `,
+    // Skip css`` to avoid generating an extra Emotion className
+    uncompressed: logicalCSS('margin-bottom', euiTheme.size.s),
+    compressed: css(logicalCSS('margin-bottom', euiTheme.size.xs)),
+  };
+};
diff --git a/packages/eui/src/components/form/form_fieldset/form_legend.tsx b/packages/eui/src/components/form/form_fieldset/form_legend.tsx
index 70f2aba97c7..56e42f5f9df 100644
--- a/packages/eui/src/components/form/form_fieldset/form_legend.tsx
+++ b/packages/eui/src/components/form/form_fieldset/form_legend.tsx
@@ -7,10 +7,14 @@
  */
 
 import React, { HTMLAttributes, FunctionComponent, ReactNode } from 'react';
-import { CommonProps } from '../../common';
 import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../../services';
+import { CommonProps } from '../../common';
 import { EuiScreenReaderOnly } from '../../accessibility';
 
+import { euiFormLegendStyles } from './form_legend.styles';
+
 export type EuiFormLegendProps = HTMLAttributes<HTMLLegendElement> &
   CommonProps & {
     /**
@@ -32,17 +36,21 @@ export const EuiFormLegend: FunctionComponent<EuiFormLegendProps> = ({
   ...rest
 }) => {
   const isLegendHidden = display === 'hidden';
+
+  const styles = useEuiMemoizedStyles(euiFormLegendStyles);
+  const cssStyles = [
+    styles.euiFormLegend,
+    !isLegendHidden && (compressed ? styles.compressed : styles.uncompressed),
+  ];
+
   const classes = classNames(
     'euiFormLegend',
-    {
-      'euiFormLegend-isHidden': isLegendHidden,
-      'euiFormLegend--compressed': compressed,
-    },
+    { 'euiFormLegend-isHidden': isLegendHidden },
     className
   );
 
   return (
-    <legend className={classes} {...rest}>
+    <legend css={cssStyles} className={classes} {...rest}>
       {isLegendHidden ? (
         <EuiScreenReaderOnly>
           <span>{children}</span>
diff --git a/packages/eui/src/components/form/form_label/__snapshots__/form_label.test.tsx.snap b/packages/eui/src/components/form/form_label/__snapshots__/form_label.test.tsx.snap
index 93c21578dbd..e8ca9716d41 100644
--- a/packages/eui/src/components/form/form_label/__snapshots__/form_label.test.tsx.snap
+++ b/packages/eui/src/components/form/form_label/__snapshots__/form_label.test.tsx.snap
@@ -3,38 +3,38 @@
 exports[`EuiFormLabel is rendered 1`] = `
 <label
   aria-label="aria-label"
-  class="euiFormLabel testClass1 testClass2 emotion-euiTestCss"
+  class="euiFormLabel testClass1 testClass2 emotion-euiFormLabel-euiTestCss"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiFormLabel props isDisabled is rendered 1`] = `
 <label
-  class="euiFormLabel euiFormLabel-isDisabled"
+  class="euiFormLabel euiFormLabel-isDisabled emotion-euiFormLabel"
 />
 `;
 
 exports[`EuiFormLabel props isDisabled is still disabled with for attribute 1`] = `
 <label
-  class="euiFormLabel euiFormLabel-isDisabled"
+  class="euiFormLabel euiFormLabel-isDisabled emotion-euiFormLabel"
   for=""
 />
 `;
 
 exports[`EuiFormLabel props isFocused is rendered 1`] = `
 <label
-  class="euiFormLabel euiFormLabel-isFocused"
+  class="euiFormLabel euiFormLabel-isFocused emotion-euiFormLabel-focused"
 />
 `;
 
 exports[`EuiFormLabel props isInvalid is rendered 1`] = `
 <label
-  class="euiFormLabel euiFormLabel-isInvalid"
+  class="euiFormLabel euiFormLabel-isInvalid emotion-euiFormLabel-invalid"
 />
 `;
 
 exports[`EuiFormLabel props type can be changed to legend 1`] = `
 <legend
-  class="euiFormLabel"
+  class="euiFormLabel emotion-euiFormLabel"
 />
 `;
diff --git a/packages/eui/src/components/form/form_label/_form_label.scss b/packages/eui/src/components/form/form_label/_form_label.scss
deleted file mode 100644
index 20157b715a8..00000000000
--- a/packages/eui/src/components/form/form_label/_form_label.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * 1. Focused state overrides invalid state.
- * 2. Disabled state overrides pointer.
- */
-.euiFormLabel {
-  @include euiFormLabel;
-  display: inline-block;
-  transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
-
-  &.euiFormLabel-isInvalid {
-    color: $euiColorDanger; /* 1 */
-  }
-
-  &.euiFormLabel-isFocused {
-    color: $euiColorPrimary; /* 1 */
-  }
-
-  &[for] {
-    cursor: pointer; /* 2 */
-  }
-
-  &[for].euiFormLabel-isDisabled {
-    cursor: default; /* 2 */
-  }
-}
diff --git a/packages/eui/src/components/form/form_label/_index.scss b/packages/eui/src/components/form/form_label/_index.scss
deleted file mode 100644
index b16c3c3d3bd..00000000000
--- a/packages/eui/src/components/form/form_label/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'form_label';
diff --git a/packages/eui/src/components/form/form_label/form_label.styles.ts b/packages/eui/src/components/form/form_label/form_label.styles.ts
new file mode 100644
index 00000000000..ec4439c062a
--- /dev/null
+++ b/packages/eui/src/components/form/form_label/form_label.styles.ts
@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { serializeStyles, type CSSObject } from '@emotion/serialize';
+
+import { UseEuiTheme } from '../../../services';
+import { euiCanAnimate, euiTextBreakWord } from '../../../global_styling';
+import { euiTitle } from '../../title/title.styles';
+
+export const euiFormLabel = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  // Exclude the fontWeight from the title, since we're setting our own later
+  const { fontWeight: _, ..._titleStyles } = euiTitle(euiThemeContext, 'xxxs');
+  // Since we're not returning a css`` string (to avoid generating an extra Emotion
+  // className), we need to manually serialize the style object into a string
+  const titleStyles = serializeStyles([_titleStyles as CSSObject]).styles;
+
+  return `
+    ${titleStyles}
+    font-weight: ${euiTheme.font.weight.semiBold};
+    ${euiTextBreakWord()}
+  `;
+};
+
+export const euiFormLabelStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiFormLabel: css`
+      ${euiFormLabel(euiThemeContext)}
+      display: inline-block;
+
+      ${euiCanAnimate} {
+        transition: color ${euiTheme.animation.fast}
+          ${euiTheme.animation.resistance};
+      }
+    `,
+    // Skip css`` to avoid generating an extra Emotion className
+    // Use :where to reduce specificity & make the CSS easier to override by prepend/append nodes
+    notDisabled: `
+      &:where([for]) {
+        cursor: pointer;
+      }
+    `,
+    invalid: css`
+      color: ${euiTheme.colors.danger};
+    `,
+    // Focused state should override invalid state
+    focused: css`
+      color: ${euiTheme.colors.primary};
+    `,
+  };
+};
diff --git a/packages/eui/src/components/form/form_label/form_label.tsx b/packages/eui/src/components/form/form_label/form_label.tsx
index 85248a42ab1..dff8e7bd401 100644
--- a/packages/eui/src/components/form/form_label/form_label.tsx
+++ b/packages/eui/src/components/form/form_label/form_label.tsx
@@ -12,8 +12,12 @@ import React, {
   HTMLAttributes,
 } from 'react';
 import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../../services';
 import { CommonProps, ExclusiveUnion } from '../../common';
 
+import { euiFormLabelStyles } from './form_label.styles';
+
 interface EuiFormLabelCommonProps {
   isFocused?: boolean;
   isInvalid?: boolean;
@@ -54,6 +58,14 @@ export const EuiFormLabel: FunctionComponent<EuiFormLabelProps> = ({
   className,
   ...rest
 }: EuiFormLabelProps) => {
+  const styles = useEuiMemoizedStyles(euiFormLabelStyles);
+  const cssStyles = [
+    styles.euiFormLabel,
+    !isDisabled && styles.notDisabled,
+    isInvalid && styles.invalid,
+    isFocused && styles.focused,
+  ];
+
   const classes = classNames('euiFormLabel', className, {
     'euiFormLabel-isFocused': isFocused,
     'euiFormLabel-isInvalid': isInvalid,
@@ -63,6 +75,7 @@ export const EuiFormLabel: FunctionComponent<EuiFormLabelProps> = ({
   if (type === 'legend') {
     return (
       <legend
+        css={cssStyles}
         className={classes}
         {...(rest as HTMLAttributes<HTMLLegendElement>)}
       >
@@ -72,6 +85,7 @@ export const EuiFormLabel: FunctionComponent<EuiFormLabelProps> = ({
   } else {
     return (
       <label
+        css={cssStyles}
         className={classes}
         {...(rest as LabelHTMLAttributes<HTMLLabelElement>)}
       >
diff --git a/packages/eui/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap b/packages/eui/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap
index d63486f1acb..ec324b1d2b9 100644
--- a/packages/eui/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap
+++ b/packages/eui/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap
@@ -1,209 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiFormRow behavior onBlur is called in child 1`] = `
-<EuiFormRow
-  describedByIds={[]}
-  display="row"
-  hasChildLabel={true}
-  hasEmptyLabelSpace={false}
-  label={
-    <span>
-      Label
-    </span>
-  }
-  labelType="label"
->
-  <div
-    className="euiFormRow euiFormRow--hasLabel"
-    id="generated-id-row"
-  >
-    <div
-      className="euiFormRow__labelWrapper"
-    >
-      <EuiFormLabel
-        className="euiFormRow__label"
-        htmlFor="generated-id"
-        id="generated-id-label"
-        isFocused={false}
-        type="label"
-      >
-        <label
-          className="euiFormLabel euiFormRow__label"
-          htmlFor="generated-id"
-          id="generated-id-label"
-        >
-          <span>
-            Label
-          </span>
-        </label>
-      </EuiFormLabel>
-    </div>
-    <div
-      className="euiFormRow__fieldWrapper"
-    >
-      <input
-        id="generated-id"
-        onBlur={[Function]}
-        onFocus={[Function]}
-      />
-    </div>
-  </div>
-</EuiFormRow>
-`;
-
-exports[`EuiFormRow behavior onBlur works in parent even if not in child 1`] = `
-<EuiFormRow
-  describedByIds={[]}
-  display="row"
-  hasChildLabel={true}
-  hasEmptyLabelSpace={false}
-  label={
-    <span>
-      Label
-    </span>
-  }
-  labelType="label"
->
-  <div
-    className="euiFormRow euiFormRow--hasLabel"
-    id="generated-id-row"
-  >
-    <div
-      className="euiFormRow__labelWrapper"
-    >
-      <EuiFormLabel
-        className="euiFormRow__label"
-        htmlFor="generated-id"
-        id="generated-id-label"
-        isFocused={false}
-        type="label"
-      >
-        <label
-          className="euiFormLabel euiFormRow__label"
-          htmlFor="generated-id"
-          id="generated-id-label"
-        >
-          <span>
-            Label
-          </span>
-        </label>
-      </EuiFormLabel>
-    </div>
-    <div
-      className="euiFormRow__fieldWrapper"
-    >
-      <input
-        id="generated-id"
-        onBlur={[Function]}
-        onFocus={[Function]}
-      />
-    </div>
-  </div>
-</EuiFormRow>
-`;
-
-exports[`EuiFormRow behavior onFocus is called in child 1`] = `
-<EuiFormRow
-  describedByIds={[]}
-  display="row"
-  hasChildLabel={true}
-  hasEmptyLabelSpace={false}
-  label={
-    <span>
-      Label
-    </span>
-  }
-  labelType="label"
->
-  <div
-    className="euiFormRow euiFormRow--hasLabel"
-    id="generated-id-row"
-  >
-    <div
-      className="euiFormRow__labelWrapper"
-    >
-      <EuiFormLabel
-        className="euiFormRow__label"
-        htmlFor="generated-id"
-        id="generated-id-label"
-        isFocused={true}
-        type="label"
-      >
-        <label
-          className="euiFormLabel euiFormRow__label euiFormLabel-isFocused"
-          htmlFor="generated-id"
-          id="generated-id-label"
-        >
-          <span>
-            Label
-          </span>
-        </label>
-      </EuiFormLabel>
-    </div>
-    <div
-      className="euiFormRow__fieldWrapper"
-    >
-      <input
-        id="generated-id"
-        onBlur={[Function]}
-        onFocus={[Function]}
-      />
-    </div>
-  </div>
-</EuiFormRow>
-`;
-
-exports[`EuiFormRow behavior onFocus works in parent even if not in child 1`] = `
-<EuiFormRow
-  describedByIds={[]}
-  display="row"
-  hasChildLabel={true}
-  hasEmptyLabelSpace={false}
-  label={
-    <span>
-      Label
-    </span>
-  }
-  labelType="label"
->
-  <div
-    className="euiFormRow euiFormRow--hasLabel"
-    id="generated-id-row"
-  >
-    <div
-      className="euiFormRow__labelWrapper"
-    >
-      <EuiFormLabel
-        className="euiFormRow__label"
-        htmlFor="generated-id"
-        id="generated-id-label"
-        isFocused={true}
-        type="label"
-      >
-        <label
-          className="euiFormLabel euiFormRow__label euiFormLabel-isFocused"
-          htmlFor="generated-id"
-          id="generated-id-label"
-        >
-          <span>
-            Label
-          </span>
-        </label>
-      </EuiFormLabel>
-    </div>
-    <div
-      className="euiFormRow__fieldWrapper"
-    >
-      <input
-        id="generated-id"
-        onBlur={[Function]}
-        onFocus={[Function]}
-      />
-    </div>
-  </div>
-</EuiFormRow>
-`;
-
 exports[`EuiFormRow is rendered 1`] = `
 <div
   aria-label="aria-label"
@@ -521,7 +317,7 @@ exports[`EuiFormRow props isInvalid is rendered 1`] = `
   >
     <label
       aria-invalid="true"
-      class="euiFormLabel euiFormRow__label euiFormLabel-isInvalid"
+      class="euiFormLabel euiFormRow__label euiFormLabel-isInvalid emotion-euiFormLabel-invalid"
       for="generated-id"
       id="generated-id-label"
     >
@@ -547,7 +343,7 @@ exports[`EuiFormRow props label append is rendered 1`] = `
     class="euiFormRow__labelWrapper"
   >
     <label
-      class="euiFormLabel euiFormRow__label"
+      class="euiFormLabel euiFormRow__label emotion-euiFormLabel"
       for="generated-id"
       id="generated-id-label"
     >
@@ -575,7 +371,7 @@ exports[`EuiFormRow props label is rendered 1`] = `
     class="euiFormRow__labelWrapper"
   >
     <label
-      class="euiFormLabel euiFormRow__label"
+      class="euiFormLabel euiFormRow__label emotion-euiFormLabel"
       for="generated-id"
       id="generated-id-label"
     >
@@ -601,7 +397,7 @@ exports[`EuiFormRow props label renders as a legend and subsquently a fieldset w
     class="euiFormRow__labelWrapper"
   >
     <legend
-      class="euiFormLabel euiFormRow__label"
+      class="euiFormLabel euiFormRow__label emotion-euiFormLabel"
       id="generated-id-label"
     >
       label
diff --git a/packages/eui/src/components/form/form_row/form_row.test.tsx b/packages/eui/src/components/form/form_row/form_row.test.tsx
index ba3bf7934cc..0c93b48f970 100644
--- a/packages/eui/src/components/form/form_row/form_row.test.tsx
+++ b/packages/eui/src/components/form/form_row/form_row.test.tsx
@@ -243,7 +243,9 @@ describe('EuiFormRow', () => {
 
         // Ensure the focus event is properly fired on the parent
         // which will pass down to the EuiFormLabel
-        expect(component).toMatchSnapshot();
+        expect(component.find('label').getDOMNode()).toHaveClass(
+          'euiFormLabel-isFocused'
+        );
       });
 
       test('works in parent even if not in child', () => {
@@ -257,7 +259,9 @@ describe('EuiFormRow', () => {
 
         // Ensure the focus event is properly fired on the parent
         // which will pass down to the EuiFormLabel
-        expect(component).toMatchSnapshot();
+        expect(component.find('label').getDOMNode()).toHaveClass(
+          'euiFormLabel-isFocused'
+        );
       });
     });
 
@@ -277,7 +281,9 @@ describe('EuiFormRow', () => {
 
         // Ensure the blur event is properly fired on the parent
         // which will pass down to the EuiFormLabel
-        expect(component).toMatchSnapshot();
+        expect(component.find('label').getDOMNode()).not.toHaveClass(
+          'euiFormLabel-isFocused'
+        );
       });
 
       test('works in parent even if not in child', () => {
@@ -291,7 +297,9 @@ describe('EuiFormRow', () => {
 
         // Ensure the blur event is properly fired on the parent
         // which will pass down to the EuiFormLabel
-        expect(component).toMatchSnapshot();
+        expect(component.find('label').getDOMNode()).not.toHaveClass(
+          'euiFormLabel-isFocused'
+        );
       });
     });
   });
diff --git a/packages/eui/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap b/packages/eui/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap
index 5f1100224b5..669d5102dd8 100644
--- a/packages/eui/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap
+++ b/packages/eui/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap
@@ -59,7 +59,7 @@ exports[`EuiRadioGroup props legend is rendered 1`] = `
   class="euiRadioGroup emotion-euiRadioGroup"
 >
   <legend
-    class="euiFormLegend"
+    class="euiFormLegend emotion-euiFormLegend"
   >
     A legend
   </legend>
diff --git a/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
index ea1da48dd23..e068fa19900 100644
--- a/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
+++ b/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -91,7 +91,7 @@ exports[`EuiSuperSelect props prepend and append 1`] = `
       class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
     >
       <label
-        class="euiFormLabel"
+        class="euiFormLabel emotion-euiFormLabel"
       >
         prepend
       </label>
@@ -123,7 +123,7 @@ exports[`EuiSuperSelect props prepend and append 1`] = `
       class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
     >
       <label
-        class="euiFormLabel"
+        class="euiFormLabel emotion-euiFormLabel"
       >
         append
       </label>
diff --git a/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap b/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
index 30e83d49749..2a4b4f41a1c 100644
--- a/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
+++ b/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
@@ -204,7 +204,7 @@ exports[`EuiInlineEditForm edit mode editModeProps.inputProps 1`] = `
               class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
             >
               <label
-                class="euiFormLabel"
+                class="euiFormLabel emotion-euiFormLabel"
                 for="generated-id"
               >
                 Prepend Example
diff --git a/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu.test.tsx.snap b/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu.test.tsx.snap
index c742806258b..18dba8256a7 100644
--- a/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu.test.tsx.snap
+++ b/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`EuiKeyPadMenu checkable is rendered as with a legend 1`] = `
 >
   <legend
     aria-label="aria-label"
-    class="euiFormLabel testClass1 testClass2 emotion-euiKeyPadMenu__legend-euiTestCss"
+    class="euiFormLabel testClass1 testClass2 emotion-euiFormLabel-euiKeyPadMenu__legend-euiTestCss"
     data-test-subj="test subject string"
   >
     Legend
diff --git a/packages/eui/src/global_styling/mixins/_form.scss b/packages/eui/src/global_styling/mixins/_form.scss
index 76c320947dd..c40d94a2ae8 100644
--- a/packages/eui/src/global_styling/mixins/_form.scss
+++ b/packages/eui/src/global_styling/mixins/_form.scss
@@ -1,11 +1,3 @@
-// Labels
-@mixin euiFormLabel {
-  @include euiFontSizeXS;
-  @include euiTextBreakWord;
-  color: $euiTitleColor;
-  font-weight: $euiFontWeightSemiBold;
-}
-
 @mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) {
   $iconSize: $euiSize;
   $iconPadding: $euiFormControlPadding;