diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
index de48b8671b..31e9b9419e 100644
--- a/core/src/components/input/input.md.scss
+++ b/core/src/components/input/input.md.scss
@@ -34,6 +34,13 @@
   height: 22px;
 }
 
+// Input - Disabled
+// ----------------------------------------------------------------
+:host(.legacy-input) .native-input[disabled],
+:host([disabled]) {
+  opacity: #{$input-md-disabled-opacity};
+}
+
 // Input Bottom
 // ----------------------------------------------------------------
 /**
diff --git a/core/src/components/input/input.md.vars.scss b/core/src/components/input/input.md.vars.scss
index 90cd6d1e2b..06aacfe6af 100644
--- a/core/src/components/input/input.md.vars.scss
+++ b/core/src/components/input/input.md.vars.scss
@@ -5,67 +5,72 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the input
-$input-md-font-size:                      inherit !default;
+$input-md-font-size: inherit !default;
 
 /// @prop - Margin top of the input
-$input-md-padding-top:                     10px !default;
+$input-md-padding-top: 10px !default;
 
 /// @prop - Margin end of the input
-$input-md-padding-end:                     0 !default;
+$input-md-padding-end: 0 !default;
 
 /// @prop - Margin bottom of the input
-$input-md-padding-bottom:                  10px !default;
+$input-md-padding-bottom: 10px !default;
 
 /// @prop - Margin start of the input
-$input-md-padding-start:                   ($item-md-padding-start * 0.5) !default;
+$input-md-padding-start: ($item-md-padding-start * 0.5) !default;
 
 /// @prop - Width of the icon used to clear the input
-$input-md-input-clear-icon-width:         30px !default;
+$input-md-input-clear-icon-width: 30px !default;
 
 /// @prop - Placeholder Text color of the input
-$input-md-placeholder-color:              $placeholder-text-color !default;
+$input-md-placeholder-color: $placeholder-text-color !default;
 
 /// @prop - Show the focus highlight when the input has focus
-$input-md-show-focus-highlight:           true !default;
+$input-md-show-focus-highlight: true !default;
 
 /// @prop - Show the valid highlight when it is valid and has a value
-$input-md-show-valid-highlight:           $input-md-show-focus-highlight !default;
+$input-md-show-valid-highlight: $input-md-show-focus-highlight !default;
 
 /// @prop - Show the invalid highlight when it is invalid and has value
-$input-md-show-invalid-highlight:         $input-md-show-focus-highlight !default;
+$input-md-show-invalid-highlight: $input-md-show-focus-highlight !default;
 
 /// @prop - Color of the input highlight
-$input-md-highlight-color:                ion-color(primary, base) !default;
+$input-md-highlight-color: ion-color(primary, base) !default;
 
 /// @prop - Color of the input highlight when valid
-$input-md-highlight-color-valid:          ion-color(success, base) !default;
+$input-md-highlight-color-valid: ion-color(success, base) !default;
 
 /// @prop - Color of the input highlight when invalid
-$input-md-highlight-color-invalid:        ion-color(danger, base) !default;
+$input-md-highlight-color-invalid: ion-color(danger, base) !default;
 
 /// @prop - Padding top of the inset input
-$input-md-inset-padding-top:              ($item-md-padding-top * 0.5) !default;
+$input-md-inset-padding-top: ($item-md-padding-top * 0.5) !default;
 
 /// @prop - Padding end of the inset input
-$input-md-inset-padding-end:              0 !default;
+$input-md-inset-padding-end: 0 !default;
 
 /// @prop - Padding bottom of the inset input
-$input-md-inset-padding-bottom:           ($item-md-padding-bottom * 0.5) !default;
+$input-md-inset-padding-bottom: ($item-md-padding-bottom * 0.5) !default;
 
 /// @prop - Padding start of the inset input
-$input-md-inset-padding-start:            ($item-md-padding-start * 0.5) !default;
+$input-md-inset-padding-start: ($item-md-padding-start * 0.5) !default;
 
 /// @prop - Margin top of the inset input
-$input-md-inset-margin-top:               ($item-md-padding-top * 0.5) !default;
+$input-md-inset-margin-top: ($item-md-padding-top * 0.5) !default;
 
 /// @prop - Margin end of the inset input
-$input-md-inset-margin-end:               $item-md-padding-end !default;
+$input-md-inset-margin-end: $item-md-padding-end !default;
 
 /// @prop - Margin bottom of the inset input
-$input-md-inset-margin-bottom:            ($item-md-padding-bottom * 0.5) !default;
+$input-md-inset-margin-bottom: ($item-md-padding-bottom * 0.5) !default;
 
 /// @prop - Margin start of the inset input
-$input-md-inset-margin-start:             $item-md-padding-start !default;
+$input-md-inset-margin-start: $item-md-padding-start !default;
 
 /// @prop - The amount of whitespace to display on either side of the floating label
-$input-md-floating-label-padding:         4px !default;
+$input-md-floating-label-padding: 4px !default;
+
+/// @prop - The disabled opacity of the input text, the label, helper text, char counter and placeholder of a disabled input.
+/// This value comes from the Material Design spec:
+/// - https://github.com/material-components/material-web/pull/549
+$input-md-disabled-opacity: 0.37 !default;
diff --git a/core/src/components/input/input.vars.scss b/core/src/components/input/input.vars.scss
index abf0e2ca89..4e07fee786 100644
--- a/core/src/components/input/input.vars.scss
+++ b/core/src/components/input/input.vars.scss
@@ -2,3 +2,4 @@
 
 /// @prop - How much to scale the floating label by
 $input-floating-label-scale: 0.75 !default;
+
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png
index 40c18acd05..2f37aa3db9 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png
index 1fe3ea1565..24fdb90d48 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png
index 251296a810..357cf2bda6 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Safari-linux.png
index 6e073771c3..b83e69b2b3 100644
Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Safari-linux.png differ