diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
index 9d95ab9aff..8acbb1ef6e 100644
--- a/core/src/components/input/input.ionic.scss
+++ b/core/src/components/input/input.ionic.scss
@@ -7,6 +7,8 @@
 // --------------------------------------------------
 
 :host {
+  // TODO(ROU-5477): use design token here when it is added
+  --color: #121212;
   --border-width: #{$ionic-border-size-small};
   --border-color: #{$ionic-color-neutral-300};
   --highlight-color-valid: #{$ionic-color-success-400};
@@ -178,6 +180,13 @@
   opacity: 0.6;
 }
 
+// Input - Readonly
+// ----------------------------------------------------------------
+
+:host(.input-readonly) {
+  --background: #{tokens.$ionic-color-neutral-10};
+}
+
 // Input Highlight
 // ----------------------------------------------------------------
 
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index ef03c4b858..fa6342143d 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -808,6 +808,7 @@ export class Input implements ComponentInterface {
           'in-item': inItem,
           'in-item-color': hostContext('ion-item.ion-color', this.el),
           'input-disabled': disabled,
+          'input-readonly': readonly,
         })}
       >
         {/**
diff --git a/core/src/components/input/test/states/index.html b/core/src/components/input/test/states/index.html
index f535ca6c3f..6e7845e5b5 100644
--- a/core/src/components/input/test/states/index.html
+++ b/core/src/components/input/test/states/index.html
@@ -50,7 +50,28 @@
           <div class="grid-item">
             <h2>No Fill</h2>
 
-            <ion-input label="Email" value="hi@ionic.io" readonly="true"></ion-input>
+            <ion-input
+              label="Email"
+              value="hi@ionic.io"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+              readonly="true"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline</h2>
+
+            <ion-input
+              fill="outline"
+              label="Email"
+              value="hi@ionic.io"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+              readonly="true"
+            ></ion-input>
           </div>
         </div>
 
diff --git a/core/src/components/input/test/states/input.e2e.ts b/core/src/components/input/test/states/input.e2e.ts
index 3264641a0d..307d618f85 100644
--- a/core/src/components/input/test/states/input.e2e.ts
+++ b/core/src/components/input/test/states/input.e2e.ts
@@ -38,7 +38,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
             `
             <div class="container">
               <ion-input
-                label="Email" 
+                label="Email"
                 value="hi@ionic.io"
                 helper-text="Enter an email"
                 counter="true"
@@ -55,7 +55,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
                 class="ion-valid has-focus"
                 disabled="true"
               ></ion-input>
-  
+
               <ion-input
                 label="Email"
                 value="hi@ionic.io"
@@ -92,7 +92,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
             <div class="container">
               <ion-input
                 fill="outline"
-                label="Email" 
+                label="Email"
                 value="hi@ionic.io"
                 helper-text="Enter an email"
                 counter="true"
@@ -110,7 +110,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
                 class="ion-valid has-focus"
                 disabled="true"
               ></ion-input>
-  
+
               <ion-input
                 fill="outline"
                 label="Email"
@@ -149,7 +149,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
           `
           <div class="container">
             <ion-input
-              label="Email" 
+              label="Email"
               value="hi@ionic.io"
               helper-text="Enter an email"
               counter="true"
@@ -159,7 +159,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
 
             <ion-input
               fill="outline"
-              label="Email" 
+              label="Email"
               value="hi@ionic.io"
               helper-text="Enter an email"
               counter="true"
@@ -175,5 +175,54 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
         await expect(container).toHaveScreenshot(screenshot(`input-focused`));
       });
     });
+
+    test.describe(title('readonly'), () => {
+      test.describe(title('no fill'), () => {
+        test('should render readonly input correctly', async ({ page }) => {
+          await page.setContent(
+            `
+            <div class="container">
+              <ion-input
+                label="Email"
+                value="hi@ionic.io"
+                helper-text="Enter an email"
+                counter="true"
+                maxlength="20"
+                readonly="true"
+              ></ion-input>
+            </div>
+          `,
+            config
+          );
+
+          const container = page.locator('.container');
+          await expect(container).toHaveScreenshot(screenshot(`input-readonly-no-fill`));
+        });
+      });
+
+      test.describe(title('outline'), () => {
+        test('should render readonly input correctly', async ({ page }) => {
+          await page.setContent(
+            `
+            <div class="container">
+              <ion-input
+                fill="outline"
+                label="Email"
+                value="hi@ionic.io"
+                helper-text="Enter an email"
+                counter="true"
+                maxlength="20"
+                readonly="true"
+              ></ion-input>
+            </div>
+          `,
+            config
+          );
+
+          const container = page.locator('.container');
+          await expect(container).toHaveScreenshot(screenshot(`input-readonly-outline`));
+        });
+      });
+    });
   });
 });
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..46d4b0bebd
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e9c77923f5
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..308c46fe87
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4a04b3205c
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a9d9cc2e2f
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9685b7e336
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ