diff --git a/.gitignore b/.gitignore
index f76d116eca6..02ae8b3d37f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,6 @@ dist
 /vendor
 
 .polymer-qp
+
+atlassian-ide-plugin.xml
+*.iml
diff --git a/src/components/textField/demoBasicUsage/index.html b/src/components/textField/demoBasicUsage/index.html
index 8b9f5d01faa..cd158978519 100644
--- a/src/components/textField/demoBasicUsage/index.html
+++ b/src/components/textField/demoBasicUsage/index.html
@@ -1,28 +1,28 @@
-
 <div ng-controller="DemoController" layout="vertical">
   <md-content md-theme="light-blue-dark">
     <form style="padding: 20px;">
       <div class="row">
-        <md-text-float label="Title"  ng-model="user.title"   ></md-text-float>
-        <md-text-float label="eMail"  ng-model="user.email" type="email" ></md-text-float>
+        <md-text-float label="Title" ng-model="user.title"></md-text-float>
+        <md-text-float label="eMail" ng-model="user.email" type="email"></md-text-float>
       </div>
     </form>
   </md-content>
 
   <md-content>
     <form style="padding: 20px;">
-      <md-text-float label="Company"       ng-model="user.company"    disabled > </md-text-float>
+      <md-text-float label="Company" ng-model="user.company" disabled></md-text-float>
       <div class="row">
-          <md-text-float label="FirstName" ng-model="user.firstName"  > </md-text-float>
-          <md-text-float label="LastName"  ng-model="user.lastName"   class="long"> </md-text-float>
+        <md-text-float label="FirstName" ng-model="user.firstName"></md-text-float>
+        <md-text-float label="LastName" ng-model="user.lastName" class="long"></md-text-float>
       </div>
-      <md-text-float label="Address"       ng-model="user.address"    > </md-text-float>
+      <md-text-float label="Address" ng-model="user.address"></md-text-float>
       <div class="row">
-        <md-text-float label="City"        ng-model="user.city"       > </md-text-float>
-        <md-text-float label="State"       ng-model="user.state"      > </md-text-float>
-        <md-text-float label="Postal Code" ng-model="user.postalCode" > </md-text-float>
+        <md-text-float label="City" ng-model="user.city"></md-text-float>
+        <md-text-float label="State" ng-model="user.state"></md-text-float>
+        <md-text-float label="Postal Code" ng-model="user.postalCode"></md-text-float>
       </div>
-      <md-text-float label="Country"       ng-model="user.country"    disabled > </md-text-float>
+      <md-text-float label="Country" ng-model="user.country" disabled></md-text-float>
+      <md-textarea-float label="Intro" ng-model="user.intro" rows="4" cols="50"></md-textarea-float>
     </form>
   </md-content>
 
diff --git a/src/components/textField/demoBasicUsage/script.js b/src/components/textField/demoBasicUsage/script.js
index 9faf8685ee8..c0eb7974dba 100644
--- a/src/components/textField/demoBasicUsage/script.js
+++ b/src/components/textField/demoBasicUsage/script.js
@@ -1,22 +1,22 @@
-
 angular.module('textFieldDemo1', ['ngMaterial'])
 
-  /**
-   *  Simple controller to build a `user` data model
-   *  that will be used to databinding with `<tf-float>` directives
-   */
-  .controller('DemoController', function($scope) {
+/**
+ *  Simple controller to build a `user` data model
+ *  that will be used to databinding with `<tf-float>` directives
+ */
+  .controller('DemoController', function ($scope) {
     $scope.user = {
-       title:     "Technical Program Manager",
-       email:     "ipsum@lorem.com",
-       firstName: "Naomi",
-       lastName:  "" ,
-       company:   "Google" ,
-       address:   "1600 Amphitheatre Pkwy" ,
-       city:      "Mountain View" ,
-       state:     "CA" ,
-       country:   "USA" ,
-       postalCode : "94043"
+      title: "Technical Program Manager",
+      email: "ipsum@lorem.com",
+      firstName: "Naomi",
+      lastName: "",
+      company: "Google",
+      address: "1600 Amphitheatre Pkwy",
+      city: "Mountain View",
+      state: "CA",
+      country: "USA",
+      postalCode: "94043",
+      intro: ""
     };
   });
 
diff --git a/src/components/textField/textField.js b/src/components/textField/textField.js
index 79136bb00c1..10d1118c564 100644
--- a/src/components/textField/textField.js
+++ b/src/components/textField/textField.js
@@ -5,10 +5,11 @@
  * Form
  */
 angular.module('material.components.textField', ['material.core', 'material.services.theming'])
-       .directive('mdInputGroup', [ mdInputGroupDirective ])
-       .directive('mdInput', ['$mdUtil', mdInputDirective ])
-       .directive('mdTextFloat', [ '$mdTheming', '$mdUtil', mdTextFloatDirective ]);
-
+  .directive('mdInputGroup', [ mdInputGroupDirective ])
+  .directive('mdInput', ['$mdUtil', mdInputDirective ])
+  .directive('mdTextarea', ['$mdUtil', mdTextareaDirective])
+  .directive('mdTextFloat', [ '$mdTheming', '$mdUtil', mdTextFloatDirective ])
+  .directive('mdTextareaFloat', [ '$mdTheming', '$mdUtil', mdTextareaFloatDirective ]);
 
 
 /**
@@ -41,21 +42,21 @@ function mdTextFloatDirective($mdTheming, $mdUtil) {
   return {
     restrict: 'E',
     replace: true,
-    scope : {
-      fid : '@?',
-      label : '@?',
-      value : '=ngModel'
+    scope: {
+      fid: '@?',
+      label: '@?',
+      value: '=ngModel'
     },
-    compile : function(element, attr) {
+    compile: function (element, attr) {
 
-      if ( angular.isUndefined(attr.fid) ) {
+      if (angular.isUndefined(attr.fid)) {
         attr.fid = $mdUtil.nextUid();
       }
 
       return {
-        pre : function(scope, element, attrs) {
+        pre: function (scope, element, attrs) {
           // transpose `disabled` flag
-          if ( angular.isDefined(attrs.disabled) ) {
+          if (angular.isDefined(attrs.disabled)) {
             element.attr('disabled', true);
             scope.isDisabled = true;
           }
@@ -64,17 +65,80 @@ function mdTextFloatDirective($mdTheming, $mdUtil) {
           element.removeAttr('type');
 
           // transpose optional `class` settings
-          element.attr('class', attrs.class );
+          element.attr('class', attrs.class);
+
+        },
+        post: $mdTheming
+      };
+    },
+    template: '<md-input-group ng-disabled="isDisabled" tabindex="-1">' +
+      ' <label for="{{fid}}" >{{label}}</label>' +
+      ' <md-input id="{{fid}}" ng-model="value" type="{{inputType}}"></md-input>' +
+      '</md-input-group>'
+  };
+}
+
+/**
+ * @ngdoc directive
+ * @name mdTextareaFloat
+ * @module material.components.textField
+ *
+ * @restrict E
+ *
+ * @description
+ * Use the `<md-textarea-float>` directive to quickly construct `Floating Label` textarea fields
+ *
+ * @param {string} fid Attribute used for accessibility link pairing between the Label and Input elements
+ * @param {string=} rows Optional value to define the amount of rows.
+ * @param {string=} cols Optional value to define the amount of cols.
+ * @param {string} label Attribute to specify the input text field hint.
+ * @param {string=} ng-model Optional value to assign as existing input text string
+ *
+ * @usage
+ * <hljs lang="html">
+ * <md-textarea-float label="Intro" ng-model="user.intro" > </md-textarea-float>
+ *
+ * <!-- Specify the amount of rows and cols. -->
+ * <md-textarea-float label="Company"  ng-model="user.company" rows="4" cols="50" > </md-textarea-float>
+ * </hljs>
+ */
+function mdTextareaFloatDirective($mdTheming, $mdUtil) {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {
+      fid: '@?',
+      label: '@?',
+      rows: '@?',
+      cols: '@?',
+      value: '=ngModel'
+    },
+    compile: function (element, attr) {
+
+      if (angular.isUndefined(attr.fid)) {
+        attr.fid = $mdUtil.nextUid();
+      }
+
+      return {
+        pre: function (scope, element, attrs) {
+          // transpose `disabled` flag
+          if (angular.isDefined(attrs.disabled)) {
+            element.attr('disabled', true);
+            scope.isDisabled = true;
+          }
+
+          // transpose optional `class` settings
+          element.attr('class', attrs.class);
 
         },
         post: $mdTheming
       };
     },
-    template:
-    '<md-input-group ng-disabled="isDisabled" tabindex="-1">' +
-    ' <label for="{{fid}}" >{{label}}</label>' +
-    ' <md-input id="{{fid}}" ng-model="value" type="{{inputType}}"></md-input>' +
-    '</md-input-group>'
+    template: '<md-input-group ng-disabled="isDisabled" tabindex="-1">' +
+      ' <label for="{{fid}}" >{{label}}</label>' +
+      ' <md-textarea id="{{fid}}" ng-model="value" ' +
+      '  rows="{{rows}}" cols="{{cols}}"></md-textarea>' +
+      '</md-input-group>'
   };
 }
 
@@ -99,12 +163,12 @@ function mdTextFloatDirective($mdTheming, $mdUtil) {
 function mdInputGroupDirective() {
   return {
     restrict: 'CE',
-    controller: ['$element', function($element) {
-      this.setFocused = function(isFocused) {
+    controller: ['$element', function ($element) {
+      this.setFocused = function (isFocused) {
         $element.toggleClass('md-input-focused', !!isFocused);
       };
-      this.setHasValue = function(hasValue) {
-        $element.toggleClass('md-input-has-value', hasValue );
+      this.setHasValue = function (hasValue) {
+        $element.toggleClass('md-input-has-value', hasValue);
       };
     }]
   };
@@ -137,59 +201,111 @@ function mdInputDirective($mdUtil) {
     replace: true,
     template: '<input >',
     require: ['^?mdInputGroup', '?ngModel'],
-    link: function(scope, element, attr, ctrls) {
-      var inputGroupCtrl = ctrls[0];
-      var ngModelCtrl = ctrls[1];
-      if (!inputGroupCtrl) {
-        return;
-      }
+    link: function mdInputDirectiveLink(scope, element, attr, ctrls) {
+      linkBehaviours(scope, element, ctrls, $mdUtil);
 
-      // scan for disabled and transpose the `type` value to the <input> element
-      var isDisabled = $mdUtil.isParentDisabled(element);
-
-      element.attr('tabindex', isDisabled ? -1 : 0 );
-      element.attr('aria-disabled', isDisabled ? 'true' : 'false');
-      element.attr('type', attr.type || element.parent().attr('type') || "text" );
-
-      // When the input value changes, check if it "has" a value, and
-      // set the appropriate class on the input group
-      if (ngModelCtrl) {
-        //Add a $formatter so we don't use up the render function
-        ngModelCtrl.$formatters.push(function(value) {
-          inputGroupCtrl.setHasValue( isNotEmpty(value) );
-          return value;
-        });
-      }
+      element.attr('type', attr.type || element.parent().attr('type') || "text");
+    }
+  };
+}
 
-      element.on('input', function() {
-        inputGroupCtrl.setHasValue( isNotEmpty() );
-      });
-
-      // When the input focuses, add the focused class to the group
-      element.on('focus', function(e) {
-        inputGroupCtrl.setFocused(true);
-      });
-      // When the input blurs, remove the focused class from the group
-      element.on('blur', function(e) {
-        inputGroupCtrl.setFocused(false);
-        inputGroupCtrl.setHasValue( isNotEmpty() );
-      });
-
-      scope.$on('$destroy', function() {
-        inputGroupCtrl.setFocused(false);
-        inputGroupCtrl.setHasValue(false);
-      });
-
-
-      function isNotEmpty(value) {
-        value = angular.isUndefined(value) ? element.val() : value;
-        return (angular.isDefined(value) && (value!==null) &&
-               (value.toString().trim() != ""));
-      }
+/*
+ * @private
+ *
+ * @ngdoc directive
+ * @name mdTextarea
+ * @module material.components.textField
+ *
+ * @restrict E
+ *
+ * @description
+ * Use the `<md-textarea>` directive as elements within a `<md-input-group>` container
+ *
+ * @usage
+ * <hljs lang="html">
+ * <md-input-group ng-disabled="user.isLocked">
+ *   <label for="i1">Intro</label>
+ *   <md-textarea id="i1" ng-model="user.intro"></md-textarea>
+ * </md-input-group>
+ * </hljs>
+ */
+function mdTextareaDirective($mdUtil) {
+  return {
+    restrict: 'E',
+    replace: true,
+    template: '<textarea >',
+    require: ['^?mdInputGroup', '?ngModel'],
+    link: function mdInputDirectiveLink(scope, element, attr, ctrls) {
+      linkBehaviours(scope, element, ctrls, $mdUtil);
+
+      element.attr('rows', attr.rows || element.parent().attr('rows') || "8");
+      element.attr('cols', attr.cols || element.parent().attr('cols') || "100");
     }
   };
 }
 
+/*
+ * @private
+ *
+ * @ngdoc directive
+ * @name mdTextarea
+ * @module material.components.textField
+ * @function
+ *
+ * @description
+ * The link function used in the mdInput and mdTextarea
+ *
+ */
+function linkBehaviours(scope, element, ctrls, $mdUtil) {
+  var inputGroupCtrl = ctrls[0];
+  var ngModelCtrl = ctrls[1];
+  if (!inputGroupCtrl) {
+    return;
+  }
+
+  // scan for disabled and transpose the `type` value to the <input> element
+  var isDisabled = $mdUtil.isParentDisabled(element);
+
+  element.attr('tabindex', isDisabled ? -1 : 0);
+  element.attr('aria-disabled', isDisabled ? 'true' : 'false');
+
+  // When the input value changes, check if it "has" a value, and
+  // set the appropriate class on the input group
+  if (ngModelCtrl) {
+    //Add a $formatter so we don't use up the render function
+    ngModelCtrl.$formatters.push(function (value) {
+      inputGroupCtrl.setHasValue(isNotEmpty(value));
+      return value;
+    });
+  }
+
+  element.on('input', function () {
+    inputGroupCtrl.setHasValue(isNotEmpty());
+  });
+
+  // When the input focuses, add the focused class to the group
+  element.on('focus', function (e) {
+    inputGroupCtrl.setFocused(true);
+  });
+  // When the input blurs, remove the focused class from the group
+  element.on('blur', function (e) {
+    inputGroupCtrl.setFocused(false);
+    inputGroupCtrl.setHasValue(isNotEmpty());
+  });
+
+  scope.$on('$destroy', function () {
+    inputGroupCtrl.setFocused(false);
+    inputGroupCtrl.setHasValue(false);
+  });
+
+
+  function isNotEmpty(value) {
+    value = angular.isUndefined(value) ? element.val() : value;
+    return (angular.isDefined(value) && (value !== null) &&
+      (value.toString().trim() != ""));
+  }
+}
+
 
 
 
diff --git a/src/components/textField/textField.spec.js b/src/components/textField/textField.spec.js
index 892cad848b2..a3e81d3877f 100644
--- a/src/components/textField/textField.spec.js
+++ b/src/components/textField/textField.spec.js
@@ -1,24 +1,25 @@
-describe('Text Field directives', function() {
+describe('Text Field directives', function () {
   beforeEach(module('material.components.textField'));
 
-  describe('- mdInputGroup', function() {
+  describe('- mdInputGroup', function () {
     var scope;
 
-    beforeEach(function() {
+    beforeEach(function () {
       scope = {
-        user : {
+        user: {
           firstName: 'Thomas',
           lastName: 'Burleson',
           email: 'ThomasBurleson@gmail.com',
-          password: 'your password is incorrect'
+          password: 'your password is incorrect',
+          intro: 'This is my intro'
         }
       };
     });
 
-    it('should set input class for focus & blur', function() {
-      var expressions = {label:"Firstname", model:"user.firstName"},
-          el = setupInputGroup( expressions, scope),
-          input = el.find('input');
+    it('should set input class for focus & blur', function () {
+      var expressions = {label: "Firstname", model: "user.firstName"},
+        el = setupInputGroup(expressions, scope),
+        input = el.find('input');
 
       input.triggerHandler('focus');
       expect(el.hasClass('md-input-focused')).toBe(true);
@@ -26,10 +27,10 @@ describe('Text Field directives', function() {
       expect(el.hasClass('md-input-focused')).toBe(false);
     });
 
-    it('should set input class for input event', function() {
-      var expressions = {label:"email", model:"user.email", type:"email"},
-          el = setupInputGroup( expressions, scope),
-          input = el.find('input');
+    it('should set input class for input event', function () {
+      var expressions = {label: "email", model: "user.email", type: "email"},
+        el = setupInputGroup(expressions, scope),
+        input = el.find('input');
 
       expect(el.hasClass('md-input-has-value')).toBe(true);
 
@@ -42,10 +43,10 @@ describe('Text Field directives', function() {
       expect(el.hasClass('md-input-has-value')).toBe(true);
     });
 
-    it('should set input class for ngModel render', function() {
-      var expressions = {label:"Firstname", model:"user.firstName"},
-          el = setupInputGroup( expressions, scope),
-          input = el.find('input');
+    it('should set input class for ngModel render', function () {
+      var expressions = {label: "Firstname", model: "user.firstName"},
+        el = setupInputGroup(expressions, scope),
+        input = el.find('input');
 
       expect(el.hasClass('md-input-has-value')).toBe(true);
 
@@ -58,17 +59,17 @@ describe('Text Field directives', function() {
 
   });
 
-  describe(' - mdTextFloat', function() {
+  describe(' - mdTextFloat', function () {
     var model;
-    beforeEach(function() {
+    beforeEach(function () {
       model = {
-        labels : {
+        labels: {
           firstName: 'FirstName',
           lastName: 'LastName',
           email: 'eMail',
           password: 'Password'
         },
-        user : {
+        user: {
           firstName: 'Andrew',
           lastName: 'Joslin',
           email: 'AndrewJoslin@drifty.com',
@@ -77,91 +78,91 @@ describe('Text Field directives', function() {
       }
     });
 
-    it('should set input type `password` properly', function() {
-      var el = setupTextFloat( { type:"password" }, model);
-      expect( el.find('input').attr('type')).toBe("password");
-      expect( el.find('input').val()).toBe("");
+    it('should set input type `password` properly', function () {
+      var el = setupTextFloat({ type: "password" }, model);
+      expect(el.find('input').attr('type')).toBe("password");
+      expect(el.find('input').val()).toBe("");
     });
-    it('should set input type `email` properly', function() {
-      var el = setupTextFloat( { type:"email" }, model);
-      expect( el.find('input').attr('type')).toBe("email");
-      expect( el.find('input').val()).toBe("");
+    it('should set input type `email` properly', function () {
+      var el = setupTextFloat({ type: "email" }, model);
+      expect(el.find('input').attr('type')).toBe("email");
+      expect(el.find('input').val()).toBe("");
     });
 
-    it('should set a static label properly', function() {
-      var el = setupTextFloat( { label:"motto" }, model);
-      expect( el.find('label').text() ).toBe("motto");
+    it('should set a static label properly', function () {
+      var el = setupTextFloat({ label: "motto" }, model);
+      expect(el.find('label').text()).toBe("motto");
 
-      expect( el.find('input').attr('type')).toBe("text");
-      expect( el.find('input').val()).toBe("");
+      expect(el.find('input').attr('type')).toBe("text");
+      expect(el.find('input').val()).toBe("");
     });
-    it('should update a label from model changes.', function() {
-      var markup ='<md-text-float ' +
-                    '  label="{{labels.firstName}}" ' +
-                    '  ng-model="user.firstName" >' +
-                    '</md-text-float>';
-      var el = buildElement( markup, model);
+    it('should update a label from model changes.', function () {
+      var markup = '<md-text-float ' +
+        '  label="{{labels.firstName}}" ' +
+        '  ng-model="user.firstName" >' +
+        '</md-text-float>';
+      var el = buildElement(markup, model);
 
-      expect( el.find('input').val() ).toBe("Andrew");
-      expect( el.find('label').text() ).toBe("FirstName");
+      expect(el.find('input').val()).toBe("Andrew");
+      expect(el.find('label').text()).toBe("FirstName");
 
       // Change model value of the `firstName` [field] label
       // then check if the dom is updated
 
-      var val2  = "Corporate Title:";
-      el.find('label').scope().$apply(function(){
+      var val2 = "Corporate Title:";
+      el.find('label').scope().$apply(function () {
         model.labels.firstName = val2;
       });
-      expect( el.find('label').text() ).toBe( val2 );
+      expect(el.find('label').text()).toBe(val2);
 
     });
-    it('should update an input value from model changes.', function() {
-      var markup ='<md-text-float ' +
-                  '  label="{{labels.firstName}}" ' +
-                  '  ng-model="user.firstName" >' +
-                  '</md-text-float>';
-      var el = buildElement( markup, model);
+    it('should update an input value from model changes.', function () {
+      var markup = '<md-text-float ' +
+        '  label="{{labels.firstName}}" ' +
+        '  ng-model="user.firstName" >' +
+        '</md-text-float>';
+      var el = buildElement(markup, model);
       var input = el.find('input');
 
-      expect( input.val() ).toBe("Andrew");
+      expect(input.val()).toBe("Andrew");
 
       var name = "AngularJS";
-      input.scope().$apply(function(){
+      input.scope().$apply(function () {
         model.user.firstName = name;
       });
-      expect( input.val() ).toBe( name );
+      expect(input.val()).toBe(name);
 
     });
-    it('should update a model value from input changes.', function() {
-      var markup ='<md-text-float ' +
-                  '  label="{{labels.firstName}}" ' +
-                  '  ng-model="user.firstName" >' +
-                  '</md-text-float>';
-      var el = buildElement( markup, model);
+    it('should update a model value from input changes.', function () {
+      var markup = '<md-text-float ' +
+        '  label="{{labels.firstName}}" ' +
+        '  ng-model="user.firstName" >' +
+        '</md-text-float>';
+      var el = buildElement(markup, model);
       var input = el.find('input');
 
-      expect( input.val() ).toBe( model.user.firstName );
+      expect(input.val()).toBe(model.user.firstName);
 
-      input.val( "AngularJS" );
+      input.val("AngularJS");
       input.triggerHandler('input');
-      expect( model.user.firstName ).toBe( "AngularJS" );
+      expect(model.user.firstName).toBe("AngularJS");
 
     });
 
-    it('should set input class for focus & blur', function() {
-      var expressions = {label:"Firstname", model:"user.firstName"},
-          el = setupTextFloat( expressions, model),
-          input = el.find('input');
+    it('should set input class for focus & blur', function () {
+      var expressions = {label: "Firstname", model: "user.firstName"},
+        el = setupTextFloat(expressions, model),
+        input = el.find('input');
 
       input.triggerHandler('focus');
       expect(el.hasClass('md-input-focused')).toBe(true);
       input.triggerHandler('blur');
       expect(el.hasClass('md-input-focused')).toBe(false);
     });
-    it('should set input class for input event', function() {
-      var expressions = {label:"password", model:"user.password", type:"password"},
-          el = setupTextFloat( expressions, model),
-          input = el.find('input');
+    it('should set input class for input event', function () {
+      var expressions = {label: "password", model: "user.password", type: "password"},
+        el = setupTextFloat(expressions, model),
+        input = el.find('input');
 
       expect(el.hasClass('md-input-has-value')).toBe(true);
 
@@ -173,56 +174,98 @@ describe('Text Field directives', function() {
       input.triggerHandler('input');
       expect(el.hasClass('md-input-has-value')).toBe(true);
     });
-    it('should set input class for ngModel changes', function() {
-      var expressions = {label:"Password", model:"user.password", type:"password"},
-          el = setupTextFloat( expressions, model),
-          input = el.find('input');
+    it('should set input class for ngModel changes', function () {
+      var expressions = {label: "Password", model: "user.password", type: "password"},
+        el = setupTextFloat(expressions, model),
+        input = el.find('input');
 
       expect(el.hasClass('md-input-has-value')).toBe(true);
 
-      input.scope().$apply(function(){  model.user.password = ""; });
+      input.scope().$apply(function () {
+        model.user.password = "";
+      });
       expect(el.hasClass('md-input-has-value')).toBe(false);
 
-      input.scope().$apply(function() { model.user.password = "hiddenValley"; });
+      input.scope().$apply(function () {
+        model.user.password = "hiddenValley";
+      });
       expect(el.hasClass('md-input-has-value')).toBe(true);
     });
 
-    it('should pair input and label for accessibility.', function() {
-      var markup ='<md-text-float ' +
-                  '  fid="093" ' +
-                  '  label="{{labels.firstName}}" ' +
-                  '  ng-model="user.firstName" >' +
-                  '</md-text-float>';
-      var el = buildElement( markup, model);
+    it('should pair input and label for accessibility.', function () {
+      var markup = '<md-text-float ' +
+        '  fid="093" ' +
+        '  label="{{labels.firstName}}" ' +
+        '  ng-model="user.firstName" >' +
+        '</md-text-float>';
+      var el = buildElement(markup, model);
       var input = el.find('input');
       var label = el.find('label')
 
-      expect( label.attr('for') ).toBe( "093" );
-      expect( input.attr('id') ).toBe( label.attr('for') );
+      expect(label.attr('for')).toBe("093");
+      expect(input.attr('id')).toBe(label.attr('for'));
     });
 
-    it('should auto-pair input and label for accessibility.', function() {
-      var markup ='<md-text-float ' +
-                  '  label="{{labels.firstName}}" ' +
-                  '  ng-model="user.firstName" >' +
-                  '</md-text-float>';
-      var el = buildElement( markup, model);
+    it('should auto-pair input and label for accessibility.', function () {
+      var markup = '<md-text-float ' +
+        '  label="{{labels.firstName}}" ' +
+        '  ng-model="user.firstName" >' +
+        '</md-text-float>';
+      var el = buildElement(markup, model);
       var input = el.find('input');
       var label = el.find('label');
 
-      expect( label.attr('for') == "" ).toBe( false );
-      expect( input.attr('id') ).toBe( label.attr('for') );
+      expect(label.attr('for') == "").toBe(false);
+      expect(input.attr('id')).toBe(label.attr('for'));
     });
 
-    it('should add an ARIA attribute for disabled inputs', function() {
-      var markup ='<md-text-float disabled ' +
-                  '  label="{{labels.firstName}}" ' +
-                  '  ng-model="user.firstName" >' +
-                  '</md-text-float>';
-      var el = buildElement( markup, model);
+    it('should add an ARIA attribute for disabled inputs', function () {
+      var markup = '<md-text-float disabled ' +
+        '  label="{{labels.firstName}}" ' +
+        '  ng-model="user.firstName" >' +
+        '</md-text-float>';
+      var el = buildElement(markup, model);
       var input = el.find('input');
 
-      expect( input.attr('aria-disabled') ).toBe( 'true' );
+      expect(input.attr('aria-disabled')).toBe('true');
+    });
+  });
+
+  describe(' - mdTextareaFloat', function mdTextareaFloatSuit() {
+    var model;
+    beforeEach(function () {
+      model = {
+        labels: {
+          intro: 'intro'
+        },
+        user: {
+          filledIntro: 'This is my intro',
+          emptyIntro: null
+        }
+      }
+    });
+
+    it('should configure the amount of collumn and rows', function configureColsAndRows() {
+      var markup = '<md-textarea-float rows="4" cols="50"' +
+        '  label="{{labels.intro}}" ' +
+        '  ng-model="user.filledIntro" >' +
+        '</md-textarea-float>';
+      var el = buildElement(markup, model);
+      var textarea = el.find('textarea');
+
+      expect(textarea.attr('rows')).toBe('4');
+      expect(textarea.attr('cols')).toBe('50');
+    });
+
+    it('should configure the label', function configureLabel() {
+      var markup = '<md-textarea-float rows="4" cols="50"' +
+        '  label="{{labels.intro}}" ' +
+        '  ng-model="user.filledIntro" >' +
+        '</md-textarea-float>';
+      var el = buildElement(markup, model);
+      var label = el.find('label');
+
+      expect(label.text()).toBe(model.labels.intro);
     });
   });
 
@@ -231,37 +274,37 @@ describe('Text Field directives', function() {
   // ****************************************************************
 
   var templates = {
-    md_text_float : '<md-text-float ' +
-                '   type="{{type}}" ' +
-                '   label="{{label}}" ' +
-                '   ng-model="{{model}}" >' +
-                '</md-text-float>',
+    md_text_float: '<md-text-float ' +
+      '   type="{{type}}" ' +
+      '   label="{{label}}" ' +
+      '   ng-model="{{model}}" >' +
+      '</md-text-float>',
 
     md_input_group: '<div class="md-input-group" tabindex="-1">' +
-                ' <label>{{label}}</label>' +
-                ' <md-input id="{{id}}" type="{{type}}" ng-model="{{model}}"></md-input>' +
-                '</div>'
+      ' <label>{{label}}</label>' +
+      ' <md-input id="{{id}}" type="{{type}}" ng-model="{{model}}"></md-input>' +
+      '</div>'
   };
 
   /**
    * Build a text float group using the `<md-input-group />` markup template
    */
   function setupInputGroup(expressions, values) {
-    values = angular.extend({},{type:"text", id:''},values||{});
+    values = angular.extend({}, {type: "text", id: ''}, values || {});
 
-    return buildElement( templates.md_input_group, values, angular.extend({}, expressions||{}));
+    return buildElement(templates.md_input_group, values, angular.extend({}, expressions || {}));
   }
 
   /**
    * Build a text float group using the `<md-text-float />` markup template
    */
   function setupTextFloat(expressions, values) {
-    values = angular.extend({ modelValue:"",type:'text' }, values || {});
+    values = angular.extend({ modelValue: "", type: 'text' }, values || {});
 
-    var defaults = {model:"modelValue", label:""};
-    var tokens = angular.extend({}, defaults, expressions||{} );
+    var defaults = {model: "modelValue", label: ""};
+    var tokens = angular.extend({}, defaults, expressions || {});
 
-    return buildElement( templates.md_text_float, values, tokens );
+    return buildElement(templates.md_text_float, values, tokens);
   }
 
   /**
@@ -269,19 +312,19 @@ describe('Text Field directives', function() {
    * and link both the bindings and attribute assignments.
    * @returns {*} DOM Element
    */
-  function buildElement( template, scope, interpolationScope  ) {
+  function buildElement(template, scope, interpolationScope) {
     var el;
 
-    inject(function($compile, $interpolate, $rootScope) {
-      scope = angular.extend( $rootScope.$new(), scope || {});
+    inject(function ($compile, $interpolate, $rootScope) {
+      scope = angular.extend($rootScope.$new(), scope || {});
 
       // First substitute interpolation values into the template... if any
-      if ( interpolationScope ) {
-        template = $interpolate( template )( interpolationScope );
+      if (interpolationScope) {
+        template = $interpolate(template)(interpolationScope);
       }
 
       // Compile the template using the scope model(s)
-      el = $compile( template )( scope );
+      el = $compile(template)(scope);
       $rootScope.$apply();
 
     });