diff --git a/packages/eui/changelogs/upcoming/7818.md b/packages/eui/changelogs/upcoming/7818.md
new file mode 100644
index 00000000000..f2cd10fbb94
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7818.md
@@ -0,0 +1,8 @@
+**Breaking changes**
+
+- Removed the unused `compressed` prop from `EuiCheckbox` and `EuiRadio`. This prop was not doing anything on individual components.
+
+**CSS-in-JS conversions**
+
+- Converted `EuiCheckboxGroup` to Emotion
+- Converted `EuiRadioGroup` to Emotion
diff --git a/packages/eui/src-docs/src/views/selection_controls/checkbox.js b/packages/eui/src-docs/src/views/selection_controls/checkbox.js
index 8b051426d33..715cfe54c0e 100644
--- a/packages/eui/src-docs/src/views/selection_controls/checkbox.js
+++ b/packages/eui/src-docs/src/views/selection_controls/checkbox.js
@@ -57,10 +57,10 @@ export default () => {
 
       <EuiCheckbox
         id={compressedCheckboxId}
-        label="I am a compressed checkbox"
+        label="I am a readonly checkbox"
         checked={checked}
         onChange={(e) => onChange(e)}
-        compressed
+        readOnly
       />
     </Fragment>
   );
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 7499992d87b..a2d9bbc2fbc 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
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiCheckboxGroup (mocked checkbox) disabled is rendered 1`] = `
-<div>
+<div
+  class="euiCheckboxGroup emotion-euiCheckboxGroup"
+>
   <div
     data-eui-checkbox=""
   />
@@ -12,7 +14,9 @@ exports[`EuiCheckboxGroup (mocked checkbox) disabled is rendered 1`] = `
 `;
 
 exports[`EuiCheckboxGroup (mocked checkbox) idToSelectedMap is rendered 1`] = `
-<div>
+<div
+  class="euiCheckboxGroup emotion-euiCheckboxGroup"
+>
   <div
     data-eui-checkbox=""
   />
@@ -23,7 +27,9 @@ exports[`EuiCheckboxGroup (mocked checkbox) idToSelectedMap is rendered 1`] = `
 `;
 
 exports[`EuiCheckboxGroup (mocked checkbox) individual disabled is rendered 1`] = `
-<div>
+<div
+  class="euiCheckboxGroup emotion-euiCheckboxGroup"
+>
   <div
     data-eui-checkbox=""
   />
@@ -36,13 +42,15 @@ exports[`EuiCheckboxGroup (mocked checkbox) individual disabled is rendered 1`]
 exports[`EuiCheckboxGroup (mocked checkbox) is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiTestCss"
+  class="euiCheckboxGroup testClass1 testClass2 emotion-euiCheckboxGroup-euiTestCss"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiCheckboxGroup (mocked checkbox) legend is rendered 1`] = `
-<fieldset>
+<fieldset
+  class="euiCheckboxGroup emotion-euiCheckboxGroup"
+>
   <legend
     class="euiFormLegend"
   >
@@ -52,7 +60,9 @@ exports[`EuiCheckboxGroup (mocked checkbox) legend is rendered 1`] = `
 `;
 
 exports[`EuiCheckboxGroup (mocked checkbox) options are rendered 1`] = `
-<div>
+<div
+  class="euiCheckboxGroup emotion-euiCheckboxGroup"
+>
   <div
     data-eui-checkbox=""
   />
diff --git a/packages/eui/src/components/form/checkbox/_checkbox_group.scss b/packages/eui/src/components/form/checkbox/_checkbox_group.scss
deleted file mode 100644
index 8554feff4d9..00000000000
--- a/packages/eui/src/components/form/checkbox/_checkbox_group.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.euiCheckboxGroup__item + .euiCheckboxGroup__item {
-  margin-top: $euiSizeXS;
-
-  &.euiCheckbox--compressed {
-    margin-top: 0;
-  }
-}
diff --git a/packages/eui/src/components/form/checkbox/_index.scss b/packages/eui/src/components/form/checkbox/_index.scss
index 295196b2459..e6e53eb7128 100644
--- a/packages/eui/src/components/form/checkbox/_index.scss
+++ b/packages/eui/src/components/form/checkbox/_index.scss
@@ -1,2 +1 @@
 @import 'checkbox';
-@import 'checkbox_group';
diff --git a/packages/eui/src/components/form/checkbox/checkbox.stories.tsx b/packages/eui/src/components/form/checkbox/checkbox.stories.tsx
index e58d11febb4..95c41abe58f 100644
--- a/packages/eui/src/components/form/checkbox/checkbox.stories.tsx
+++ b/packages/eui/src/components/form/checkbox/checkbox.stories.tsx
@@ -19,7 +19,6 @@ const meta: Meta<EuiCheckboxProps> = {
   component: EuiCheckbox,
   args: {
     checked: false,
-    compressed: false,
     disabled: false,
     indeterminate: false,
     // set up for easier testing/QA
diff --git a/packages/eui/src/components/form/checkbox/checkbox.tsx b/packages/eui/src/components/form/checkbox/checkbox.tsx
index 0501dc2cb38..496472a6020 100644
--- a/packages/eui/src/components/form/checkbox/checkbox.tsx
+++ b/packages/eui/src/components/form/checkbox/checkbox.tsx
@@ -30,10 +30,6 @@ export interface EuiCheckboxProps
   inputRef?: (element: HTMLInputElement) => void;
   label?: ReactNode;
   disabled?: boolean;
-  /**
-   * when `true` creates a shorter height checkbox row
-   */
-  compressed?: boolean;
   indeterminate?: boolean;
   /**
    * Object of props passed to the <label/>
@@ -50,7 +46,6 @@ export const EuiCheckbox: FunctionComponent<EuiCheckboxProps> = ({
   onChange,
   type,
   disabled = false,
-  compressed = false,
   indeterminate = false,
   inputRef,
   labelProps,
@@ -60,7 +55,6 @@ export const EuiCheckbox: FunctionComponent<EuiCheckboxProps> = ({
     'euiCheckbox',
     {
       'euiCheckbox--noLabel': !label,
-      'euiCheckbox--compressed': compressed,
     },
     className
   );
diff --git a/packages/eui/src/components/form/checkbox/checkbox_group.styles.ts b/packages/eui/src/components/form/checkbox/checkbox_group.styles.ts
new file mode 100644
index 00000000000..1fd828feb00
--- /dev/null
+++ b/packages/eui/src/components/form/checkbox/checkbox_group.styles.ts
@@ -0,0 +1,25 @@
+/*
+ * 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';
+
+export const euiCheckboxGroupStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiCheckboxGroup: css`
+    display: flex;
+    flex-direction: column;
+  `,
+  // Skip css`` to avoid generating a className
+  uncompressed: `
+    gap: ${euiTheme.size.xs}
+  `,
+  compressed: css`
+    gap: 0;
+  `,
+});
diff --git a/packages/eui/src/components/form/checkbox/checkbox_group.tsx b/packages/eui/src/components/form/checkbox/checkbox_group.tsx
index 7b2d996484c..a3557ad4a7b 100644
--- a/packages/eui/src/components/form/checkbox/checkbox_group.tsx
+++ b/packages/eui/src/components/form/checkbox/checkbox_group.tsx
@@ -9,6 +9,7 @@
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
+import { useEuiMemoizedStyles } from '../../../services';
 import { CommonProps, ExclusiveUnion } from '../../common';
 
 import {
@@ -17,6 +18,7 @@ import {
   EuiFormFieldset,
 } from '../form_fieldset';
 import { EuiCheckbox, EuiCheckboxProps } from './checkbox';
+import { euiCheckboxGroupStyles } from './checkbox_group.styles';
 
 export interface EuiCheckboxGroupOption
   extends Omit<EuiCheckboxProps, 'checked' | 'onChange'> {
@@ -43,10 +45,12 @@ export type EuiCheckboxGroupProps = CommonProps & {
   idToSelectedMap: EuiCheckboxGroupIdToSelectedMap;
   onChange: (optionId: string) => void;
   /**
-   * Tightens up the spacing between checkbox rows and sends down the
-   * compressed prop to the checkbox itself
+   * Tightens up the spacing between checkbox rows
    */
   compressed?: boolean;
+  /**
+   * Passed down to all child `EuiCheckbox`es
+   */
   disabled?: boolean;
 } & ExclusiveUnion<AsDivProps, WithLegendProps>;
 
@@ -60,6 +64,14 @@ export const EuiCheckboxGroup: FunctionComponent<EuiCheckboxGroupProps> = ({
   legend,
   ...rest
 }) => {
+  const classes = classNames('euiCheckboxGroup', className);
+
+  const styles = useEuiMemoizedStyles(euiCheckboxGroupStyles);
+  const cssStyles = [
+    styles.euiCheckboxGroup,
+    compressed ? styles.compressed : styles.uncompressed,
+  ];
+
   const checkboxes = options.map((option, index) => {
     const {
       disabled: isOptionDisabled,
@@ -73,7 +85,6 @@ export const EuiCheckboxGroup: FunctionComponent<EuiCheckboxGroupProps> = ({
         checked={idToSelectedMap[option.id]}
         disabled={disabled || isOptionDisabled}
         onChange={onChange.bind(null, option.id)}
-        compressed={compressed}
         {...optionRest}
       />
     );
@@ -85,7 +96,8 @@ export const EuiCheckboxGroup: FunctionComponent<EuiCheckboxGroupProps> = ({
 
     return (
       <EuiFormFieldset
-        className={className}
+        css={cssStyles}
+        className={classes}
         legend={legend}
         {...(rest as EuiFormFieldsetProps)}
       >
@@ -95,7 +107,11 @@ export const EuiCheckboxGroup: FunctionComponent<EuiCheckboxGroupProps> = ({
   }
 
   return (
-    <div className={className} {...(rest as HTMLAttributes<HTMLDivElement>)}>
+    <div
+      css={cssStyles}
+      className={classes}
+      {...(rest as HTMLAttributes<HTMLDivElement>)}
+    >
       {checkboxes}
     </div>
   );
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 d4995253b0c..5f1100224b5 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
@@ -3,13 +3,15 @@
 exports[`EuiRadioGroup is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiTestCss"
+  class="euiRadioGroup testClass1 testClass2 emotion-euiRadioGroup-euiTestCss"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiRadioGroup props idSelected is rendered 1`] = `
-<div>
+<div
+  class="euiRadioGroup emotion-euiRadioGroup"
+>
   <div
     class="euiRadio euiRadioGroup__item"
   >
@@ -53,7 +55,9 @@ exports[`EuiRadioGroup props idSelected is rendered 1`] = `
 `;
 
 exports[`EuiRadioGroup props legend is rendered 1`] = `
-<fieldset>
+<fieldset
+  class="euiRadioGroup emotion-euiRadioGroup"
+>
   <legend
     class="euiFormLegend"
   >
@@ -101,7 +105,9 @@ exports[`EuiRadioGroup props legend is rendered 1`] = `
 `;
 
 exports[`EuiRadioGroup props name is propagated to radios 1`] = `
-<div>
+<div
+  class="euiRadioGroup emotion-euiRadioGroup"
+>
   <div
     class="euiRadio euiRadioGroup__item"
   >
@@ -146,7 +152,9 @@ exports[`EuiRadioGroup props name is propagated to radios 1`] = `
 `;
 
 exports[`EuiRadioGroup props options are rendered 1`] = `
-<div>
+<div
+  class="euiRadioGroup emotion-euiRadioGroup"
+>
   <div
     class="euiRadio euiRadioGroup__item"
   >
@@ -190,7 +198,9 @@ exports[`EuiRadioGroup props options are rendered 1`] = `
 `;
 
 exports[`EuiRadioGroup props value is propagated to radios 1`] = `
-<div>
+<div
+  class="euiRadioGroup emotion-euiRadioGroup"
+>
   <div
     class="euiRadio euiRadioGroup__item"
   >
diff --git a/packages/eui/src/components/form/radio/_index.scss b/packages/eui/src/components/form/radio/_index.scss
index 4222afbd56a..267661b572b 100644
--- a/packages/eui/src/components/form/radio/_index.scss
+++ b/packages/eui/src/components/form/radio/_index.scss
@@ -1,2 +1 @@
 @import 'radio';
-@import 'radio_group';
diff --git a/packages/eui/src/components/form/radio/_radio_group.scss b/packages/eui/src/components/form/radio/_radio_group.scss
deleted file mode 100644
index 89a3809bbc8..00000000000
--- a/packages/eui/src/components/form/radio/_radio_group.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.euiRadioGroup__item + .euiRadioGroup__item {
-  margin-top: $euiSizeXS;
-
-  &.euiRadio--compressed {
-    margin-top: 0;
-  }
-}
diff --git a/packages/eui/src/components/form/radio/radio.stories.tsx b/packages/eui/src/components/form/radio/radio.stories.tsx
index 870d7a47731..650ddb58f0f 100644
--- a/packages/eui/src/components/form/radio/radio.stories.tsx
+++ b/packages/eui/src/components/form/radio/radio.stories.tsx
@@ -19,7 +19,6 @@ const meta: Meta<EuiRadioProps> = {
   },
   args: {
     checked: false,
-    compressed: false,
     disabled: false,
     // set up for easier testing/QA
     id: '',
diff --git a/packages/eui/src/components/form/radio/radio.tsx b/packages/eui/src/components/form/radio/radio.tsx
index b0ae90e7669..baafb4ce405 100644
--- a/packages/eui/src/components/form/radio/radio.tsx
+++ b/packages/eui/src/components/form/radio/radio.tsx
@@ -18,10 +18,6 @@ import { CommonProps, ExclusiveUnion } from '../../common';
 
 export interface RadioProps {
   autoFocus?: boolean;
-  /**
-   * When `true` creates a shorter height radio row
-   */
-  compressed?: boolean;
   name?: string;
   value?: string;
   checked?: boolean;
@@ -55,7 +51,6 @@ export const EuiRadio: FunctionComponent<EuiRadioProps> = ({
   value,
   onChange,
   disabled,
-  compressed,
   autoFocus,
   labelProps,
   ...rest
@@ -64,7 +59,6 @@ export const EuiRadio: FunctionComponent<EuiRadioProps> = ({
     'euiRadio',
     {
       'euiRadio--noLabel': !label,
-      'euiRadio--compressed': compressed,
     },
     className
   );
diff --git a/packages/eui/src/components/form/radio/radio_group.styles.ts b/packages/eui/src/components/form/radio/radio_group.styles.ts
new file mode 100644
index 00000000000..3c6caf1331e
--- /dev/null
+++ b/packages/eui/src/components/form/radio/radio_group.styles.ts
@@ -0,0 +1,25 @@
+/*
+ * 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';
+
+export const euiRadioGroupStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiRadioGroup: css`
+    display: flex;
+    flex-direction: column;
+  `,
+  // Skip css`` to avoid generating a className
+  uncompressed: `
+    gap: ${euiTheme.size.xs}
+  `,
+  compressed: css`
+    gap: 0;
+  `,
+});
diff --git a/packages/eui/src/components/form/radio/radio_group.tsx b/packages/eui/src/components/form/radio/radio_group.tsx
index 543f98d8b1f..ba4936ca5c8 100644
--- a/packages/eui/src/components/form/radio/radio_group.tsx
+++ b/packages/eui/src/components/form/radio/radio_group.tsx
@@ -9,6 +9,7 @@
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
+import { useEuiMemoizedStyles } from '../../../services';
 import { CommonProps, ExclusiveUnion } from '../../common';
 
 import {
@@ -16,7 +17,9 @@ import {
   EuiFormLegendProps,
   EuiFormFieldset,
 } from '../form_fieldset';
+
 import { EuiRadio, EuiRadioProps } from './radio';
+import { euiRadioGroupStyles } from './radio_group.styles';
 
 export interface EuiRadioGroupOption
   extends Omit<EuiRadioProps, 'checked' | 'onChange'> {
@@ -37,10 +40,12 @@ type WithLegendProps = Omit<EuiFormFieldsetProps, 'onChange'> & {
 };
 
 export type EuiRadioGroupProps = CommonProps & {
+  /**
+   * Passed down to all child `EuiCheckbox`es
+   */
   disabled?: boolean;
   /**
-   * Tightens up the spacing between radio rows and sends down the
-   * compressed prop to the radio itself
+   * Tightens up the spacing between radio rows
    */
   compressed?: boolean;
   name?: string;
@@ -60,6 +65,14 @@ export const EuiRadioGroup: FunctionComponent<EuiRadioGroupProps> = ({
   legend,
   ...rest
 }) => {
+  const classes = classNames('euiRadioGroup', className);
+
+  const styles = useEuiMemoizedStyles(euiRadioGroupStyles);
+  const cssStyles = [
+    styles.euiRadioGroup,
+    compressed ? styles.compressed : styles.uncompressed,
+  ];
+
   const radios = options.map((option, index) => {
     const {
       disabled: isOptionDisabled,
@@ -76,7 +89,6 @@ export const EuiRadioGroup: FunctionComponent<EuiRadioGroupProps> = ({
         checked={id === idSelected}
         disabled={disabled || isOptionDisabled}
         onChange={onChange.bind(null, id, option.value)}
-        compressed={compressed}
         id={id}
         label={label}
         {...optionRest}
@@ -90,7 +102,8 @@ export const EuiRadioGroup: FunctionComponent<EuiRadioGroupProps> = ({
 
     return (
       <EuiFormFieldset
-        className={className}
+        css={cssStyles}
+        className={classes}
         legend={legend}
         {...(rest as EuiFormFieldsetProps)}
       >
@@ -100,7 +113,11 @@ export const EuiRadioGroup: FunctionComponent<EuiRadioGroupProps> = ({
   }
 
   return (
-    <div className={className} {...(rest as HTMLAttributes<HTMLDivElement>)}>
+    <div
+      css={cssStyles}
+      className={classes}
+      {...(rest as HTMLAttributes<HTMLDivElement>)}
+    >
       {radios}
     </div>
   );