diff --git a/src/components/textField/_textField.scss b/src/components/textField/_textField.scss
index d7b17fe12db..9d323e9a63c 100644
--- a/src/components/textField/_textField.scss
+++ b/src/components/textField/_textField.scss
@@ -3,7 +3,7 @@ form {
 
 label {
   display: block;
-  font-size: $input-font-size;
+  font-size: $tff-font-size;
 }
 
 textarea,
@@ -23,8 +23,8 @@ input[type="tel"],
 input[type="color"] {
   display: block;
   border-width: 0 0 1px 0;
-  line-height: $input-line-height;
-  font-size: $input-font-size;
+  line-height: $tff-line-height;
+  font-size: $tff-font-size;
 
   &:focus {
     outline: 0;
@@ -32,52 +32,104 @@ input[type="color"] {
 }
 
 input, textarea {
-  @include input-placeholder($input-placeholder-color);
+  @include input-placeholder($tff-placeholder-color);
   background: none;
 }
 
+// Light-Theme
 material-input-group,
 .material-input-group {
-  margin: $input-group-margin;
+  margin: $tff-margin;
 
   position: relative;
+  display:  block;
 
-  input, textarea {
-    @include transition($input-label-transition);
+  label {
+    z-index: 1;
+    pointer-events: none;
+    -webkit-font-smoothing: antialiased;
 
-    color: $input-color;
+    &:hover {
+      cursor: text;
+    }
   }
 
-  &.material-input-group-inverted {
-    input {
-      color: $input-color-inverted;
+  @include text-hint( $tff-hint-normal, large, $tff-transition );
+  @include text-field( $tff-input-normal, $tff-line-normal, $tff-transition );
+
+
+  &.material-input-focused {
+    @include text-hint( $tff-hint-focused, small );
+    @include text-field( $tff-input-normal,$tff-line-focused, false, $tff-line-focused-width );
+  }
+
+  &.material-input-has-value {
+    @include text-hint( $tff-hint-focused, small );
+
+    &:not(.material-input-focused) {
+      @include text-hint( $tff-hint-normal, small );
     }
   }
 
-  label {
-    -webkit-font-smoothing: antialiased;
-    z-index: 1;
-    pointer-events: none;
+  &[disabled] {
 
-    @include transform-translate3d(0, $input-line-height, 0);
-    @include transform-origin(left, center);
-    @include transition($input-label-transition);
+    @include text-field( $tff-input-disabled, $tff-line-disabled, false, $tff-line-disabled-width );
+    input, textarea {
+      @include dashed-border( $tff-line-dot-width, $tff-line-dot-width, $tff-line-dot-width, $tff-line-dashed, bottom );
+      pointer-events: none;
+      tabindex : -1;
+    }
 
-    color: $input-placeholder-color;
+    @include text-hint( $tff-hint-disabled, small );
 
-    &:hover {
-      cursor: text;
+    *:not(.material-input-has-value) {
+      @include text-hint( $tff-hint-disabled, large );
     }
+
+  }
+
+}
+
+
+// Dark Theme
+.dark material-input-group,
+.dark .material-input-group {
+
+  @include text-hint( $tff-hint-normal-dark, large, $tff-transition );
+  @include text-field( $tff-input-normal-dark, $tff-line-normal-dark, $tff-transition );
+
+
+  &.material-input-focused {
+    @include text-hint( $tff-hint-focused-dark, small );
+    @include text-field( $tff-input-focused-dark,$tff-line-focused-dark, false, $tff-line-focused-width );
   }
 
-  &.material-input-focused, &.material-input-has-value {
+  &.material-input-has-value {
+    @include text-hint( $tff-hint-focused-dark, small );
 
-    input {
-      border-bottom-width: 2px;
+    &:not(.material-input-focused) {
+      @include text-hint( $tff-hint-normal-dark, small );
     }
+  }
+
+  &[disabled] {
+
+    @include text-field( $tff-input-disabled-dark, $tff-line-disabled-dark, false, $tff-line-disabled-width );
+    input, textarea {
+      @include dashed-border( $tff-line-dot-width, $tff-line-dot-width, $tff-line-dot-width, $tff-line-dashed-dark, bottom );
+      pointer-events: none;
+      tabindex : -1;
+    }
+
+    @include text-hint( $tff-hint-disabled-dark, small );
 
-    label {
-      @include transform-translate3d-scale(0, 0, 0, $input-focused-scale);
+    *:not(.material-input-has-value) {
+      @include text-hint( $tff-hint-disabled-dark, large );
     }
+
   }
+
 }
+
+
+.theme-dark-tff { @include theme-bg-and-color(#333, #999); }
diff --git a/src/components/textField/demo1/index.html b/src/components/textField/demo1/index.html
index 3ce4d345320..fe1dca69320 100644
--- a/src/components/textField/demo1/index.html
+++ b/src/components/textField/demo1/index.html
@@ -1,23 +1,23 @@
 
 <div ng-controller="AppCtrl" layout="vertical">
 
-  <material-toolbar class="material-theme-dark material-tall">
-    <div class="material-toolbar-tools">
-      <ig fid="t1" class="material-input-group-theme-light material-input-group-inverted"></ig>
-      <ig fid="t2" class="material-input-group-theme-light-blue material-input-group-inverted"></ig>
+  <material-toolbar class="theme-dark-tff material-medium-tall" style="padding-top:15px;">
+    <div class="material-toolbar-tools dark">
+      <ig fid="t1" label="data.t1.label" value="data.t1.value" class="material-input-group-theme-light material-input-group-inverted"></ig>
+      <ig fid="t2" label="data.t2.label" value="data.t2.value" class="material-input-group-theme-light-blue material-input-group-inverted"></ig>
     </div>
   </material-toolbar>
 
   <material-content>
     <form style="padding: 20px;">
-      <ig fid="i1" value="data.i1" class="material-input-group-theme-light"></ig>
-      <ig fid="i2" value="data.i2" class="material-input-group-theme-light-blue"></ig>
-      <ig fid="i3" value="data.i3" class="material-input-group-theme-dark"></ig>
-      <ig fid="i4" value="data.i4" class="material-input-group-theme-green"></ig>
-      <ig fid="i5" value="data.i5" class="material-input-group-theme-yellow"></ig>
-      <ig fid="i6" value="data.i6" class="material-input-group-theme-orange"></ig>
-      <ig fid="i7" value="data.i7" class="material-input-group-theme-purple"></ig>
-      <ig fid="i8" value="data.i8" class="material-input-group-theme-red"></ig>
+      <ig fid="i1" label="data.i1.label" value="data.i1.value" ></ig>
+      <ig fid="i2" label="data.i2.label" value="data.i2.value" ></ig>
+      <ig fid="i3" label="data.i3.label" value="data.i3.value" ></ig>
+      <ig fid="i4" label="data.i4.label" value="data.i4.value" ></ig>
+      <ig fid="i5" label="data.i5.label" value="data.i5.value" ></ig>
+      <ig fid="i6" label="data.i6.label" value="data.i6.value" ></ig>
+      <ig fid="i7" label="data.i7.label" value="data.i7.value" disabled ></ig>
+      <ig fid="i8" label="data.i8.label" value="data.i8.value" ></ig>
     </form>
   </material-content>
 
diff --git a/src/components/textField/demo1/script.js b/src/components/textField/demo1/script.js
index d90a940b24d..976eba0d8a2 100644
--- a/src/components/textField/demo1/script.js
+++ b/src/components/textField/demo1/script.js
@@ -3,15 +3,19 @@ angular.module('formDemo1', ['ngMaterial'])
 
 .controller('AppCtrl', function($scope) {
   $scope.data = {
-    i1 : "Field #1",
-    i2 : "Field #2",
-    i3 : "Field #3",
-    i4 : "Field #4",
-    i5 : "Field #5",
-    i6 : "Field #6",
-    i7 : "Field #7",
-    i8 : "Field #8"
+     i1 : { label:"FirstName"  , value:"Naomi" },
+     i2 : { label:"LastName"   , value:"" },
+     i3 : { label:"Company"    , value:"Google" },
+     i4 : { label:"Address"    , value:"" },
+     i5 : { label:"City"       , value:"Mountain View" },
+     i6 : { label:"State"      , value:"CA" },
+     i7 : { label:"Country"    , value:"USA" },
+     i8 : { label:"Postal Code", value:"" },
+
+     t1 : { label:"Title", value:"" },
+     t2 : { label:"Message", value:"ipsum lorem id screib" }
   };
+
 })
 
 .directive('ig', function() {
@@ -20,12 +24,18 @@ angular.module('formDemo1', ['ngMaterial'])
     replace: true,
     scope : {
       fid : '@',
-      title : '=value'
+      value : '=',
+      label : '='
+    },
+    link : function(scope, element, attrs) {
+        if ( angular.isDefined(attrs.disabled) ) {
+          scope.isDisabled = true;
+        }
     },
     template:
-      '<material-input-group>' +
-        '<label for="{{fid}}">Description</label>' +
-        '<material-input id="{{fid}}" type="text" ng-model="title">' +
+      '<material-input-group ng-disabled="isDisabled">' +
+        '<label for="{{fid}}">{{label}}</label>' +
+        '<material-input id="{{fid}}" type="text" ng-model="value">' +
       '</material-input-group>'
   };
 });
diff --git a/src/components/textField/textField.js b/src/components/textField/textField.js
index c2e132e9d7d..d8e93543794 100644
--- a/src/components/textField/textField.js
+++ b/src/components/textField/textField.js
@@ -55,7 +55,6 @@ function materialInputGroupDirective() {
  * <hljs lang="html">
  * <material-input-group>
  *   <material-input type="text" ng-model="user.fullName"></material-input>
- *   <material-input type="text" ng-model="user.email"></material-input>
  * </material-input-group>
  * </hljs>
  */
@@ -82,6 +81,10 @@ function materialInputDirective() {
         });
       }
 
+      if ( angular.isDefined(attr.disabled) ) {
+        element.attr('tabIndex', -1);
+      }
+
       element.on('input', function() {
         inputGroupCtrl.setHasValue(!!element.val());
       });
diff --git a/src/core/style/_mixins.scss b/src/core/style/_mixins.scss
index 7e6db5f5cce..5f55a69b924 100644
--- a/src/core/style/_mixins.scss
+++ b/src/core/style/_mixins.scss
@@ -9,59 +9,59 @@
 
 @mixin transform-origin($x, $y) {
   -webkit-transform-origin: $x $y;
-          transform-origin: $x $y;
+  transform-origin: $x $y;
 }
 @mixin transform-translate3d($x, $y, $z) {
   -webkit-transform: translate3d($x, $y, $z);
-          transform: translate3d($x, $y, $z);
+  transform: translate3d($x, $y, $z);
 }
 @mixin transform-translate3d-scale($x, $y, $z, $scale) {
   -webkit-transform: translate3d($x, $y, $z) scale($scale);
-          transform: translate3d($x, $y, $z) scale($scale);
+  transform: translate3d($x, $y, $z) scale($scale);
 }
 
 @mixin transform-scale($val) {
   -webkit-transform: scale($val);
-          transform: scale($val);
+  transform: scale($val);
 }
 
 @mixin transform-rotate($val) {
   -webkit-transform: rotate($val);
-          transform: rotate($val);
+  transform: rotate($val);
 }
 
 @mixin transform($val) {
   -webkit-transform: $val;
-          transform: $val;
+  transform: $val;
 }
 
 @mixin transition($val) {
   -webkit-transition: $val;
-          transition: $val;
+  transition: $val;
 }
 
 @mixin transition-timing($val) {
   -webkit-transition-timing-function: $val;
-          transition-timing-function: $val;
+  transition-timing-function: $val;
 
 }
 
 @mixin easeInOut($duration, $curve) {
   -webkit-transition: all $duration $curve;
-          transition: all $duration $curve;
+  transition: all $duration $curve;
 
   -webkit-transition-timing-function: all $duration $curve;
-          transition-timing-function: all $duration $curve;
+  transition-timing-function: all $duration $curve;
 }
 
 @mixin transition-delay($val) {
   -webkit-transition-delay: $val;
-          transition-delay: $val;
+  transition-delay: $val;
 }
 
 @mixin animation($val) {
   -webkit-animation: $val;
-          animation: $val;
+  animation: $val;
 }
 
 @mixin user-select($val:none) {
@@ -133,9 +133,9 @@
   -webkit-flex-wrap: $value;
   -moz-flex-wrap: $value;
   @if $value == nowrap {
-      -ms-flex-wrap: none;
+    -ms-flex-wrap: none;
   } @else {
-      -ms-flex-wrap: $value;
+    -ms-flex-wrap: $value;
   }
   flex-wrap: $value;
 }
@@ -241,8 +241,8 @@
 
 @mixin box-sizing($boxmodel) {
   -webkit-box-sizing: $boxmodel;
-     -moz-box-sizing: $boxmodel;
-          box-sizing: $boxmodel;
+  -moz-box-sizing: $boxmodel;
+  box-sizing: $boxmodel;
 }
 
 
@@ -254,3 +254,52 @@
   -ms-user-select: $value;
   user-select: $value;
 }
+
+
+
+// ******************************
+// Mixins: Text Fields
+// ******************************
+
+@mixin text-field($color, $borderColor, $transition:false, $borderWidth:1px ) {
+  input, textarea {
+    color: $color;
+    border-color: $borderColor;
+    border-bottom-width: $borderWidth;
+
+    @if( $transition != false ) {
+      @include transition($transition);
+    }
+  }
+}
+
+@mixin text-hint($color, $size:large, $transition:false ) {
+  label {
+    color: $color;
+
+    @if $size == "small" {
+
+      @include transform-translate3d-scale(0, $tff-hint-offset-small, 0, $ttf-hint-offset-scale);
+
+    } @else {
+
+      @include transform-translate3d(0, $tff-hint-offset-large, 0);
+      @include transform-origin(left, center);
+      @include transition( $tff-transition );
+
+    }
+
+    @if( $transition != false ) {
+      @include transition($transition);
+    }
+
+  }
+}
+
+@mixin dashed-border($dashlength, $spacelength, $borderwidth, $color, $position: top) {
+  $per: percentage($dashlength / ($dashlength + $spacelength));
+  background-image: linear-gradient(to right, $color 0%, $color $per, rgba(0, 0, 0, 0) 0%);
+  background-position: 0 $position;
+  background-size: ($dashlength + $spacelength) $borderwidth;
+  background-repeat: repeat-x;
+}
diff --git a/src/core/style/theme/_utils.scss b/src/core/style/theme/_utils.scss
index f6f71d94520..d47e92f0048 100644
--- a/src/core/style/theme/_utils.scss
+++ b/src/core/style/theme/_utils.scss
@@ -31,11 +31,12 @@
 @include material-theme('grey', #f0f0f0, #e0e0e0, #a2a2a2, #636363, #252525);
 */
 
+.material-theme-dark { @include theme-bg-and-color($theme-dark, $text-light); }
+
 
 .material-theme-light { @include theme-bg-and-color($theme-light, $text-light); }
 .material-theme-light-blue { @include theme-bg-and-color($theme-light-blue, $text-light); }
 .material-theme-indigo { @include theme-bg-and-color($theme-indigo, $text-light); }
-.material-theme-dark { @include theme-bg-and-color($theme-dark, $text-light); }
 .material-theme-green { @include theme-bg-and-color($theme-green, $text-light); }
 .material-theme-yellow { @include theme-bg-and-color($theme-yellow, $text-dark); }
 .material-theme-orange { @include theme-bg-and-color($theme-orange, $text-light); }
@@ -51,6 +52,7 @@
 .material-input-group-theme-purple { @include theme-input-text-and-border($theme-purple); }
 .material-input-group-theme-red { @include theme-input-text-and-border($theme-red); }
 
+
 .material-shadow {
   position: absolute;
   top: 0;
diff --git a/src/core/style/theme/_variables.scss b/src/core/style/theme/_variables.scss
index 20c48a54563..06e84db0afb 100644
--- a/src/core/style/theme/_variables.scss
+++ b/src/core/style/theme/_variables.scss
@@ -15,6 +15,10 @@ $text-medium: #999;
 $text-dark: #111111;
 
 // Theme colors
+$theme-textfield-focus-label: #1b1b1b;
+$theme-textfield-focus-border: #1394F5;
+
+$theme-gray: #444;
 $theme-light: #4285f4;
 $theme-light-blue: #03a9f4;
 $theme-dark: #3f51b5;
@@ -156,10 +160,61 @@ $tabs-paginator-width: $baseline-grid * 4 !default;
 $tabs-tab-width: $baseline-grid * 12 !default;
 $tabs-header-height: 48px;
 
+
+
+// ***********************************
+// Styles for Floating Label Text Fields
+// - Light Theme -
+// ***********************************
+//
+$tff-font-size: 0.75em;
+$tff-line-height:26px;
+$tff-margin: 10px 0 10px 0;
+$tff-placeholder-color: darken($text-light, 30%);
+$tff-transition: all ease-out 300ms;
+// - `label` element (aka hint)
+$tff-hint-offset-large : 26px;
+$tff-hint-offset-small : 4px;
+$ttf-hint-offset-scale : 0.75;
+$tff-hint-normal: #999;
+$tff-hint-focused: #EE008B;
+$tff-hint-disabled: #b0b0b0;
+// - `input` element
+$tff-input-normal: #2f2f2f;
+$tff-input-focused: #EE008B;
+$tff-input-disabled: #bcbcbc;
+// - `line` element
+$tff-line-focused-width: 2px;
+$tff-line-disabled-width: 0px;
+$tff-line-dot-width: 2px;
+$tff-line-normal: #c7c7c7;
+$tff-line-focused: #EE008B;
+$tff-line-disabled: #bcbcbc;
+$tff-line-dashed: #b8b8b8;
+
+// ***********************************
+// Styles for Floating Label Text Fields
+// - Light Theme -
+// ***********************************
+// - `label` element (aka hint)
+$tff-hint-normal-dark: #5d5d5d;
+$tff-hint-focused-dark: #1194f6;
+$tff-hint-disabled-dark: #858585;
+// - `input` element
+$tff-input-normal-dark: #d6d6d6;
+$tff-input-focused-dark: #d6d6d6;
+$tff-input-disabled-dark: #5d5d5d;
+// - `line` element
+$tff-line-normal-dark: #4c4c4c;
+$tff-line-focused-dark: #1194f6;
+$tff-line-disabled-dark: #333333;
+$tff-line-dashed-dark: #686868;
+
+
 // Forms and inputs
 
-$input-font-size: 0.85em;
-$input-line-height: 30px;
+$input-font-size: 0.75em;
+$input-line-height: 26px;
 
 $input-placeholder-color: darken($text-light, 30%);