diff --git a/docs/components/text-field.md b/docs/components/text-field.md
index 3dfc092a..982de3e1 100644
--- a/docs/components/text-field.md
+++ b/docs/components/text-field.md
@@ -19,6 +19,13 @@ title: Text Field
     >
 </component>
 
+<component
+    name="Text area with rows"
+    component="text-area"
+    variation="text-area-multi-row"
+    >
+</component>
+
 <component
     name="Text field with hints"
     component="text-field"
diff --git a/docs/html/text-area/text-area-multi-row.html b/docs/html/text-area/text-area-multi-row.html
new file mode 100644
index 00000000..f60c37b5
--- /dev/null
+++ b/docs/html/text-area/text-area-multi-row.html
@@ -0,0 +1,12 @@
+<div class="ray-text-area">
+  <textarea
+    rows="4"
+    class="ray-text-area__input"
+    id="notes"
+    type="email"
+    placeholder="adding `rows` overrides default height"
+  ></textarea>
+  <label class="ray-text-area__label" for="notes">
+    Long notes
+  </label>
+</div>
diff --git a/packages/core/src/components/text-field/_text-field.scss b/packages/core/src/components/text-field/_text-field.scss
index ec106abf..cdcc8afb 100644
--- a/packages/core/src/components/text-field/_text-field.scss
+++ b/packages/core/src/components/text-field/_text-field.scss
@@ -169,4 +169,11 @@
       }
     }
   }
+
+  [rows].#{$ray-class-prefix}text-area {
+    &__input {
+      height: auto; // ie11 fallback
+      height: unset;
+    }
+  }
 }
diff --git a/packages/core/stories/text-field.stories.js b/packages/core/stories/text-field.stories.js
index bf41e4fc..64291fa4 100644
--- a/packages/core/stories/text-field.stories.js
+++ b/packages/core/stories/text-field.stories.js
@@ -65,7 +65,7 @@ storiesOf('Text Field', module)
       <div className="ray-text-area">
         <textarea
           className="ray-text-area__input"
-          row="4"
+          rows="4"
           id="textarea"
           placeholder="Few people are aware..."
         />