diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index 4a24759a00b2..75b35dc052a3 100644
--- a/src/demo-app/input/input-demo.html
+++ b/src/demo-app/input/input-demo.html
@@ -140,6 +140,20 @@ <h4>Textarea</h4>
     <md-input-container color="warn">
       <textarea mdInput placeholder="Warn Color">example</textarea>
     </md-input-container>
+
+    <h4>With error</h4>
+    <md-input-container color="primary" >
+      <input mdInput placeholder="Default Color" [(ngModel)]="dividerColorExample1" required>
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <md-input-container color="accent">
+      <input mdInput placeholder="Accent Color" [(ngModel)]="dividerColorExample2" required>
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <md-input-container color="warn">
+      <input mdInput placeholder="Warn Color" [(ngModel)]="dividerColorExample3" required>
+      <md-error>This field is required</md-error>
+    </md-input-container>
   </md-card-content>
 </md-card>
 
diff --git a/src/demo-app/input/input-demo.ts b/src/demo-app/input/input-demo.ts
index f389aa8bbd3b..387e632dbee5 100644
--- a/src/demo-app/input/input-demo.ts
+++ b/src/demo-app/input/input-demo.ts
@@ -23,6 +23,9 @@ export class InputDemo {
   errorMessageExample1: string;
   errorMessageExample2: string;
   errorMessageExample3: string;
+  dividerColorExample1: string;
+  dividerColorExample2: string;
+  dividerColorExample3: string;
   items: any[] = [
     { value: 10 },
     { value: 20 },
diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss
index bade74950614..82e9dd7f0e4a 100644
--- a/src/lib/input/_input-theme.scss
+++ b/src/lib/input/_input-theme.scss
@@ -42,7 +42,7 @@
     color: mat-color($foreground, disabled-text);
   }
 
-  // See mat-input-placeholder-floating mixin in input.scss
+  // See mat-input-placeholder-floating mixin in input-container.scss
   input.mat-input-element:-webkit-autofill + .mat-input-placeholder,
   .mat-focused .mat-input-placeholder.mat-float {
     .mat-placeholder-required {
@@ -52,16 +52,17 @@
 
   .mat-input-underline {
     border-color: $input-underline-color;
+  }
 
-    .mat-input-ripple {
-      background-color: $input-underline-focused-color;
+  .mat-input-ripple {
+    background-color: $input-underline-focused-color;
 
-      &.mat-accent {
-        background-color: $input-underline-color-accent;
-      }
-      &.mat-warn {
-        background-color: $input-underline-color-warn;
-      }
+    &.mat-accent {
+      background-color: $input-underline-color-accent;
+    }
+
+    &.mat-warn {
+      background-color: $input-underline-color-warn;
     }
   }
 
@@ -69,9 +70,13 @@
   // achieved with the ng-* classes, we use this approach in order to ensure that the same
   // logic is used to style the error state and to show the error messages.
   .mat-input-invalid {
-    .mat-input-placeholder,
-    .mat-placeholder-required {
+    .mat-input-placeholder {
       color: $input-underline-color-warn;
+
+      &.mat-accent,
+      &.mat-float .mat-placeholder-required {
+        color: $input-underline-color-warn;
+      }
     }
 
     .mat-input-ripple {