diff --git a/.changeset/clever-kiwis-agree.md b/.changeset/clever-kiwis-agree.md
new file mode 100644
index 00000000000..f602c1bcddf
--- /dev/null
+++ b/.changeset/clever-kiwis-agree.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `readOnly` prop to `Labelled` component
diff --git a/polaris-react/src/components/Labelled/Labelled.scss b/polaris-react/src/components/Labelled/Labelled.scss
index 21421717501..541d7e730a4 100644
--- a/polaris-react/src/components/Labelled/Labelled.scss
+++ b/polaris-react/src/components/Labelled/Labelled.scss
@@ -18,6 +18,12 @@
   }
 }
 
+.readOnly > .LabelWrapper {
+  #{$se23} & {
+    color: var(--p-color-text-subdued);
+  }
+}
+
 .LabelWrapper {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include text-breakword;
diff --git a/polaris-react/src/components/Labelled/Labelled.tsx b/polaris-react/src/components/Labelled/Labelled.tsx
index d8c60d1e831..43336291d8e 100644
--- a/polaris-react/src/components/Labelled/Labelled.tsx
+++ b/polaris-react/src/components/Labelled/Labelled.tsx
@@ -7,6 +7,7 @@ import {Label, labelID} from '../Label';
 import type {LabelProps} from '../Label';
 import {InlineError} from '../InlineError';
 import {Text} from '../Text';
+import {useFeatures} from '../../utilities/features';
 
 import styles from './Labelled.scss';
 
@@ -31,6 +32,8 @@ export interface LabelledProps {
   requiredIndicator?: boolean;
   /** Labels signify a disabled control */
   disabled?: boolean;
+  /** Labels signify a readOnly control */
+  readOnly?: boolean;
 }
 
 export function Labelled({
@@ -43,11 +46,15 @@ export function Labelled({
   labelHidden,
   requiredIndicator,
   disabled,
+  readOnly,
   ...rest
 }: LabelledProps) {
+  const {polarisSummerEditions2023} = useFeatures();
+
   const className = classNames(
     labelHidden && styles.hidden,
     disabled && styles.disabled,
+    polarisSummerEditions2023 && readOnly && styles.readOnly,
   );
 
   const actionMarkup = action ? (
diff --git a/polaris-react/src/components/TextField/TextField.scss b/polaris-react/src/components/TextField/TextField.scss
index e97930d6c7d..69818ed8ce9 100644
--- a/polaris-react/src/components/TextField/TextField.scss
+++ b/polaris-react/src/components/TextField/TextField.scss
@@ -123,12 +123,31 @@ $spinner-icon-size: 12px;
   }
 }
 
-.readOnly > .Backdrop {
-  background-color: var(--p-color-bg-disabled);
+.readOnly {
+  > .Input {
+    #{$se23} & {
+      color: var(--p-color-text-subdued);
+    }
+  }
 
-  #{$se23} & {
-    // se23 -- specificity bump
+  > .Backdrop {
     background-color: var(--p-color-bg-disabled);
+
+    #{$se23} & {
+      // se23 -- specificity bump
+      background-color: var(--p-color-bg-transparent-disabled-experimental);
+      border-color: transparent;
+    }
+  }
+
+  &.focus {
+    // stylelint-disable-next-line selector-max-class -- se23
+    > .Backdrop {
+      #{$se23} & {
+        background-color: var(--p-color-bg-transparent-disabled-experimental);
+        border-color: transparent;
+      }
+    }
   }
 }
 
@@ -143,7 +162,7 @@ $spinner-icon-size: 12px;
 
     #{$se23} & {
       border: none;
-      background-color: var(--p-color-bg-disabled);
+      background-color: var(--p-color-bg-transparent-disabled-experimental);
     }
   }
 
diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx
index 9270ccbd2a4..942022f8385 100644
--- a/polaris-react/src/components/TextField/TextField.tsx
+++ b/polaris-react/src/components/TextField/TextField.tsx
@@ -592,6 +592,7 @@ export function TextField({
       helpText={helpText}
       requiredIndicator={requiredIndicator}
       disabled={disabled}
+      readOnly={readOnly}
     >
       <Connected left={connectedLeft} right={connectedRight}>
         <div className={className} onClick={handleClick}>