diff --git a/demos/snackbar.html b/demos/snackbar.html
index c87fd24768e..dad32a74974 100644
--- a/demos/snackbar.html
+++ b/demos/snackbar.html
@@ -124,14 +124,14 @@ <h2 class="mdc-typography--title">Basic Example</h2>
 
         <div class="mdc-text-field">
           <input type="text" id="message" class="mdc-text-field__input" value="Message deleted">
-          <label class="mdc-text-field__label" for="message">Message Text</label>
+          <label class="mdc-floating-label" for="message">Message Text</label>
           <div class="mdc-line-ripple"></div>
         </div>
         <br/>
 
         <div class="mdc-text-field">
           <input type="text" id="action" class="mdc-text-field__input" value="Undo">
-          <label class="mdc-text-field__label" for="action">Action Text</label>
+          <label class="mdc-floating-label" for="action">Action Text</label>
           <div class="mdc-line-ripple"></div>
         </div>
         <br/>
diff --git a/demos/text-field.html b/demos/text-field.html
index 429081f58e7..476f057047d 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -64,7 +64,7 @@
       <section class="hero">
         <div class="mdc-text-field">
           <input type="text" class="mdc-text-field__input" id="my-text-field" aria-controls="my-text-field-helper-text">
-          <label for="my-text-field" class="mdc-text-field__label">Text Field</label>
+          <label for="my-text-field" class="mdc-floating-label">Text Field</label>
           <div class="mdc-line-ripple"></div>
         </div>
       </section>
@@ -74,7 +74,7 @@ <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
         <section id="demo-text-field-wrapper">
           <div class="mdc-text-field">
             <input type="text" class="mdc-text-field__input" id="full-func-text-field" aria-controls="my-text-field-helper-text">
-            <label for="full-func-text-field" class="mdc-text-field__label">Email Address</label>
+            <label for="full-func-text-field" class="mdc-floating-label">Email Address</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p id="my-text-field-helper-text" class="mdc-text-field-helper-text"
@@ -124,7 +124,7 @@ <h2>Password field with validation</h2>
           <input required pattern=".{8,}" type="password" class="mdc-text-field__input" id="pw"
                  aria-controls="pw-validation-msg"
                  autocomplete="current-password">
-          <label for="pw" class="mdc-text-field__label">Choose password</label>
+          <label for="pw" class="mdc-floating-label">Choose password</label>
           <div class="mdc-line-ripple"></div>
         </div>
         <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
@@ -139,7 +139,7 @@ <h2>Outlined Text Field</h2>
           <div id="tf-outlined-example" class="mdc-text-field mdc-text-field--outlined" data-demo-no-auto-js>
             <input required pattern=".{8,}" type="text" id="tf-outlined-input" class="mdc-text-field__input"
                    aria-controls="name-validation-message">
-            <label for="tf-outlined-input" class="mdc-text-field__label">Your Name</label>
+            <label for="tf-outlined-input" class="mdc-floating-label">Your Name</label>
             <div class="mdc-text-field__outline">
               <svg>
                 <path class="mdc-text-field__outline-path"/>
@@ -175,7 +175,7 @@ <h2>Text Field box</h2>
           <div id="tf-box-example" class="mdc-text-field mdc-text-field--box" data-demo-no-auto-js>
             <input type="text" id="tf-box" class="mdc-text-field__input"
                    aria-controls="name-validation-message">
-            <label for="tf-box" class="mdc-text-field__label">Your Name</label>
+            <label for="tf-box" class="mdc-floating-label">Your Name</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
@@ -220,7 +220,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
             class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon" data-demo-no-auto-js>
             <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
             <input type="text" id="tf-box-leading" class="mdc-text-field__input">
-            <label for="tf-box-leading" class="mdc-text-field__label">Your name</label>
+            <label for="tf-box-leading" class="mdc-floating-label">Your name</label>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
@@ -228,7 +228,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
           <div id="tf-box-trailing-example"
             class="mdc-text-field mdc-text-field--box mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
             <input type="text" id="tf-box-trailing" class="mdc-text-field__input">
-            <label for="tf-box-trailing" class="mdc-text-field__label">Your other name</label>
+            <label for="tf-box-trailing" class="mdc-floating-label">Your other name</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -238,7 +238,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
             class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon" data-demo-no-auto-js>
             <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
             <input type="text" id="tf-outlined-leading" class="mdc-text-field__input">
-            <label for="tf-outlined-leading" class="mdc-text-field__label">Your other name</label>
+            <label for="tf-outlined-leading" class="mdc-floating-label">Your other name</label>
             <div class="mdc-text-field__outline">
               <svg>
                 <path class="mdc-text-field__outline-path"/>
@@ -251,7 +251,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
           <div id="tf-outlined-trailing-example"
             class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
             <input type="text" id="tf-outlined-trailing" class="mdc-text-field__input">
-            <label for="tf-outlined-trailing" class="mdc-text-field__label">Your other name</label>
+            <label for="tf-outlined-trailing" class="mdc-floating-label">Your other name</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
             <div class="mdc-text-field__outline">
               <svg>
@@ -291,7 +291,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
         <h2>Preventing FOUC</h2>
         <div class="mdc-text-field mdc-text-field--upgraded">
           <input id="fouc" type="text" class="mdc-text-field__input" value="Pre-filled value">
-          <label for="fouc" class="mdc-text-field__label mdc-text-field__label--float-above">
+          <label for="fouc" class="mdc-floating-label mdc-floating-label--float-above">
             Label floating above
           </label>
           <div class="mdc-line-ripple"></div>
@@ -303,7 +303,7 @@ <h2>Textarea</h2>
         <section id="demo-text-field-textarea-wrapper">
           <div class="mdc-text-field mdc-text-field--textarea">
             <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
-            <label for="textarea" class="mdc-text-field__label">Textarea Label</label>
+            <label for="textarea" class="mdc-floating-label">Textarea Label</label>
           </div>
         </section>
         <div>
@@ -333,7 +333,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           </div>
           <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--fullwidth full-width-textarea-example">
             <textarea id="full-width-textarea" class="mdc-text-field__input" rows="8"></textarea>
-            <label for="full-width-textarea" class="mdc-text-field__label">Textarea Label</label>
+            <label for="full-width-textarea" class="mdc-floating-label">Textarea Label</label>
           </div>
         </div>
         <div>
diff --git a/demos/theme/index.html b/demos/theme/index.html
index 94a3a2d7af3..d32136b5384 100644
--- a/demos/theme/index.html
+++ b/demos/theme/index.html
@@ -836,7 +836,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
                    id="demo-text-field-default"
                    aria-controls="demo-text-field-default-helper-text"
                    autocomplete="email">
-            <label for="demo-text-field-default" class="mdc-text-field__label">Name (optional)</label>
+            <label for="demo-text-field-default" class="mdc-floating-label">Name (optional)</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text" id="demo-text-field-default-helper-text"
@@ -851,7 +851,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
                    aria-controls="demo-text-field-required-helper-text"
                    autocomplete="email"
                    required>
-            <label for="demo-text-field-required" class="mdc-text-field__label">Email (required)</label>
+            <label for="demo-text-field-required" class="mdc-floating-label">Email (required)</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" id="demo-text-field-required-helper-text">
@@ -863,7 +863,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
             <input type="text" class="mdc-text-field__input"
                    id="demo-text-field-box"
                    aria-controls="name-validation-message">
-            <label for="demo-text-field-box" class="mdc-text-field__label">With <code>--box</code> modifier</label>
+            <label for="demo-text-field-box" class="mdc-floating-label">With <code>--box</code> modifier</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text" id="demo-text-field-box-helper-text"
diff --git a/docs/docsite-index.md b/docs/docsite-index.md
index 26f97ff772f..26473fe66a6 100644
--- a/docs/docsite-index.md
+++ b/docs/docsite-index.md
@@ -35,9 +35,9 @@ Get up and running with Material Components for web
     ```
 
 2.  {: .step-list-item } ### Include the stylesheet
-    
+
     Include the MDC Web stylesheet in the head of your file
-    
+
     ```html
     <html>
       <head>
@@ -56,14 +56,14 @@ Get up and running with Material Components for web
         <h2 class="mdc-typography--display2">Hello, Material Components!</h2>
         <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
           <input type="text" class="mdc-text-field__input" id="demo-input">
-          <label for="demo-input" class="mdc-text-field__label">Tell us how you feel!</label>
+          <label for="demo-input" class="mdc-floating-label">Tell us how you feel!</label>
         </div>
       </body>
     ```
 
 4.  {: .step-list-item } ### Add scripts and instantiate
 
-    Add the MDC Web scripts and call MDC Auto Init. 
+    Add the MDC Web scripts and call MDC Auto Init.
 
     ```html
     <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
@@ -71,7 +71,7 @@ Get up and running with Material Components for web
     ```
 
     A full example of the HTML could look like this:
-    
+
     ```html
     <!DOCTYPE html>
     <html>
@@ -84,7 +84,7 @@ Get up and running with Material Components for web
         <h2 class="mdc-typography--display2">Hello, Material Components!</h2>
         <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
           <input type="text" class="mdc-text-field__input" id="demo-input">
-          <label for="demo-input" class="mdc-text-field__label">Tell us how you feel!</label>
+          <label for="demo-input" class="mdc-floating-label">Tell us how you feel!</label>
         </div>
         <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
         <script>mdc.autoInit()</script>
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 1752bfb4814..2c58e67f041 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -67,7 +67,7 @@ module.exports = [{
   output: {
     // This is necessary for webpack to compile
     // But we never use style-bundle.js
-    filename: 'style-bundle.js', 
+    filename: 'style-bundle.js',
   },
   module: {
     rules: [{
diff --git a/docs/migrating-from-mdl.md b/docs/migrating-from-mdl.md
index 1f5f6d4a62a..af4c3fc3930 100644
--- a/docs/migrating-from-mdl.md
+++ b/docs/migrating-from-mdl.md
@@ -92,7 +92,7 @@ MDC Web:
 ```html
 <div class="mdc-text-field">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -118,7 +118,7 @@ element, with the component’s class name as the value. For example:
 ```html
 <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -199,7 +199,7 @@ Like in MDL, styling components with CSS classes is simply a matter of applied t
 ```html
 <div class="mdc-text-field">
   <input type="text" id="my-text-field" class="mdc-text-field__input">
-  <label class="mdc-text-field__label" for="my-text-field">Hint text</label>
+  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
diff --git a/package.json b/package.json
index 073cf0c8713..39194f81308 100644
--- a/package.json
+++ b/package.json
@@ -130,6 +130,7 @@
           "drawer",
           "elevation",
           "fab",
+          "floating-label",
           "form-field",
           "grid-list",
           "icon-toggle",
@@ -168,6 +169,7 @@
     "mdc-base",
     "mdc-checkbox",
     "mdc-chips",
+    "mdc-floating-label",
     "mdc-form-field",
     "mdc-icon-toggle",
     "mdc-line-ripple",
diff --git a/packages/material-components-web/index.js b/packages/material-components-web/index.js
index f6c42e70e47..a35f22f5a7c 100644
--- a/packages/material-components-web/index.js
+++ b/packages/material-components-web/index.js
@@ -20,6 +20,7 @@ import * as checkbox from '@material/checkbox/index';
 import * as chips from '@material/chips/index';
 import * as dialog from '@material/dialog/index';
 import * as drawer from '@material/drawer/index';
+import * as floatingLabel from '@material/floating-label/index';
 import * as formField from '@material/form-field/index';
 import * as gridList from '@material/grid-list/index';
 import * as iconToggle from '@material/icon-toggle/index';
@@ -44,6 +45,7 @@ autoInit.register('MDCChipSet', chips.MDCChipSet);
 autoInit.register('MDCDialog', dialog.MDCDialog);
 autoInit.register('MDCPersistentDrawer', drawer.MDCPersistentDrawer);
 autoInit.register('MDCTemporaryDrawer', drawer.MDCTemporaryDrawer);
+autoInit.register('MDCFloatingLabel', floatingLabel.MDCFloatingLabel);
 autoInit.register('MDCFormField', formField.MDCFormField);
 autoInit.register('MDCRipple', ripple.MDCRipple);
 autoInit.register('MDCGridList', gridList.MDCGridList);
@@ -69,6 +71,7 @@ export {
   chips,
   dialog,
   drawer,
+  floatingLabel,
   formField,
   gridList,
   iconToggle,
diff --git a/packages/material-components-web/material-components-web.scss b/packages/material-components-web/material-components-web.scss
index f8476666470..65f2a08f5da 100644
--- a/packages/material-components-web/material-components-web.scss
+++ b/packages/material-components-web/material-components-web.scss
@@ -22,6 +22,7 @@
 @import "@material/drawer/mdc-drawer";
 @import "@material/elevation/mdc-elevation";
 @import "@material/fab/mdc-fab";
+@import "@material/floating-label/mdc-floating-label";
 @import "@material/form-field/mdc-form-field";
 @import "@material/grid-list/mdc-grid-list";
 @import "@material/icon-toggle/mdc-icon-toggle";
diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json
index 96299c2e872..51754244696 100644
--- a/packages/material-components-web/package.json
+++ b/packages/material-components-web/package.json
@@ -24,6 +24,7 @@
     "@material/drawer": "^0.30.0",
     "@material/elevation": "^0.28.0",
     "@material/fab": "^0.31.0",
+    "@material/floating-label": "0.0.0",
     "@material/form-field": "^0.31.0",
     "@material/grid-list": "^0.30.0",
     "@material/icon-toggle": "^0.31.0",
diff --git a/packages/mdc-auto-init/README.md b/packages/mdc-auto-init/README.md
index af64a85296c..98e911c1346 100644
--- a/packages/mdc-auto-init/README.md
+++ b/packages/mdc-auto-init/README.md
@@ -32,7 +32,7 @@ writing the markup, simply insert a script tag that calls `mdc.autoInit()`. Make
 ```html
 <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 
@@ -52,7 +52,7 @@ using a property whose name is the value of `data-mdc-auto-init`. For example, g
 ```html
 <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
new file mode 100644
index 00000000000..8626044ac2d
--- /dev/null
+++ b/packages/mdc-floating-label/README.md
@@ -0,0 +1,94 @@
+<!--docs:
+title: "Floating Label"
+layout: detail
+section: components
+excerpt: "An animated text caption for a text field or select."
+path: /catalog/input-controls/floating-label/
+-->
+
+# Floating Label
+
+Floating labels display the type of input a field requires. Every text field and select should have a label. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the text field.
+
+## Design & API Documentation
+
+<ul class="icon-list">
+  <li class="icon-list-item icon-list-item--spec">
+    <a href="https://material.io/guidelines/components/text-fields.html#text-fields-layout">Material Design guidelines: Text Fields Layout</a>
+  </li>
+</ul>
+
+## Usage
+
+### HTML Structure
+
+```html
+<label class="mdc-floating-label" for="my-text-field-id">Hint text</label>
+```
+
+### Usage within `mdc-text-field`
+
+```html
+<div class="mdc-text-field">
+  <input type="text" id="my-text-field-id" class="mdc-text-field__input">
+  <label class="mdc-floating-label" for="my-text-field-id">Hint text</label>
+  <div class="mdc-text-field__bottom-line"></div>
+</div>
+```
+
+<!-- TODO(mattgoo): add ### Usage within `mdc-select` once select uses mdc-floating-label -->
+
+#### Avoid Dynamic ID Generation
+
+If you're using the JavaScript-enabled version of floating label, you can avoid needing to assign
+a unique `id` to each `<input>` by wrapping `mdc-text-field__input` within a `<label>`:
+
+```html
+<label class="mdc-text-field">
+  <input type="text" class="mdc-text-field__input">
+  <span class="mdc-floating-label">Hint Text</span>
+  <div class="mdc-text-field__bottom-line"></div>
+</label>
+```
+
+### CSS Classes
+
+CSS Class | Description
+--- | ---
+`mdc-floating-label` | Mandatory.
+`mdc-floating-label--float-above` | Indicates the label is floating above the text field.
+`mdc-floating-label--shake` | Shakes the label.
+
+### SCSS Mixins
+
+Mixin | Description
+--- | ---
+`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.
+`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.
+`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.
+`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.
+`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.
+
+### `MDCFloatingLabel`
+
+Method Signature | Description
+--- | ---
+`shake(shouldShake: boolean) => void` | Shakes or stops shaking the label, depending on the value of `shouldShake`. Proxies to the foundation method of the same name.
+`float(shouldFloat: boolean) => void` | Floats or docks the label, depending on the value of `shouldFloat`. Proxies to the foundation method of the same name.
+`getWidth() => number` | Returns the width of the label element.
+
+### `MDCFloatingLabelAdapter`
+
+Method Signature | Description
+--- | ---
+`addClass(className: string) => void` | Adds a class to the label element.
+`removeClass(className: string) => void` | Removes a class from the label element.
+`getWidth() => number` | Returns the width of the label element.
+
+### `MDCFloatingLabelFoundation`
+
+Method Signature | Description
+--- | ---
+`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.
+`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.
+`getWidth() => number` | Returns the width of the label element.
diff --git a/packages/mdc-floating-label/_functions.scss b/packages/mdc-floating-label/_functions.scss
new file mode 100644
index 00000000000..05e1660895b
--- /dev/null
+++ b/packages/mdc-floating-label/_functions.scss
@@ -0,0 +1,21 @@
+//
+// Copyright 2017 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "@material/animation/variables";
+
+@function mdc-floating-label-transition($property) {
+  @return #{$property} 180ms $mdc-animation-standard-curve-timing-function;
+}
diff --git a/packages/mdc-floating-label/_mixins.scss b/packages/mdc-floating-label/_mixins.scss
new file mode 100644
index 00000000000..7a89664e2c9
--- /dev/null
+++ b/packages/mdc-floating-label/_mixins.scss
@@ -0,0 +1,68 @@
+//
+// Copyright 2018 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "./variables";
+
+@mixin mdc-floating-label-ink-color($color) {
+  @include mdc-theme-prop(color, $color);
+}
+
+// Used for textarea in case of scrolling
+@mixin mdc-floating-label-fill-color($color) {
+  @include mdc-theme-prop(background-color, $color);
+}
+
+@mixin mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX: 0%, $scale: .75) {
+  @keyframes mdc-floating-label-shake-float-above-#{$modifier} {
+    0% {
+      transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+    }
+
+    33% {
+      animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
+      transform: translateX(calc(4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+    }
+
+    66% {
+      animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
+      transform: translateX(calc(-4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+    }
+
+    100% {
+      transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+    }
+  }
+}
+
+@mixin mdc-floating-label-float-position($positionY, $positionX: 0%, $scale: .75) {
+  .mdc-floating-label--float-above {
+    @if $positionX == 0 {
+      transform: translateY(-1 * $positionY) scale($scale);
+    } @else {
+      transform: translateY(-1 * $positionY) translateX(-1 * $positionX) scale($scale);
+
+      @include mdc-rtl {
+        transform: translateY(-1 * $positionY) translateX($positionX) scale($scale);
+      }
+    }
+  }
+}
+
+@mixin mdc-floating-label-shake-animation($modifier) {
+  .mdc-floating-label--shake {
+    animation: mdc-floating-label-shake-float-above-#{$modifier} 250ms 1;
+  }
+}
diff --git a/packages/mdc-textfield/label/_variables.scss b/packages/mdc-floating-label/_variables.scss
similarity index 50%
rename from packages/mdc-textfield/label/_variables.scss
rename to packages/mdc-floating-label/_variables.scss
index 763df457b79..8170ac386c4 100644
--- a/packages/mdc-textfield/label/_variables.scss
+++ b/packages/mdc-floating-label/_variables.scss
@@ -14,14 +14,4 @@
 // limitations under the License.
 //
 
-$mdc-text-field-label-position-y: 100%;
-$mdc-text-field-box-label-position-y: 50%;
-$mdc-text-field-box-dense-label-position-y: 90%;
-$mdc-text-field-dense-label-scale: .923;
-$mdc-text-field-outlined-label-position-y: 130%;
-$mdc-text-field-outlined-dense-label-position-y: 145%;
-$mdc-text-field-outlined-with-leading-icon-label-position-x: 32px;
-$mdc-text-field-outlined-dense-with-leading-icon-label-position-x: 21px;
-$mdc-text-field-textarea-label-position-y: 50%;
-// Note that the scale factor is an eyeball'd approximation of what's shown in the mocks.
-$mdc-text-field-textarea-label-scale: .923;
+$mdc-floating-label-position-y: 100%;
diff --git a/packages/mdc-textfield/label/adapter.js b/packages/mdc-floating-label/adapter.js
similarity index 67%
rename from packages/mdc-textfield/label/adapter.js
rename to packages/mdc-floating-label/adapter.js
index d735245cdb0..caeba75972f 100644
--- a/packages/mdc-textfield/label/adapter.js
+++ b/packages/mdc-floating-label/adapter.js
@@ -18,16 +18,16 @@
 /* eslint no-unused-vars: [2, {"args": "none"}] */
 
 /**
- * Adapter for MDC Text Field Label.
+ * Adapter for MDC Floating Label.
  *
  * Defines the shape of the adapter expected by the foundation. Implement this
- * adapter to integrate the Text Field label into your framework. See
+ * adapter to integrate the floating label into your framework. See
  * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md
  * for more information.
  *
  * @record
  */
-class MDCTextFieldLabelAdapter {
+class MDCFloatingLabelAdapter {
   /**
    * Adds a class to the label element.
    * @param {string} className
@@ -45,6 +45,20 @@ class MDCTextFieldLabelAdapter {
    * @return {number}
    */
   getWidth() {}
+
+  /**
+   * Registers an event listener on the root element for a given event.
+   * @param {string} evtType
+   * @param {function(!Event): undefined} handler
+   */
+  registerInteractionHandler(evtType, handler) {}
+
+  /**
+   * Deregisters an event listener on the root element for a given event.
+   * @param {string} evtType
+   * @param {function(!Event): undefined} handler
+   */
+  deregisterInteractionHandler(evtType, handler) {}
 }
 
-export default MDCTextFieldLabelAdapter;
+export default MDCFloatingLabelAdapter;
diff --git a/packages/mdc-textfield/label/constants.js b/packages/mdc-floating-label/constants.js
similarity index 86%
rename from packages/mdc-textfield/label/constants.js
rename to packages/mdc-floating-label/constants.js
index 2346fcf6630..789db67b3bf 100644
--- a/packages/mdc-textfield/label/constants.js
+++ b/packages/mdc-floating-label/constants.js
@@ -17,8 +17,8 @@
 
 /** @enum {string} */
 const cssClasses = {
-  LABEL_FLOAT_ABOVE: 'mdc-text-field__label--float-above',
-  LABEL_SHAKE: 'mdc-text-field__label--shake',
+  LABEL_FLOAT_ABOVE: 'mdc-floating-label--float-above',
+  LABEL_SHAKE: 'mdc-floating-label--shake',
 };
 
 export {cssClasses};
diff --git a/packages/mdc-floating-label/foundation.js b/packages/mdc-floating-label/foundation.js
new file mode 100644
index 00000000000..330d4a14d3b
--- /dev/null
+++ b/packages/mdc-floating-label/foundation.js
@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import MDCFoundation from '@material/base/foundation';
+import MDCFloatingLabelAdapter from './adapter';
+import {cssClasses} from './constants';
+
+/**
+ * @extends {MDCFoundation<!MDCFloatingLabelAdapter>}
+ * @final
+ */
+class MDCFloatingLabelFoundation extends MDCFoundation {
+  /** @return enum {string} */
+  static get cssClasses() {
+    return cssClasses;
+  }
+
+  /**
+   * {@see MDCFloatingLabelAdapter} for typing information on parameters and return
+   * types.
+   * @return {!MDCFloatingLabelAdapter}
+   */
+  static get defaultAdapter() {
+    return /** @type {!MDCFloatingLabelAdapter} */ ({
+      addClass: () => {},
+      removeClass: () => {},
+      getWidth: () => {},
+      registerInteractionHandler: () => {},
+      deregisterInteractionHandler: () => {},
+    });
+  }
+
+  /**
+   * @param {!MDCFloatingLabelAdapter} adapter
+   */
+  constructor(adapter) {
+    super(Object.assign(MDCFloatingLabelFoundation.defaultAdapter, adapter));
+
+    /** @private {function(!Event): undefined} */
+    this.shakeAnimationEndHandler_ = () => this.handleShakeAnimationEnd_();
+  }
+
+  init() {
+    this.adapter_.registerInteractionHandler('animationend', this.shakeAnimationEndHandler_);
+  }
+
+  destroy() {
+    this.adapter_.deregisterInteractionHandler('animationend', this.shakeAnimationEndHandler_);
+  }
+
+  /**
+   * Returns the width of the label element.
+   * @return {number}
+   */
+  getWidth() {
+    return this.adapter_.getWidth();
+  }
+
+  /**
+   * Styles the label to produce the label shake for errors.
+   * @param {boolean} shouldShake adds shake class if true,
+   * otherwise removes shake class.
+   */
+  shake(shouldShake) {
+    const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
+    if (shouldShake) {
+      this.adapter_.addClass(LABEL_SHAKE);
+    } else {
+      this.adapter_.removeClass(LABEL_SHAKE);
+    }
+  }
+
+  /**
+   * Styles the label to float or dock.
+   * @param {boolean} shouldFloat adds float class if true, otherwise remove
+   * float and shake class to dock label.
+   */
+  float(shouldFloat) {
+    const {LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
+    if (shouldFloat) {
+      this.adapter_.addClass(LABEL_FLOAT_ABOVE);
+    } else {
+      this.adapter_.removeClass(LABEL_FLOAT_ABOVE);
+      this.adapter_.removeClass(LABEL_SHAKE);
+    }
+  }
+
+  /**
+   * Handles an interaction event on the root element.
+   */
+  handleShakeAnimationEnd_() {
+    const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
+    this.adapter_.removeClass(LABEL_SHAKE);
+  }
+}
+
+export default MDCFloatingLabelFoundation;
diff --git a/packages/mdc-floating-label/index.js b/packages/mdc-floating-label/index.js
new file mode 100644
index 00000000000..2d4fbadbcd9
--- /dev/null
+++ b/packages/mdc-floating-label/index.js
@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import MDCComponent from '@material/base/component';
+import MDCFloatingLabelAdapter from './adapter';
+import MDCFloatingLabelFoundation from './foundation';
+
+/**
+ * @extends {MDCComponent<!MDCFloatingLabelFoundation>}
+ * @final
+ */
+class MDCFloatingLabel extends MDCComponent {
+  /**
+   * @param {!Element} root
+   * @return {!MDCFloatingLabel}
+   */
+  static attachTo(root) {
+    return new MDCFloatingLabel(root);
+  }
+
+  /**
+   * Styles the label to produce the label shake for errors.
+   * @param {boolean} shouldShake styles the label to shake by adding shake class
+   * if true, otherwise will stop shaking by removing shake class.
+   */
+  shake(shouldShake) {
+    this.foundation_.shake(shouldShake);
+  }
+
+  /**
+   * Styles label to float/dock.
+   * @param {boolean} shouldFloat styles the label to float by adding float class
+   * if true, otherwise docks the label by removing the float class.
+   */
+  float(shouldFloat) {
+    this.foundation_.float(shouldFloat);
+  }
+
+  /**
+   * @return {number}
+   */
+  getWidth() {
+    return this.foundation_.getWidth();
+  }
+
+  /**
+   * @return {!MDCFloatingLabelFoundation}
+   */
+  getDefaultFoundation() {
+    return new MDCFloatingLabelFoundation({
+      addClass: (className) => this.root_.classList.add(className),
+      removeClass: (className) => this.root_.classList.remove(className),
+      getWidth: () => this.root_.offsetWidth,
+      registerInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
+      deregisterInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
+    });
+  }
+}
+
+export {MDCFloatingLabel, MDCFloatingLabelFoundation};
diff --git a/packages/mdc-textfield/label/mdc-text-field-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
similarity index 64%
rename from packages/mdc-textfield/label/mdc-text-field-label.scss
rename to packages/mdc-floating-label/mdc-floating-label.scss
index 342ebe68c36..b1236ada892 100644
--- a/packages/mdc-textfield/label/mdc-text-field-label.scss
+++ b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -14,35 +14,36 @@
 // limitations under the License.
 //
 
-@import "../mixins";
-@import "../variables";
 @import "@material/rtl/mixins";
 @import "@material/theme/variables";
 @import "@material/theme/mixins";
+@import "./functions";
+@import "./mixins";
+@import "./variables";
 
-// postcss-bem-linter: define text-field-label
-.mdc-text-field__label {
+// postcss-bem-linter: define floating-label
+.mdc-floating-label {
   position: absolute;
   bottom: 8px;
   left: 0;
   transform-origin: left top;
-  transition: mdc-text-field-transition(transform), mdc-text-field-transition(color);
+  transition: mdc-floating-label-transition(transform), mdc-floating-label-transition(color);
   cursor: text;
 
-  // stylelint-disable plugin/selector-bem-pattern
-  @include mdc-rtl(".mdc-text-field") {
+  @include mdc-rtl {
     right: 0;
     left: auto;
     transform-origin: right top;
   }
-  // stylelint-enable plugin/selector-bem-pattern
 }
 
-.mdc-text-field__label--float-above {
+.mdc-floating-label--float-above {
   cursor: auto;
 }
 
 @at-root {
-  @include mdc-text-field-label-float_($mdc-text-field-label-position-y);
-  @include mdc-text-field-label-shake_(standard);
+  @include mdc-floating-label-float-position($mdc-floating-label-position-y);
+  @include mdc-floating-label-shake-animation(standard);
 }
+
+@include mdc-floating-label-shake-keyframes(standard, $mdc-floating-label-position-y);
diff --git a/packages/mdc-floating-label/package.json b/packages/mdc-floating-label/package.json
new file mode 100644
index 00000000000..7ab8b72eebc
--- /dev/null
+++ b/packages/mdc-floating-label/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@material/floating-label",
+  "description": "The Material Components for the web floating-label component",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "keywords": [
+    "material components",
+    "material design",
+    "floatinglabel",
+    "floating label"
+  ],
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/material-components/material-components-web.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@material/base": "^0.29.0",
+    "@material/theme": "^0.30.0",
+    "@material/rtl": "^0.30.0"
+  }
+}
diff --git a/packages/mdc-line-ripple/README.md b/packages/mdc-line-ripple/README.md
index e10b4f81d81..ede488e0641 100644
--- a/packages/mdc-line-ripple/README.md
+++ b/packages/mdc-line-ripple/README.md
@@ -31,7 +31,7 @@ The line ripple is used to highlight user-specified text above it. When a line r
 ```html
 <div class="mdc-text-field">
   <input type="text" id="my-text-field-id" class="mdc-text-field__input">
-  <label class="mdc-text-field__label" for="my-text-field-id">Hint text</label>
+  <label class="mdc-floating-label" for="my-text-field-id">Hint text</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index 80447b31b14..773d8f4bb76 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -41,7 +41,7 @@ npm install --save @material/textfield
 ```html
 <div class="mdc-text-field">
   <input type="text" id="my-text-field" class="mdc-text-field__input">
-  <label class="mdc-text-field__label" for="my-text-field">Hint text</label>
+  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -54,7 +54,7 @@ by HTML5's form validation API.
 ```html
 <div class="mdc-text-field">
   <input type="password" id="pw" class="mdc-text-field__input" required minlength=8>
-  <label for="pw" class="mdc-text-field__label">Password</label>
+  <label for="pw" class="mdc-floating-label">Password</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -64,14 +64,14 @@ by HTML5's form validation API.
 #### Pre-filled
 
 When dealing with JS-driven text fields that already have values, you'll want to ensure that you
-render `mdc-text-field__label` with the `mdc-text-field__label--float-above` modifier class, and `mdc-text-field` with the `mdc-text-field--upgraded` modifier class. This will
+render `mdc-floating-label` with the `mdc-floating-label--float-above` modifier class, and `mdc-text-field` with the `mdc-text-field--upgraded` modifier class. This will
 ensure that the label moves out of the way of the text field's value and prevents a Flash Of
 Un-styled Content (**FOUC**).
 
 ```html
 <div class="mdc-text-field mdc-text-field--upgraded">
   <input type="text" id="pre-filled" class="mdc-text-field__input" value="Pre-filled value">
-  <label class="mdc-text-field__label mdc-text-field__label--float-above" for="pre-filled">
+  <label class="mdc-floating-label mdc-floating-label--float-above" for="pre-filled">
     Label in correct place
   </label>
   <div class="mdc-line-ripple"></div>
@@ -93,7 +93,7 @@ Full width text fields are useful for in-depth tasks or entering complex informa
 
 > _NOTE_: Do not use `mdc-text-field--box` or `mdc-text-field--outlined` to style a full width text field.
 
-> _NOTE_: Do not use `mdc-text-field__label` within `mdc-text-field--fullwidth`. Labels should not be
+> _NOTE_: Do not use `mdc-floating-label` within `mdc-text-field--fullwidth`. Labels should not be
 included as part of the DOM structure of a full width text field.
 
 #### Textarea
@@ -101,7 +101,7 @@ included as part of the DOM structure of a full width text field.
 ```html
 <div class="mdc-text-field mdc-text-field--textarea">
   <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
-  <label for="textarea" class="mdc-text-field__label">Textarea Label</label>
+  <label for="textarea" class="mdc-floating-label">Textarea Label</label>
 </div>
 ```
 
@@ -112,7 +112,7 @@ Add the `disabled` attribute to `<input>` if the `mdc-text-field` is disabled. Y
 ```html
 <div class="mdc-text-field mdc-text-field--disabled">
   <input type="text" id="disabled-text-field" class="mdc-text-field__input" disabled>
-  <label class="mdc-text-field__label" for="disabled-text-field">Disabled text field</label>
+  <label class="mdc-floating-label" for="disabled-text-field">Disabled text field</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -122,7 +122,7 @@ Add the `disabled` attribute to `<input>` if the `mdc-text-field` is disabled. Y
 ```html
 <div class="mdc-text-field mdc-text-field--outlined">
   <input type="text" id="tf-outlined" class="mdc-text-field__input">
-  <label for="tf-outlined" class="mdc-text-field__label">Your Name</label>
+  <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
   <div class="mdc-text-field__outline">
     <svg>
       <path class="mdc-text-field__outline-path"/>
@@ -174,23 +174,18 @@ apply these mixins with CSS selectors such as `.foo-text-field.mdc-text-field--i
 
 Mixin | Description
 --- | ---
-`mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for a box text field
-`mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` text field
+`mdc-text-field-bottom-line-color($color)` | Customizes the text-field bottom line color except the outline and textarea variants.
+`mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for the text-field box variant.
+`mdc-text-field-box-fill-color($color)` | Customizes the background color of the text-field box.
+`mdc-text-field-fullwidth-bottom-line-color($color)` | Customizes the fullwidth text-field variant bottom line color.
+`mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover text-field bottom line color except the outline and textarea variants.
 `mdc-text-field-ink-color($color)` | Customizes the text entered into the text-field.
-`mdc-text-field-label-color($color)` | Customizes the label color of the text-field.
+`mdc-text-field-label-color($color)` | Customizes the text color of the label.
 `mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text-field.
-`mdc-text-field-hover-line-ripple-color($color)` | Customizes the hover color of the line ripple of the text-field.
-`mdc-text-field-focused-line-ripple-color($color)` | Customizes the line-ripple ripple color when the text-field is focused.
-`mdc-text-field-outline-color($color)` | Customizes the color of the border of the outlined text-field.
-`mdc-text-field-hover-outline-color($color)` | Customizes the hover color of the border of the outlined text-field.
-`mdc-text-field-focused-outline-color($color)` | Customizes the outlined border color when the text-field is focused.
-`mdc-text-field-box-fill-color($color)` | Customizes the background color of the text-field box.
-`mdc-text-field-textarea-stroke-color($color)` | Customizes the color of the border of the textarea.
+`mdc-text-field-outlined-corner-radius($radius)` | Sets the border radius of of the text-field outline variant.
+`mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` variant.
 `mdc-text-field-textarea-fill-color($color)` | Customizes the color of the background of the textarea.
-`mdc-text-field-fullwidth-line-ripple-color($color)` | Customizes the line ripple under a fullwidth text field. Doesn't apply to a textarea.
-`mdc-text-field-icon-color($color)` | Customizes the color for the leading/trailing icons.
-`mdc-text-field-helper-text-color($color)` | Customizes the color of the helper text following a text-field.
-`mdc-text-field-helper-text-validation-color($color)` | Customizes the color of the helper text when it's used as a validation message.
+`mdc-text-field-textarea-stroke-color($color)` | Customizes the color of the border of the textarea.
 
 ### `MDCTextField`
 
@@ -254,4 +249,4 @@ Method Signature | Description
 `setHelperTextContent(content: string) => void` | Sets the content of the helper text
 `updateOutline() => void` | Updates the focus outline for outlined text fields
 
-`MDCTextFieldFoundation` supports multiple optional sub-elements: line ripple, helper text, icon, label, and outline. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.
+`MDCTextFieldFoundation` supports multiple optional sub-elements: line ripple, helper text, icon, and outline. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 9542b233404..941409e7e8a 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -14,14 +14,14 @@
 // limitations under the License.
 //
 
+@import "@material/floating-label/mixins";
 @import "@material/line-ripple/mixins";
-@import "outline/mixins";
-@import "label/mixins";
-@import "label/variables";
-@import "helper-text/mixins";
-@import "icon/mixins";
-@import "icon/variables";
 @import "@material/theme/mixins";
+@import "./helper-text/mixins";
+@import "./icon/mixins";
+@import "./icon/variables";
+@import "./outline/mixins";
+@import "./variables";
 
 @mixin mdc-text-field-outlined-corner-radius($radius) {
   border-radius: $radius;
@@ -34,7 +34,7 @@
 @mixin mdc-text-field-textarea-corner-radius($radius) {
   border-radius: $radius;
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     // Bottom corners are square to prevent weird edge cases
     // where text would be visible outside of the curve.
     border-radius: $radius $radius 0 0;
@@ -71,9 +71,12 @@
 @mixin mdc-text-field-textarea-fill-color($color) {
   &:not(.mdc-text-field--disabled) {
     @include mdc-text-field-textarea-fill-color_($color);
+
     // Automatically add label background color the same color as well to ensure
     // the label can be seen if the input scrolls behind the label
-    @include mdc-text-field-label-background-color_($color);
+    .mdc-floating-label {
+      @include mdc-floating-label-fill-color($color);
+    }
   }
 }
 
@@ -101,6 +104,12 @@
   }
 }
 
+@mixin mdc-text-field-label-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-label-ink-color_($color);
+  }
+}
+
 // Private mixins
 
 // Baseline
@@ -108,7 +117,7 @@
 @mixin mdc-text-field-disabled_ {
   @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border);
   @include mdc-text-field-ink-color_(text-disabled-on-background);
-  @include mdc-text-field-label-color_(text-disabled-on-background);
+  @include mdc-text-field-label-ink-color_(text-disabled-on-background);
   @include mdc-text-field-helper-text-color_(text-disabled-on-background);
   @include mdc-text-field-icon-color_($mdc-text-field-disabled-icon);
   @include mdc-text-field-fullwidth-bottom-line-color_($mdc-text-field-divider);
@@ -119,7 +128,7 @@
     border-bottom: 1px dotted;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     cursor: default;
   }
 }
@@ -150,7 +159,7 @@
 
 @mixin mdc-text-field-dense_ {
   // NOTE: This is an eyeball'd approximation of what's in the mocks.
-  @include mdc-text-field-label-float_(110%, 0%, $mdc-text-field-dense-label-scale);
+  @include mdc-floating-label-float-position(110%, 0%, $mdc-text-field-dense-label-scale);
 
   margin-top: 12px;
   margin-bottom: 4px;
@@ -158,7 +167,7 @@
 }
 
 @mixin mdc-required-text-field-label-asterisk_() {
-  .mdc-text-field__input:required + .mdc-text-field__label::after {
+  .mdc-text-field__input:required + .mdc-floating-label::after {
     @content;
   }
 }
@@ -192,8 +201,8 @@
 }
 
 @mixin mdc-text-field-outlined-dense_ {
-  @include mdc-text-field-label-float_($mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-  @include mdc-text-field-label-shake_(outlined-dense);
+  @include mdc-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+  @include mdc-floating-label-shake-animation(text-field-outlined-dense);
 
   height: 48px;
 
@@ -201,7 +210,7 @@
     padding: 12px 12px 7px;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     bottom: 18px;
   }
 
@@ -214,8 +223,8 @@
   @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
   @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
   @include mdc-text-field-focused-outline-color(primary);
-  @include mdc-text-field-label-float_($mdc-text-field-outlined-label-position-y);
-  @include mdc-text-field-label-shake_(outlined);
+  @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y);
+  @include mdc-floating-label-shake-animation(text-field-outlined);
 
   height: 56px;
   border: none;
@@ -229,7 +238,7 @@
     z-index: 1;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, 16px);
 
     position: absolute;
@@ -260,8 +269,8 @@
   @include mdc-ripple-radius-bounded;
   @include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
   @include mdc-text-field-box-fill-color($mdc-text-field-box-background);
-  @include mdc-text-field-label-float_($mdc-text-field-box-label-position-y);
-  @include mdc-text-field-label-shake_(box);
+  @include mdc-floating-label-float-position($mdc-text-field-box-label-position-y);
+  @include mdc-floating-label-shake-animation(text-field-box);
 
   display: inline-flex;
   position: relative;
@@ -276,7 +285,7 @@
     padding: 20px 16px 0;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, 16px);
 
     position: absolute;
@@ -301,8 +310,8 @@
 }
 
 @mixin mdc-text-field-box-dense_ {
-  @include mdc-text-field-label-float_($mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-  @include mdc-text-field-label-shake_(box-dense);
+  @include mdc-floating-label-float-position($mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+  @include mdc-floating-label-shake-animation(text-field-box-dense);
 
   .mdc-text-field__input {
     padding: 12px 12px 0;
@@ -320,13 +329,13 @@
 }
 
 @mixin mdc-text-field-outlined-with-leading-icon_ {
-  @include mdc-text-field-label-float_($mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
-  @include mdc-text-field-label-shake_(outlined-leading-icon);
+  @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
+  @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon);
 }
 
 @mixin mdc-text-field-outlined-dense-with-leading-icon_ {
-  @include mdc-text-field-label-float_($mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
-  @include mdc-text-field-label-shake_(outlined-leading-icon-dense);
+  @include mdc-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
+  @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense);
 }
 
 @mixin mdc-text-field-with-trailing-icon_ {
@@ -373,7 +382,6 @@
 // Textarea
 
 @mixin mdc-text-field-textarea-disabled_ {
-  @include mdc-text-field-label-background-color_($mdc-textarea-disabled-background);
   @include mdc-text-field-textarea-stroke-color_($mdc-text-field-disabled-border);
   @include mdc-text-field-textarea-fill-color_($mdc-textarea-disabled-background);
 
@@ -382,6 +390,10 @@
   .mdc-text-field__input {
     border: 1px solid transparent;
   }
+
+  .mdc-floating-label {
+    @include mdc-floating-label-fill-color($mdc-textarea-disabled-background);
+  }
 }
 
 @mixin mdc-text-field-textarea-invalid_ {
@@ -390,13 +402,12 @@
 
 @mixin mdc-text-field-textarea_ {
   @include mdc-text-field-textarea-corner-radius($mdc-text-field-border-radius);
-  @include mdc-text-field-label-background-color_($mdc-textarea-background);
   @include mdc-text-field-textarea-stroke-color($mdc-textarea-border);
 
   // Translate above the top of the input, and compensate for the amount of offset needed
   // to position the label within the bounds of the inset padding.
-  @include mdc-text-field-label-float_($mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
-  @include mdc-text-field-label-shake_(textarea);
+  @include mdc-floating-label-float-position($mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
+  @include mdc-floating-label-shake-animation(textarea);
 
   $padding-inset: 16px;
   $label-offset-y: $padding-inset + 2;
@@ -416,8 +427,9 @@
     border: 1px solid transparent;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, 1px);
+    @include mdc-floating-label-fill-color($mdc-textarea-background);
 
     top: $label-offset-y;
     bottom: auto;
@@ -475,3 +487,14 @@
     @include mdc-line-ripple-color($color);
   }
 }
+
+@mixin mdc-text-field-label-ink-color_($color) {
+  .mdc-floating-label {
+    @include mdc-floating-label-ink-color($color);
+  }
+
+  // CSS-only version
+  .mdc-text-field__input::placeholder {
+    @include mdc-theme-prop(color, $color);
+  }
+}
diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
index a8005168da4..c179091c9c5 100644
--- a/packages/mdc-textfield/_variables.scss
+++ b/packages/mdc-textfield/_variables.scss
@@ -38,3 +38,14 @@ $mdc-textarea-background: rgba(white, 1);
 $mdc-textarea-disabled-background: rgba(249, 249, 249, 1);
 
 $mdc-text-field-border-radius: 4px !default;
+
+$mdc-text-field-box-label-position-y: 50%;
+$mdc-text-field-box-dense-label-position-y: 90%;
+$mdc-text-field-dense-label-scale: .923;
+$mdc-text-field-outlined-label-position-y: 130%;
+$mdc-text-field-outlined-dense-label-position-y: 145%;
+$mdc-text-field-outlined-with-leading-icon-label-position-x: 32px;
+$mdc-text-field-outlined-dense-with-leading-icon-label-position-x: 21px;
+$mdc-text-field-textarea-label-position-y: 50%;
+// Note that the scale factor is an eyeballed approximation of what's shown in the mocks.
+$mdc-text-field-textarea-label-scale: .923;
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index fc31be86a0a..f25b8b18172 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -19,7 +19,7 @@
 import MDCLineRippleFoundation from '@material/line-ripple/foundation';
 import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
 import MDCTextFieldIconFoundation from './icon/foundation';
-import MDCTextFieldLabelFoundation from './label/foundation';
+import MDCFloatingLabelFoundation from '@material/floating-label/foundation';
 import MDCTextFieldOutlineFoundation from './outline/foundation';
 
 /* eslint no-unused-vars: [2, {"args": "none"}] */
@@ -42,7 +42,7 @@ let NativeInputType;
  *   lineRipple: (!MDCLineRippleFoundation|undefined),
  *   helperText: (!MDCTextFieldHelperTextFoundation|undefined),
  *   icon: (!MDCTextFieldIconFoundation|undefined),
- *   label: (!MDCTextFieldLabelFoundation|undefined),
+ *   label: (!MDCFloatingLabelFoundation|undefined),
  *   outline: (!MDCTextFieldOutlineFoundation|undefined)
  * }}
  */
@@ -146,6 +146,33 @@ class MDCTextFieldAdapter {
    * @param {number} normalizedX
    */
   setLineRippleTransformOrigin(normalizedX) {}
+
+  /**
+   * Only implement if label exists.
+   * Shakes label if shouldShake is true.
+   * @param {boolean} shouldShake
+   */
+  shakeLabel(shouldShake) {}
+
+  /**
+   * Only implement if label exists.
+   * Floats the label above the input element if shouldFloat is true.
+   * @param {boolean} shouldFloat
+   */
+  floatLabel(shouldFloat) {}
+
+  /**
+   * Returns true if label element exists, false if it doesn't.
+   * @return {boolean}
+   */
+  hasLabel() {}
+
+  /**
+   * Only implement if label exists.
+   * Returns width of label in pixels.
+   * @return {number}
+   */
+  getLabelWidth() {}
 }
 
 export {MDCTextFieldAdapter, NativeInputType, FoundationMapType};
diff --git a/packages/mdc-textfield/constants.js b/packages/mdc-textfield/constants.js
index eb64d2577da..cb9c72c9b55 100644
--- a/packages/mdc-textfield/constants.js
+++ b/packages/mdc-textfield/constants.js
@@ -19,7 +19,7 @@
 const strings = {
   ARIA_CONTROLS: 'aria-controls',
   INPUT_SELECTOR: '.mdc-text-field__input',
-  LABEL_SELECTOR: '.mdc-text-field__label',
+  LABEL_SELECTOR: '.mdc-floating-label',
   ICON_SELECTOR: '.mdc-text-field__icon',
   OUTLINE_SELECTOR: '.mdc-text-field__outline',
   BOTTOM_LINE_SELECTOR: '.mdc-line-ripple',
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index fb76510e23d..7709183bf83 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -21,7 +21,7 @@ import {MDCTextFieldAdapter, NativeInputType, FoundationMapType} from './adapter
 import MDCLineRippleFoundation from '@material/line-ripple/foundation';
 import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
 import MDCTextFieldIconFoundation from './icon/foundation';
-import MDCTextFieldLabelFoundation from './label/foundation';
+import MDCFloatingLabelFoundation from '@material/floating-label/foundation';
 import MDCTextFieldOutlineFoundation from './outline/foundation';
 /* eslint-enable no-unused-vars */
 import {cssClasses, strings, numbers} from './constants';
@@ -47,6 +47,16 @@ class MDCTextFieldFoundation extends MDCFoundation {
     return numbers;
   }
 
+  /** @return {boolean} */
+  get shouldShake() {
+    return !this.isValid() && !this.isFocused_;
+  }
+
+  /** @return {boolean} */
+  get shouldFloat() {
+    return !this.isBadInput_() && (!!this.getValue() || this.isFocused_);
+  }
+
   /**
    * {@see MDCTextFieldAdapter} for typing information on parameters and return
    * types.
@@ -67,6 +77,10 @@ class MDCTextFieldFoundation extends MDCFoundation {
       activateLineRipple: () => {},
       deactivateLineRipple: () => {},
       setLineRippleTransformOrigin: () => {},
+      shakeLabel: () => {},
+      floatLabel: () => {},
+      hasLabel: () => {},
+      getLabelWidth: () => {},
     });
   }
 
@@ -81,8 +95,6 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.helperText_ = foundationMap.helperText;
     /** @type {!MDCTextFieldIconFoundation|undefined} */
     this.icon_ = foundationMap.icon;
-    /** @type {!MDCTextFieldLabelFoundation|undefined} */
-    this.label_ = foundationMap.label;
     /** @type {!MDCTextFieldOutlineFoundation|undefined} */
     this.outline_ = foundationMap.outline;
 
@@ -109,9 +121,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
   init() {
     this.adapter_.addClass(MDCTextFieldFoundation.cssClasses.UPGRADED);
     // Ensure label does not collide with any pre-filled value.
-    if (this.label_ && this.getValue()) {
-      this.label_.styleFloat(
-        this.getValue(), this.isFocused_, this.isBadInput_());
+    if (this.adapter_.hasLabel() && this.getValue()) {
+      this.adapter_.floatLabel(this.shouldFloat);
     }
 
     if (this.adapter_.isFocused()) {
@@ -156,13 +167,13 @@ class MDCTextFieldFoundation extends MDCFoundation {
    * Updates the focus outline for outlined text fields.
    */
   updateOutline() {
-    if (!this.outline_ || !this.label_) {
+    if (!this.outline_ || !this.adapter_.hasLabel()) {
       return;
     }
 
     const isDense = this.adapter_.hasClass(cssClasses.DENSE);
     const labelScale = isDense ? numbers.DENSE_LABEL_SCALE : numbers.LABEL_SCALE;
-    const labelWidth = this.label_.getWidth() * labelScale;
+    const labelWidth = this.adapter_.getLabelWidth() * labelScale;
     const isRtl = this.adapter_.isRtl();
     this.outline_.updateSvgPath(labelWidth, isRtl);
   }
@@ -177,10 +188,9 @@ class MDCTextFieldFoundation extends MDCFoundation {
     if (this.outline_) {
       this.updateOutline();
     }
-    if (this.label_) {
-      this.label_.styleShake(this.isValid(), this.isFocused_);
-      this.label_.styleFloat(
-        this.getValue(), this.isFocused_, this.isBadInput_());
+    if (this.adapter_.hasLabel()) {
+      this.adapter_.shakeLabel(this.shouldShake);
+      this.adapter_.floatLabel(this.shouldFloat);
     }
     if (this.helperText_) {
       this.helperText_.showToScreenReader();
@@ -220,10 +230,9 @@ class MDCTextFieldFoundation extends MDCFoundation {
     const isValid = this.isValid();
     this.styleValidity_(isValid);
     this.styleFocused_(this.isFocused_);
-    if (this.label_) {
-      this.label_.styleShake(this.isValid(), this.isFocused_);
-      this.label_.styleFloat(
-        this.getValue(), this.isFocused_, this.isBadInput_());
+    if (this.adapter_.hasLabel()) {
+      this.adapter_.shakeLabel(this.shouldShake);
+      this.adapter_.floatLabel(this.shouldFloat);
     }
     if (shouldRemoveLabelFloat) {
       this.receivedUserInput_ = false;
@@ -244,10 +253,9 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.getNativeInput_().value = value;
     const isValid = this.isValid();
     this.styleValidity_(isValid);
-    if (this.label_) {
-      this.label_.styleShake(isValid, this.isFocused_);
-      this.label_.styleFloat(
-        this.getValue(), this.isFocused_, this.isBadInput_());
+    if (this.adapter_.hasLabel()) {
+      this.adapter_.shakeLabel(this.shouldShake);
+      this.adapter_.floatLabel(this.shouldFloat);
     }
   }
 
@@ -269,8 +277,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
     // Retrieve from the getter to ensure correct logic is applied.
     isValid = this.isValid();
     this.styleValidity_(isValid);
-    if (this.label_) {
-      this.label_.styleShake(isValid, this.isFocused_);
+    if (this.adapter_.hasLabel()) {
+      this.adapter_.shakeLabel(this.shouldShake);
     }
   }
 
diff --git a/packages/mdc-textfield/helper-text/README.md b/packages/mdc-textfield/helper-text/README.md
index 0cb478d09b8..4c65241d2bb 100644
--- a/packages/mdc-textfield/helper-text/README.md
+++ b/packages/mdc-textfield/helper-text/README.md
@@ -32,7 +32,7 @@ Helper text gives context about a field’s input, such as how the input will be
 ```html
 <div class="mdc-text-field">
   <input type="text" id="username" class="mdc-text-field__input">
-  <label for="username" class="mdc-text-field__label">Username</label>
+  <label for="username" class="mdc-floating-label">Username</label>
   <div class="mdc-line-ripple"></div>
 </div>
 <p class="mdc-text-field-helper-text" aria-hidden="true">
@@ -51,7 +51,7 @@ the input element.
 ```html
 <div class="mdc-text-field">
   <input type="text" id="username" class="mdc-text-field__input" aria-controls="username-helper-text">
-  <label for="username" class="mdc-text-field__label">Username</label>
+  <label for="username" class="mdc-floating-label">Username</label>
   <div class="mdc-line-ripple"></div>
 </div>
 <p id="username-helper-text" class="mdc-text-field-helper-text" aria-hidden="true">
@@ -73,6 +73,14 @@ CSS Class | Description
 `mdc-text-field-helper-text--persistent` | Makes the helper text permanently visible
 `mdc-text-field-helper-text--validation-msg` | Indicates the helper text is a validation message
 
+
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-text-field-helper-text-color($color)` | Customizes the color of the helper text following a text-field.
+`mdc-text-field-helper-text-validation-color($color)` | Customizes the color of the helper text when it's used as a validation message.
+
 ### `MDCTextFieldHelperText`
 
 ##### `MDCTextFieldHelperText.foundation`
diff --git a/packages/mdc-textfield/icon/README.md b/packages/mdc-textfield/icon/README.md
index e38592d77af..0ee225c04c1 100644
--- a/packages/mdc-textfield/icon/README.md
+++ b/packages/mdc-textfield/icon/README.md
@@ -38,7 +38,7 @@ In text field box:
 <div class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon">
   <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <label for="my-input" class="mdc-text-field__label">Your Name</label>
+  <label for="my-input" class="mdc-floating-label">Your Name</label>
   <div class="mdc-text-field__bottom-line"></div>
 </div>
 ```
@@ -48,7 +48,7 @@ In outlined text field:
 <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
   <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <label for="my-input" class="mdc-text-field__label">Your Name</label>
+  <label for="my-input" class="mdc-floating-label">Your Name</label>
   <div class="mdc-text-field__outline">
     <svg>
       <path class="mdc-text-field__outline-path"/>
@@ -64,7 +64,7 @@ In text field box:
 ```html
 <div class="mdc-text-field mdc-text-field--box mdc-text-field--with-trailing-icon">
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <label for="my-input" class="mdc-text-field__label">Your Name</label>
+  <label for="my-input" class="mdc-floating-label">Your Name</label>
   <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
   <div class="mdc-text-field__bottom-line"></div>
 </div>
@@ -74,7 +74,7 @@ In outlined text field:
 ```html
 <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <label for="my-input" class="mdc-text-field__label">Your Name</label>
+  <label for="my-input" class="mdc-floating-label">Your Name</label>
   <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
   <div class="mdc-text-field__outline">
     <svg>
@@ -89,6 +89,12 @@ In outlined text field:
 and the css will ensure the cursor is set to default, and that actioning on an icon doesn't
 do anything unexpected.
 
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-text-field-icon-color($color)` | Customizes the color for the leading/trailing icons.
+
 ### `MDCTextFieldIcon`
 
 ##### `MDCTextFieldIcon.foundation`
@@ -109,4 +115,4 @@ Method Signature | Description
 Method Signature | Description
 --- | ---
 `setDisabled(disabled: boolean) => void` | Updates the icon's disabled state
-`handleInteraction(evt: Event) => void` | Handles a text field interaction event
\ No newline at end of file
+`handleInteraction(evt: Event) => void` | Handles a text field interaction event
diff --git a/packages/mdc-textfield/icon/_mixins.scss b/packages/mdc-textfield/icon/_mixins.scss
index 8eb68c67f9c..ab4a0eaceee 100644
--- a/packages/mdc-textfield/icon/_mixins.scss
+++ b/packages/mdc-textfield/icon/_mixins.scss
@@ -43,8 +43,8 @@
   // Only move the label's position to allow room for the icon, if the icon is on the same
   // side as the label. Aka the icon is on left side in a LTR context.
   @if ($position-property == left) {
-    .mdc-text-field__label {
-	  @include mdc-rtl-reflexive-position($position-property, $padding);
+    .mdc-floating-label {
+      @include mdc-rtl-reflexive-position($position-property, $padding);
     }
   }
 }
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index ffd841e9861..46c0c1ae830 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -29,7 +29,7 @@ import MDCTextFieldFoundation from './foundation';
 import {MDCLineRipple, MDCLineRippleFoundation} from '@material/line-ripple/index';
 import {MDCTextFieldHelperText, MDCTextFieldHelperTextFoundation} from './helper-text/index';
 import {MDCTextFieldIcon, MDCTextFieldIconFoundation} from './icon/index';
-import {MDCTextFieldLabel, MDCTextFieldLabelFoundation} from './label/index';
+import {MDCFloatingLabel, MDCFloatingLabelFoundation} from '@material/floating-label/index';
 import {MDCTextFieldOutline, MDCTextFieldOutlineFoundation} from './outline/index';
 /* eslint-enable no-unused-vars */
 
@@ -53,7 +53,7 @@ class MDCTextField extends MDCComponent {
     this.helperText_;
     /** @private {?MDCTextFieldIcon} */
     this.icon_;
-    /** @private {?MDCTextFieldLabel} */
+    /** @private {?MDCFloatingLabel} */
     this.label_;
     /** @private {?MDCTextFieldOutline} */
     this.outline_;
@@ -76,8 +76,8 @@ class MDCTextField extends MDCComponent {
    * creates a new MDCTextFieldHelperText.
    * @param {(function(!Element): !MDCTextFieldIcon)=} iconFactory A function which
    * creates a new MDCTextFieldIcon.
-   * @param {(function(!Element): !MDCTextFieldLabel)=} labelFactory A function which
-   * creates a new MDCTextFieldLabel.
+   * @param {(function(!Element): !MDCFloatingLabel)=} labelFactory A function which
+   * creates a new MDCFloatingLabel.
    * @param {(function(!Element): !MDCTextFieldOutline)=} outlineFactory A function which
    * creates a new MDCTextFieldOutline.
    */
@@ -86,7 +86,7 @@ class MDCTextField extends MDCComponent {
     lineRippleFactory = (el) => new MDCLineRipple(el),
     helperTextFactory = (el) => new MDCTextFieldHelperText(el),
     iconFactory = (el) => new MDCTextFieldIcon(el),
-    labelFactory = (el) => new MDCTextFieldLabel(el),
+    labelFactory = (el) => new MDCFloatingLabel(el),
     outlineFactory = (el) => new MDCTextFieldOutline(el)) {
     this.input_ = this.root_.querySelector(strings.INPUT_SELECTOR);
     const labelElement = this.root_.querySelector(strings.LABEL_SELECTOR);
@@ -267,6 +267,18 @@ class MDCTextField extends MDCComponent {
             this.lineRipple_.setRippleCenter(normalizedX);
           }
         },
+        shakeLabel: (shouldShake) => {
+          this.label_.shake(shouldShake);
+        },
+        floatLabel: (shouldFloat) => {
+          this.label_.float(shouldFloat);
+        },
+        hasLabel: () => {
+          return !!this.label_;
+        },
+        getLabelWidth: () => {
+          return this.label_.getWidth();
+        },
       },
       this.getInputAdapterMethods_())),
       this.getFoundationMap_());
@@ -295,7 +307,6 @@ class MDCTextField extends MDCComponent {
     return {
       helperText: this.helperText_ ? this.helperText_.foundation : undefined,
       icon: this.icon_ ? this.icon_.foundation : undefined,
-      label: this.label_ ? this.label_.foundation : undefined,
       outline: this.outline_ ? this.outline_.foundation : undefined,
     };
   }
@@ -304,5 +315,4 @@ class MDCTextField extends MDCComponent {
 export {MDCTextField, MDCTextFieldFoundation,
   MDCTextFieldHelperText, MDCTextFieldHelperTextFoundation,
   MDCTextFieldIcon, MDCTextFieldIconFoundation,
-  MDCTextFieldLabel, MDCTextFieldLabelFoundation,
   MDCTextFieldOutline, MDCTextFieldOutlineFoundation};
diff --git a/packages/mdc-textfield/label/README.md b/packages/mdc-textfield/label/README.md
deleted file mode 100644
index f79a079378d..00000000000
--- a/packages/mdc-textfield/label/README.md
+++ /dev/null
@@ -1,93 +0,0 @@
-<!--docs:
-title: "Text Field Label"
-layout: detail
-section: components
-excerpt: "The label is a text caption or description for the text field."
-iconId: text_field
-path: /catalog/input-controls/text-field/label/
--->
-
-# Text Field Label
-
-Text field labels display the type of input a field requires. Every text field should have a label. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the text field.
-
-## Design & API Documentation
-
-<ul class="icon-list">
-  <li class="icon-list-item icon-list-item--spec">
-    <a href="https://material.io/guidelines/components/text-fields.html#text-fields-layout">Material Design guidelines: Text Fields Layout</a>
-  </li>
-</ul>
-
-## Usage
-
-### HTML Structure
-
-```html
-<label class="mdc-text-field__label" for="my-text-field-id">Hint text</label>
-```
-
-### Usage within `mdc-text-field`
-
-```html
-<div class="mdc-text-field">
-  <input type="text" id="my-text-field-id" class="mdc-text-field__input">
-  <label class="mdc-text-field__label" for="my-text-field-id">Hint text</label>
-  <div class="mdc-text-field__bottom-line"></div>
-</div>
-```
-
-#### Avoid Dynamic ID Generation
-
-It's also possible to wrap `mdc-text-field__input` within a `<label>` to avoid dynamic id generation:
-
-```html
-<label class="mdc-text-field">
-  <input type="text" class="mdc-text-field__input">
-  <span class="mdc-text-field__label">Hint Text</span>
-  <div class="mdc-text-field__bottom-line"></div>
-</label>
-```
-
-> _NOTE_: Only place an `mdc-text-field__label` inside of a text field _if you plan on using
-> Javascript_. Otherwise, the label must go outside of the text-field, as shown below.
-
-#### Single Line, CSS Only
-
-```html
-<label for="text-field-no-js">TextField with no JS: </label>
-<div class="mdc-text-field">
-  <input type="text" id="text-field-no-js" class="mdc-text-field__input" placeholder="Hint text">
-  <div class="mdc-text-field__bottom-line"></div>
-</div>
-```
-
-### CSS Classes
-
-CSS Class | Description
---- | ---
-`mdc-text-field__label` | Mandatory
-`mdc-text-field__label--float-above` | Indicates the label is floating above the text field
-`mdc-text-field__label--shake` | Shakes the label
-
-### `MDCTextFieldLabel`
-
-##### `MDCTextFieldLabel.foundation`
-
-This allows the parent `MDCTextField` component to access the public methods on the `MDCTextFieldLabelFoundation` class.
-
-### `MDCTextFieldLabelAdapter`
-
-Method Signature | Description
---- | ---
-`addClass(className: string) => void` | Adds a class to the label element
-`removeClass(className: string) => void` | Removes a class from the label element
-`getWidth() => number` | Returns the width of the label element
-
-### `MDCTextFieldLabelFoundation`
-
-Method Signature | Description
---- | ---
-`getWidth() => number` | Returns the width of the label element
-`styleShake(isValid: boolean, isFocused: boolean)` | Styles the label to produce the shake effect when needed.
-`styleFloat(value: string, isFocused: boolean, isBadInput: boolean)` | Styles the label to float or defloat as necessary.
diff --git a/packages/mdc-textfield/label/_mixins.scss b/packages/mdc-textfield/label/_mixins.scss
deleted file mode 100644
index cb5206680b7..00000000000
--- a/packages/mdc-textfield/label/_mixins.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-//
-// Copyright 2018 Google Inc. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-//
-
-@import './variables';
-
-// Public
-
-@mixin mdc-text-field-label-color($color) {
-  &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-label-color_($color);
-  }
-}
-
-// Private
-
-@mixin mdc-text-field-invalid-label-shake-keyframes_($modifier, $positionY, $positionX: 0%, $scale: .75) {
-  @keyframes invalid-shake-float-above-#{$modifier} {
-    0% {
-      transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
-    }
-
-    33% {
-      animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
-      transform: translateX(calc(4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
-    }
-
-    66% {
-      animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
-      transform: translateX(calc(-4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
-    }
-
-    100% {
-      transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
-    }
-  }
-}
-
-@include mdc-text-field-invalid-label-shake_keyframes_(standard, $mdc-text-field-label-position-y);
-@include mdc-text-field-invalid-label-shake-keyframes_(box, $mdc-text-field-box-label-position-y);
-@include mdc-text-field-invalid-label-shake-keyframes_(box-dense, $mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-@include mdc-text-field-invalid-label-shake_keyframes_(outlined, $mdc-text-field-outlined-label-position-y);
-@include mdc-text-field-invalid-label-shake_keyframes_(outlined-dense, $mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-@include mdc-text-field-invalid-label-shake_keyframes_(outlined-leading-icon, $mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
-@include mdc-text-field-invalid-label-shake_keyframes_(outlined-leading-icon-dense, $mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
-@include mdc-text-field-invalid-label-shake-keyframes_(textarea, $mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
-
-@mixin mdc-text-field-label-float_($positionY, $positionX: 0%, $scale: .75) {
-  @if $positionX == 0 {
-    .mdc-text-field__label--float-above {
-      transform: translateY(-1 * $positionY) scale($scale);
-    }
-  } @else {
-    .mdc-text-field__label--float-above {
-      transform: translateY(-1 * $positionY) translateX(-1 * $positionX) scale($scale);
-
-      @include mdc-rtl {
-        transform: translateY(-1 * $positionY) translateX($positionX) scale($scale);
-      }
-    }
-  }
-}
-
-@mixin mdc-text-field-label-shake_($modifier) {
-  .mdc-text-field__label--shake {
-    animation: invalid-shake-float-above-#{$modifier} 250ms 1;
-  }
-}
-
-@mixin mdc-text-field-label-color_($color) {
-  .mdc-text-field__label,
-  .mdc-text-field__input::placeholder { // placeholder used in place of label on css only version
-    @include mdc-theme-prop(color, $color);
-  }
-}
-
-// Used for textarea in case of scrolling
-@mixin mdc-text-field-label-background-color_($color) {
-  .mdc-text-field__label {
-    @include mdc-theme-prop(background-color, $color);
-  }
-}
diff --git a/packages/mdc-textfield/label/foundation.js b/packages/mdc-textfield/label/foundation.js
deleted file mode 100644
index a404f60e071..00000000000
--- a/packages/mdc-textfield/label/foundation.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * @license
- * Copyright 2016 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import MDCFoundation from '@material/base/foundation';
-import MDCTextFieldLabelAdapter from './adapter';
-import {cssClasses} from './constants';
-
-
-/**
- * @extends {MDCFoundation<!MDCTextFieldLabelAdapter>}
- * @final
- */
-class MDCTextFieldLabelFoundation extends MDCFoundation {
-  /** @return enum {string} */
-  static get cssClasses() {
-    return cssClasses;
-  }
-
-  /**
-   * {@see MDCTextFieldLabelAdapter} for typing information on parameters and return
-   * types.
-   * @return {!MDCTextFieldLabelAdapter}
-   */
-  static get defaultAdapter() {
-    return /** @type {!MDCTextFieldLabelAdapter} */ ({
-      addClass: () => {},
-      removeClass: () => {},
-      getWidth: () => {},
-    });
-  }
-
-  /**
-   * @param {!MDCTextFieldLabelAdapter} adapter
-   */
-  constructor(adapter) {
-    super(Object.assign(MDCTextFieldLabelFoundation.defaultAdapter, adapter));
-  }
-
-  /**
-   * Returns the width of the label element.
-   * @return {number}
-   */
-  getWidth() {
-    return this.adapter_.getWidth();
-  }
-
-  /**
-   * Styles the label to produce the label shake for errors.
-   * @param {boolean} isValid Whether the input's value is valid (passes all
-   *     validity checks).
-   * @param {boolean} isFocused Whether the input is focused.
-   */
-  styleShake(isValid, isFocused) {
-    const {LABEL_SHAKE} = MDCTextFieldLabelFoundation.cssClasses;
-    if (isValid || isFocused) {
-      this.adapter_.removeClass(LABEL_SHAKE);
-    } else {
-      this.adapter_.addClass(LABEL_SHAKE);
-    }
-  }
-
-  /**
-   * Styles the label to float or defloat as necessary.
-   * @param {string} value The value of the input.
-   * @param {boolean} isFocused Whether the input is focused.
-   * @param {boolean} isBadInput The input's `validity.badInput` value.
-   */
-  styleFloat(value, isFocused, isBadInput) {
-    const {LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextFieldLabelFoundation.cssClasses;
-    if (!!value || isFocused) {
-      this.adapter_.addClass(LABEL_FLOAT_ABOVE);
-    } else if (!isBadInput) {
-      this.adapter_.removeClass(LABEL_FLOAT_ABOVE);
-      this.adapter_.removeClass(LABEL_SHAKE);
-    }
-  }
-}
-
-export default MDCTextFieldLabelFoundation;
diff --git a/packages/mdc-textfield/label/index.js b/packages/mdc-textfield/label/index.js
deleted file mode 100644
index 5eab868c811..00000000000
--- a/packages/mdc-textfield/label/index.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * @license
- * Copyright 2016 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import MDCComponent from '@material/base/component';
-
-import MDCTextFieldLabelAdapter from './adapter';
-import MDCTextFieldLabelFoundation from './foundation';
-
-/**
- * @extends {MDCComponent<!MDCTextFieldLabelFoundation>}
- * @final
- */
-class MDCTextFieldLabel extends MDCComponent {
-  /**
-   * @param {!Element} root
-   * @return {!MDCTextFieldLabel}
-   */
-  static attachTo(root) {
-    return new MDCTextFieldLabel(root);
-  }
-
-  /**
-   * @return {!MDCTextFieldLabelFoundation}.
-   */
-  get foundation() {
-    return this.foundation_;
-  }
-
-  /**
-   * @return {!MDCTextFieldLabelFoundation}
-   */
-  getDefaultFoundation() {
-    return new MDCTextFieldLabelFoundation(/** @type {!MDCTextFieldLabelAdapter} */ (Object.assign({
-      addClass: (className) => this.root_.classList.add(className),
-      removeClass: (className) => this.root_.classList.remove(className),
-      getWidth: () => this.root_.offsetWidth,
-    })));
-  }
-}
-
-export {MDCTextFieldLabel, MDCTextFieldLabelFoundation};
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 6071899499b..b1ba211941f 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -14,21 +14,21 @@
 // limitations under the License.
 //
 
-@import "./functions";
-@import "./mixins";
-@import "./variables";
 @import "@material/animation/variables";
+@import "@material/floating-label/mdc-floating-label";
+@import "@material/line-ripple/mdc-line-ripple";
 @import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 @import "@material/theme/variables";
 @import "@material/typography/mixins";
 @import "@material/typography/variables";
-@import "@material/line-ripple/mdc-line-ripple";
+@import "./functions";
 @import "./helper-text/mdc-text-field-helper-text";
 @import "./icon/mdc-text-field-icon";
-@import "./label/mdc-text-field-label";
+@import "./mixins";
 @import "./outline/mdc-text-field-outline";
+@import "./variables";
 
 // postcss-bem-linter: define text-field
 
@@ -85,7 +85,7 @@
 
   // Move label when text-field gets autofilled in Chrome
   // stylelint-disable plugin/selector-bem-pattern
-  &:-webkit-autofill + .mdc-text-field__label {
+  &:-webkit-autofill + .mdc-floating-label {
     transform: translateY(-100%) scale(.75);
     cursor: auto;
   }
@@ -164,7 +164,7 @@
     height: 48px;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     pointer-events: none;
   }
 }
@@ -246,12 +246,20 @@
 
 // Never show the idle outline when the label is floating, otherwise the label
 // will collide with the idle outline.
-.mdc-text-field__label--float-above ~ .mdc-text-field__idle-outline {
+.mdc-floating-label--float-above ~ .mdc-text-field__idle-outline {
   opacity: 0;
 }
 
 // Show the outline when the label is floating, since the outline has a
 // notch for the label to fit into.
-.mdc-text-field__label--float-above ~ .mdc-text-field__outline {
+.mdc-floating-label--float-above ~ .mdc-text-field__outline {
   opacity: 1;
 }
+
+@include mdc-floating-label-shake-keyframes(text-field-box, $mdc-text-field-box-label-position-y);
+@include mdc-floating-label-shake-keyframes(text-field-box-dense, $mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+@include mdc-floating-label-shake-keyframes(text-field-outlined, $mdc-text-field-outlined-label-position-y);
+@include mdc-floating-label-shake-keyframes(text-field-outlined-dense, $mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+@include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon, $mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
+@include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon-dense, $mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
+@include mdc-floating-label-shake-keyframes(textarea, $mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
diff --git a/packages/mdc-textfield/outline/README.md b/packages/mdc-textfield/outline/README.md
index 4f8e3e03879..17e6fbf0036 100644
--- a/packages/mdc-textfield/outline/README.md
+++ b/packages/mdc-textfield/outline/README.md
@@ -37,7 +37,7 @@ The outline is a border around all sides of the text field. This is used for the
 ```html
 <div class="mdc-text-field mdc-text-field--outlined">
   <input class="mdc-text-field__input" id="my-text-field-id" type="text">
-  <label class="mdc-text-field__label" for="my-text-field-id">Label</label>
+  <label class="mdc-floating-label" for="my-text-field-id">Label</label>
   <div class="mdc-text-field__outline">
     <svg>
       <path class="mdc-text-field__outline-path"/>
@@ -55,6 +55,14 @@ CSS Class | Description
 `mdc-text-field__outline-path` | Mandatory. The SVG path in the outline when the label is floating above the input.
 `mdc-text-field__idle-outline` | Mandatory. The outline when the label is resting in the input position.
 
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-text-field-outline-color($color)` | Customizes the color of the border of the outlined text-field.
+`mdc-text-field-hover-outline-color($color)` | Customizes the hover color of the border of the outlined text-field.
+`mdc-text-field-focused-outline-color($color)` | Customizes the outlined border color when the text-field is focused.
+
 #### `MDCTextFieldOutline`
 
 ##### `MDCTextFieldOutline.foundation`
diff --git a/packages/mdc-textfield/package.json b/packages/mdc-textfield/package.json
index a5413e7b562..e667fbea5f5 100644
--- a/packages/mdc-textfield/package.json
+++ b/packages/mdc-textfield/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@material/animation": "^0.25.0",
     "@material/base": "^0.29.0",
+    "@material/floating-label": "0.0.0",
     "@material/line-ripple": "^0.30.0",
     "@material/ripple": "^0.31.0",
     "@material/rtl": "^0.30.0",
diff --git a/scripts/webpack/css-bundle-factory.js b/scripts/webpack/css-bundle-factory.js
index 693a6c89be7..d95ea4d78b5 100644
--- a/scripts/webpack/css-bundle-factory.js
+++ b/scripts/webpack/css-bundle-factory.js
@@ -136,6 +136,7 @@ module.exports = class {
         'mdc.drawer': getAbsolutePath('/packages/mdc-drawer/mdc-drawer.scss'),
         'mdc.elevation': getAbsolutePath('/packages/mdc-elevation/mdc-elevation.scss'),
         'mdc.fab': getAbsolutePath('/packages/mdc-fab/mdc-fab.scss'),
+        'mdc.floating-label': getAbsolutePath('/packages/mdc-floating-label/mdc-floating-label.scss'),
         'mdc.form-field': getAbsolutePath('/packages/mdc-form-field/mdc-form-field.scss'),
         'mdc.grid-list': getAbsolutePath('/packages/mdc-grid-list/mdc-grid-list.scss'),
         'mdc.icon-toggle': getAbsolutePath('/packages/mdc-icon-toggle/mdc-icon-toggle.scss'),
diff --git a/test/build/goldens/build-config-no-env.golden.json b/test/build/goldens/build-config-no-env.golden.json
index b9319a6d7ee..2f6fa32c12b 100644
--- a/test/build/goldens/build-config-no-env.golden.json
+++ b/test/build/goldens/build-config-no-env.golden.json
@@ -60,6 +60,9 @@
       "drawer": [
         "/packages/mdc-drawer/index.js"
       ],
+      "floatingLabel": [
+        "/packages/mdc-floating-label/index.js"
+      ],
       "formField": [
         "/packages/mdc-form-field/index.js"
       ],
@@ -222,6 +225,7 @@
       "mdc.drawer": "/packages/mdc-drawer/mdc-drawer.scss",
       "mdc.elevation": "/packages/mdc-elevation/mdc-elevation.scss",
       "mdc.fab": "/packages/mdc-fab/mdc-fab.scss",
+      "mdc.floating-label": "/packages/mdc-floating-label/mdc-floating-label.scss",
       "mdc.form-field": "/packages/mdc-form-field/mdc-form-field.scss",
       "mdc.grid-list": "/packages/mdc-grid-list/mdc-grid-list.scss",
       "mdc.icon-toggle": "/packages/mdc-icon-toggle/mdc-icon-toggle.scss",
diff --git a/test/build/goldens/build-config-prod-env.golden.json b/test/build/goldens/build-config-prod-env.golden.json
index ac44adde83b..b602f45c10e 100644
--- a/test/build/goldens/build-config-prod-env.golden.json
+++ b/test/build/goldens/build-config-prod-env.golden.json
@@ -60,6 +60,9 @@
       "drawer": [
         "/packages/mdc-drawer/index.js"
       ],
+      "floatingLabel": [
+        "/packages/mdc-floating-label/index.js"
+      ],
       "formField": [
         "/packages/mdc-form-field/index.js"
       ],
@@ -222,6 +225,7 @@
       "mdc.drawer": "/packages/mdc-drawer/mdc-drawer.scss",
       "mdc.elevation": "/packages/mdc-elevation/mdc-elevation.scss",
       "mdc.fab": "/packages/mdc-fab/mdc-fab.scss",
+      "mdc.floating-label": "/packages/mdc-floating-label/mdc-floating-label.scss",
       "mdc.form-field": "/packages/mdc-form-field/mdc-form-field.scss",
       "mdc.grid-list": "/packages/mdc-grid-list/mdc-grid-list.scss",
       "mdc.icon-toggle": "/packages/mdc-icon-toggle/mdc-icon-toggle.scss",
diff --git a/test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js b/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
similarity index 53%
rename from test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js
rename to test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
index caca9d96ad9..361966c5f40 100644
--- a/test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js
+++ b/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
@@ -19,23 +19,36 @@ import td from 'testdouble';
 
 import {verifyDefaultAdapter} from '../helpers/foundation';
 import {setupFoundationTest} from '../helpers/setup';
-import MDCTextFieldLabelFoundation from '../../../packages/mdc-textfield/label/foundation';
+import MDCFloatingLabelFoundation from '../../../packages/mdc-floating-label/foundation';
 
-const {cssClasses} = MDCTextFieldLabelFoundation;
+const {cssClasses} = MDCFloatingLabelFoundation;
 
-suite('MDCTextFieldLabelFoundation');
+const setupTest = () => setupFoundationTest(MDCFloatingLabelFoundation);
+
+suite('MDCFloatingLabelFoundation');
 
 test('exports cssClasses', () => {
-  assert.isOk('cssClasses' in MDCTextFieldLabelFoundation);
+  assert.deepEqual(MDCFloatingLabelFoundation.cssClasses, cssClasses);
 });
 
 test('defaultAdapter returns a complete adapter implementation', () => {
-  verifyDefaultAdapter(MDCTextFieldLabelFoundation, [
+  verifyDefaultAdapter(MDCFloatingLabelFoundation, [
     'addClass', 'removeClass', 'getWidth',
+    'registerInteractionHandler', 'deregisterInteractionHandler',
   ]);
 });
 
-const setupTest = () => setupFoundationTest(MDCTextFieldLabelFoundation);
+test('#init should register animationend event listener', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.init();
+  td.verify(mockAdapter.registerInteractionHandler('animationend', td.matchers.isA(Function)));
+});
+
+test('#destroy should deregister animationend event listener', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.destroy();
+  td.verify(mockAdapter.deregisterInteractionHandler('animationend', td.matchers.isA(Function)));
+});
 
 test('#getWidth returns the width of the label element scaled by 75%', () => {
   const {foundation, mockAdapter} = setupTest();
@@ -44,46 +57,38 @@ test('#getWidth returns the width of the label element scaled by 75%', () => {
   assert.equal(foundation.getWidth(), width);
 });
 
-test('#styleFloat with non-empty value floats the label', () => {
+test('#float called with shouldFloat is true, floats the label', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.styleFloat('new value', /* isFocused */ true, /* isBadInput */ false);
+  foundation.float(true);
   td.verify(mockAdapter.addClass(cssClasses.LABEL_FLOAT_ABOVE));
 });
 
-test('#styleFloat with empty value de-floats the label', () => {
+test('#float called with shouldFloat is false, de-floats the label', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.styleFloat('', /* isFocused */ false, /* isBadInput */ false);
+  foundation.float(false);
   td.verify(mockAdapter.removeClass(cssClasses.LABEL_FLOAT_ABOVE));
 });
 
-test('#styleShake with valid and invalid input', () => {
+test('#shake called with shouldShake is true, should add shake class', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.styleShake(/* isValid */ false, /* isFocused */ false);
+  foundation.shake(true);
   td.verify(mockAdapter.addClass(cssClasses.LABEL_SHAKE));
-
-  foundation.styleShake(/* isValid */ true, /* isFocused */ false);
-  td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
-
-  foundation.styleShake(/* isValid */ false, /* isFocused */ true);
-  td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
 });
 
-test('#styleFloat with empty value and badInput does not touch floating label', () => {
+test('#shake called with shouldShake is false, should remove shake class', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.styleFloat('', /* isFocused*/ false, /* isBadInput */ true);
-  td.verify(mockAdapter.addClass(cssClasses.LABEL_FLOAT_ABOVE), {times: 0});
-  td.verify(mockAdapter.removeClass(cssClasses.LABEL_FLOAT_ABOVE), {times: 0});
+  foundation.shake(false);
+  td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
 });
 
-test('#styleShake updates shake class', () => {
+test('#float called with shouldFloat is false, should remove shake class', () => {
   const {foundation, mockAdapter} = setupTest();
-
-  foundation.styleShake(/* isValid */ false, /* isFocused */ false);
-  td.verify(mockAdapter.addClass(cssClasses.LABEL_SHAKE));
-
-  foundation.styleShake(/* isValid */ true, /* isFocused */ false);
+  foundation.float(false);
   td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
+});
 
-  foundation.styleShake(/* isValid */ false, /* isFocused */ true);
+test('#handleShakeAnimationEnd_ should remove LABEL_SHAKE class', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.handleShakeAnimationEnd_();
   td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
 });
diff --git a/test/unit/mdc-textfield/mdc-text-field-label.test.js b/test/unit/mdc-floating-label/mdc-floating-label.test.js
similarity index 81%
rename from test/unit/mdc-textfield/mdc-text-field-label.test.js
rename to test/unit/mdc-floating-label/mdc-floating-label.test.js
index 6ea3624e6a4..4103210e79f 100644
--- a/test/unit/mdc-textfield/mdc-text-field-label.test.js
+++ b/test/unit/mdc-floating-label/mdc-floating-label.test.js
@@ -17,21 +17,21 @@
 import bel from 'bel';
 import {assert} from 'chai';
 
-import {MDCTextFieldLabel} from '../../../packages/mdc-textfield/label';
+import {MDCFloatingLabel} from '../../../packages/mdc-floating-label/index';
 
 const getFixture = () => bel`
-  <div class="mdc-text-field__label"></div>
+  <div class="mdc-floating-label"></div>
 `;
 
-suite('MDCTextFieldLabel');
+suite('MDCFloatingLabel');
 
-test('attachTo returns an MDCTextFieldLabel instance', () => {
-  assert.isOk(MDCTextFieldLabel.attachTo(getFixture()) instanceof MDCTextFieldLabel);
+test('attachTo returns an MDCFloatingLabel instance', () => {
+  assert.isOk(MDCFloatingLabel.attachTo(getFixture()) instanceof MDCFloatingLabel);
 });
 
 function setupTest() {
   const root = getFixture();
-  const component = new MDCTextFieldLabel(root);
+  const component = new MDCFloatingLabel(root);
   return {root, component};
 }
 
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 33cee653ced..ae6e248ef5a 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -42,7 +42,7 @@ test('defaultAdapter returns a complete adapter implementation', () => {
     'registerTextFieldInteractionHandler', 'deregisterTextFieldInteractionHandler',
     'registerInputInteractionHandler', 'deregisterInputInteractionHandler',
     'getNativeInput', 'isFocused', 'isRtl', 'activateLineRipple', 'deactivateLineRipple',
-    'setLineRippleTransformOrigin',
+    'setLineRippleTransformOrigin', 'shakeLabel', 'floatLabel', 'hasLabel', 'getLabelWidth',
   ]);
 });
 
@@ -59,25 +59,16 @@ const setupTest = () => {
     deregisterInteractionHandler: () => {},
     handleInteraction: () => {},
   });
-  const label = td.object({
-    getWidth: () => {},
-    floatAbove: () => {},
-    deactivateFocus: () => {},
-    setValidity: () => {},
-    styleShake: () => {},
-    styleFloat: () => {},
-  });
   const outline = td.object({
     updateSvgPath: () => {},
   });
   const foundationMap = {
     helperText: helperText,
     icon: icon,
-    label: label,
     outline: outline,
   };
   const foundation = new MDCTextFieldFoundation(mockAdapter, foundationMap);
-  return {foundation, mockAdapter, helperText, icon, label, outline};
+  return {foundation, mockAdapter, helperText, icon, outline};
 };
 
 test('#constructor sets disabled to false', () => {
@@ -85,8 +76,8 @@ test('#constructor sets disabled to false', () => {
   assert.isNotOk(foundation.isDisabled());
 });
 
-const setupValueTest = (value, optIsValid, optIsBadInput) => {
-  const {foundation, mockAdapter, helperText, label} = setupTest();
+const setupValueTest = (value, optIsValid, optIsBadInput, hasLabel) => {
+  const {foundation, mockAdapter, helperText} = setupTest();
   const nativeInput = {
     value: value,
     validity: {
@@ -94,10 +85,13 @@ const setupValueTest = (value, optIsValid, optIsBadInput) => {
       badInput: optIsBadInput === undefined ? false : !!optIsBadInput,
     },
   };
+  if (hasLabel) {
+    td.when(mockAdapter.hasLabel()).thenReturn(true);
+  }
   td.when(mockAdapter.getNativeInput()).thenReturn(nativeInput);
   foundation.init();
 
-  return {foundation, mockAdapter, helperText, label, nativeInput};
+  return {foundation, mockAdapter, helperText, nativeInput};
 };
 
 test('#getValue returns the field\'s value', () => {
@@ -111,41 +105,41 @@ test('#getValue returns the field\'s value', () => {
 
 test('#setValue with non-empty value styles the label', () => {
   const value = 'new value';
-  const {foundation, nativeInput, label} = setupValueTest('');
+  const {foundation, nativeInput, mockAdapter} = setupValueTest('', undefined, undefined, true);
   // Initial empty value should not float label.
-  td.verify(label.styleFloat('', /* isFocused */ false, /* isBadInput */ false), {times: 0});
+  td.verify(mockAdapter.floatLabel(false), {times: 0});
   nativeInput.value = value;
   foundation.setValue(value);
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
-  td.verify(label.styleFloat(value, /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(true));
 });
 
 test('#setValue with empty value styles the label', () => {
-  const {foundation, nativeInput, label} = setupValueTest('old value');
+  const {foundation, nativeInput, mockAdapter} = setupValueTest('old value', undefined, undefined, true);
   // Initial value should float the label.
-  td.verify(label.styleFloat('old value', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.floatLabel(true));
   nativeInput.value = '';
   foundation.setValue('');
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
-  td.verify(label.styleFloat('', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(false));
 });
 
 test('#setValue valid and invalid input', () => {
-  const {foundation, mockAdapter, nativeInput, helperText, label} =
-    setupValueTest('', /* isValid */ false);
+  const {foundation, mockAdapter, nativeInput, helperText} =
+    setupValueTest('', /* isValid */ false, undefined, true);
 
   foundation.setValue('invalid');
   td.verify(mockAdapter.addClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(false));
-  td.verify(label.styleShake(/* isValid */ false, /* isFocused */ false));
-  td.verify(label.styleFloat('invalid', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(true));
+  td.verify(mockAdapter.floatLabel(true));
 
   nativeInput.validity.valid = true;
   foundation.setValue('valid');
   td.verify(mockAdapter.removeClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(true));
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
-  td.verify(label.styleFloat('valid', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(true));
 });
 
 test('#setValue does not affect focused state', () => {
@@ -183,17 +177,38 @@ test('#setValid overrides native validation', () => {
 });
 
 test('#setValid updates classes', () => {
-  const {foundation, mockAdapter, helperText, label} = setupTest();
+  const {foundation, mockAdapter, helperText} = setupTest();
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
 
   foundation.setValid(false);
   td.verify(mockAdapter.addClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(false));
-  td.verify(label.styleShake(/* isValid */ false, /* isFocused */ false));
+  td.verify(mockAdapter.shakeLabel(true));
 
   foundation.setValid(true);
   td.verify(mockAdapter.removeClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(true));
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
+  td.verify(mockAdapter.shakeLabel(false));
+
+  // None of these is affected by setValid.
+  td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
+  td.verify(mockAdapter.removeClass(cssClasses.FOCUSED), {times: 0});
+  td.verify(mockAdapter.addClass(cssClasses.DISABLED), {times: 0});
+  td.verify(mockAdapter.removeClass(cssClasses.DISABLED), {times: 0});
+});
+
+test('#setValid updates classes, but not label methods when hasLabel is false', () => {
+  const {foundation, mockAdapter, helperText} = setupTest();
+
+  foundation.setValid(false);
+  td.verify(mockAdapter.addClass(cssClasses.INVALID));
+  td.verify(helperText.setValidity(false));
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
+
+  foundation.setValid(true);
+  td.verify(mockAdapter.removeClass(cssClasses.INVALID));
+  td.verify(helperText.setValidity(true));
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
 
   // None of these is affected by setValid.
   td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
@@ -336,7 +351,21 @@ test('#destroy removes event listeners', () => {
 });
 
 test('#init floats label if the input contains a value', () => {
-  const {foundation, mockAdapter, label} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
+  td.when(mockAdapter.getNativeInput()).thenReturn({
+    value: 'Pre-filled value',
+    disabled: false,
+    validity: {
+      badInput: false,
+    },
+  });
+  foundation.init();
+  td.verify(mockAdapter.floatLabel(true));
+});
+
+test('#init doesnot call floatLabel if there is no label and the input contains a value', () => {
+  const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.getNativeInput()).thenReturn({
     value: 'Pre-filled value',
     disabled: false,
@@ -345,11 +374,11 @@ test('#init floats label if the input contains a value', () => {
     },
   });
   foundation.init();
-  td.verify(label.styleFloat('Pre-filled value', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
 });
 
 test('#init does not float label if the input does not contain a value', () => {
-  const {foundation, mockAdapter, label} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.getNativeInput()).thenReturn({
     value: '',
     disabled: false,
@@ -358,7 +387,7 @@ test('#init does not float label if the input does not contain a value', () => {
     },
   });
   foundation.init();
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ false, /* isBadInput */ false), {times: 0});
+  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false, /* isBadInput */ false), {times: 0});
 });
 
 test('#setHelperTextContent sets the content of the helper text element', () => {
@@ -368,8 +397,9 @@ test('#setHelperTextContent sets the content of the helper text element', () =>
 });
 
 test('#updateOutline updates the SVG path of the outline element', () => {
-  const {foundation, mockAdapter, label, outline} = setupTest();
-  td.when(label.getWidth()).thenReturn(30);
+  const {foundation, mockAdapter, outline} = setupTest();
+  td.when(mockAdapter.getLabelWidth()).thenReturn(30);
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
   td.when(mockAdapter.hasClass(cssClasses.DENSE)).thenReturn(false);
   td.when(mockAdapter.isRtl()).thenReturn(false);
 
@@ -378,8 +408,9 @@ test('#updateOutline updates the SVG path of the outline element', () => {
 });
 
 test('#updateOutline updates the SVG path of the outline element when dense', () => {
-  const {foundation, mockAdapter, label, outline} = setupTest();
-  td.when(label.getWidth()).thenReturn(30);
+  const {foundation, mockAdapter, outline} = setupTest();
+  td.when(mockAdapter.getLabelWidth()).thenReturn(30);
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
   td.when(mockAdapter.hasClass(cssClasses.DENSE)).thenReturn(true);
   td.when(mockAdapter.isRtl()).thenReturn(false);
 
@@ -389,18 +420,9 @@ test('#updateOutline updates the SVG path of the outline element when dense', ()
 
 const setupBareBonesTest = () => {
   const mockAdapter = td.object(MDCTextFieldFoundation.defaultAdapter);
-  const label = td.object({
-    getWidth: () => {},
-    floatAbove: () => {},
-    deactivateFocus: () => {},
-    setValidity: () => {},
-    style: () => {},
-  });
-  const foundationMap = {
-    label: label,
-  };
+  const foundationMap = {};
   const foundation = new MDCTextFieldFoundation(mockAdapter, foundationMap);
-  return {foundation, mockAdapter, label};
+  return {foundation, mockAdapter};
 };
 
 test('#updateOutline does nothing if no outline is present', () => {
@@ -411,22 +433,31 @@ test('#updateOutline does nothing if no outline is present', () => {
 });
 
 test('on input styles label if input event occurs without any other events', () => {
-  const {foundation, mockAdapter, label} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   let input;
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
+  td.when(mockAdapter.registerInputInteractionHandler('input', td.matchers.isA(Function)))
+    .thenDo((evtType, handler) => input = handler);
+  foundation.init();
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
+  input();
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(true));
+});
 
+test('on input doesnot styles label if input event occurs without any other events but hasLabel is false', () => {
+  const {foundation, mockAdapter} = setupTest();
+  let input;
   td.when(mockAdapter.registerInputInteractionHandler('input', td.matchers.isA(Function)))
-    .thenDo((evtType, handler) => {
-      input = handler;
-    });
+    .thenDo((evtType, handler) => input = handler);
   foundation.init();
-  td.verify(label.styleFloat(), {times: 0});
   input();
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ true));
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ true, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
 });
 
 test('on input does nothing if input event preceded by keydown event', () => {
-  const {foundation, mockAdapter, label} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   const mockEvt = {
     type: 'keydown',
     key: 'Enter',
@@ -449,8 +480,8 @@ test('on input does nothing if input event preceded by keydown event', () => {
   foundation.init();
   keydown(mockEvt);
   input();
-  td.verify(label.styleShake(), {times: 0});
-  td.verify(label.styleFloat(), {times: 0});
+  td.verify(mockAdapter.shakeLabel(), {times: 0});
+  td.verify(mockAdapter.floatLabel(), {times: 0});
 });
 
 test('on focus adds mdc-text-field--focused class', () => {
@@ -478,16 +509,30 @@ test('on focus activates line ripple', () => {
 });
 
 test('on focus styles label', () => {
-  const {foundation, mockAdapter, label} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   let focus;
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
   td.when(mockAdapter.registerInputInteractionHandler('focus', td.matchers.isA(Function)))
     .thenDo((evtType, handler) => {
       focus = handler;
     });
   foundation.init();
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ false, /* isBadInput */ false), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
   focus();
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ true));
+  td.verify(mockAdapter.shakeLabel(false));
+});
+
+test('on focus do not styles label if hasLabel is false', () => {
+  const {foundation, mockAdapter} = setupTest();
+  let focus;
+  td.when(mockAdapter.registerInputInteractionHandler('focus', td.matchers.isA(Function)))
+    .thenDo((evtType, handler) => {
+      focus = handler;
+    });
+  foundation.init();
+  focus();
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
 });
 
 test('on focus makes helper text visible to the screen reader', () => {
@@ -503,7 +548,7 @@ test('on focus makes helper text visible to the screen reader', () => {
 });
 
 const setupBlurTest = () => {
-  const {foundation, mockAdapter, helperText, label} = setupTest();
+  const {foundation, mockAdapter, helperText} = setupTest();
   let blur;
   td.when(mockAdapter.registerInputInteractionHandler('blur', td.matchers.isA(Function))).thenDo((evtType, handler) => {
     blur = handler;
@@ -518,7 +563,7 @@ const setupBlurTest = () => {
   td.when(mockAdapter.getNativeInput()).thenReturn(nativeInput);
   foundation.init();
 
-  return {foundation, mockAdapter, blur, nativeInput, helperText, label};
+  return {foundation, mockAdapter, blur, nativeInput, helperText};
 };
 
 test('on blur removes mdc-text-field--focused class', () => {
@@ -528,20 +573,39 @@ test('on blur removes mdc-text-field--focused class', () => {
 });
 
 test('on blur styles label when no input value present and validity checks pass', () => {
-  const {blur, label} = setupBlurTest();
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ false), {times: 0});
+  const {blur, mockAdapter} = setupBlurTest();
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
+  blur();
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(false));
+});
+
+test('does not style label on blur when no input value present and validity checks pass and hasLabel is false', () => {
+  const {blur, mockAdapter} = setupBlurTest();
+  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false), {times: 0});
   blur();
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
 });
 
 test('on blur styles label if input has a value', () => {
-  const {blur, nativeInput, label} = setupBlurTest();
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ false), {times: 0});
+  const {blur, nativeInput, mockAdapter} = setupBlurTest();
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
+  nativeInput.value = 'non-empty value';
+  blur();
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(true));
+});
+
+test('does not style label on blur if input has a value and hasLabel is false', () => {
+  const {blur, nativeInput, mockAdapter} = setupBlurTest();
+  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false), {times: 0});
   nativeInput.value = 'non-empty value';
   blur();
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
-  td.verify(label.styleFloat('non-empty value', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
 });
 
 test('on blur removes mdc-text-field--invalid if custom validity is false and' +
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index c19fb5e5102..384391ad404 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -21,8 +21,9 @@ import {assert} from 'chai';
 
 import {MDCRipple} from '../../../packages/mdc-ripple';
 import {MDCLineRipple} from '../../../packages/mdc-line-ripple';
+import {MDCFloatingLabel} from '../../../packages/mdc-floating-label';
 import {MDCTextField, MDCTextFieldFoundation, MDCTextFieldHelperText,
-  MDCTextFieldIcon, MDCTextFieldLabel, MDCTextFieldOutline} from '../../../packages/mdc-textfield';
+  MDCTextFieldIcon, MDCTextFieldOutline} from '../../../packages/mdc-textfield';
 
 const {cssClasses} = MDCTextFieldFoundation;
 
@@ -30,7 +31,7 @@ const getFixture = () => bel`
   <div class="mdc-text-field">
     <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
     <input type="text" class="mdc-text-field__input" id="my-text-field">
-    <label class="mdc-text-field__label" for="my-text-field">My Label</label>
+    <label class="mdc-floating-label" for="my-text-field">My Label</label>
     <div class="mdc-line-ripple"></div>
   </div>
 `;
@@ -75,6 +76,7 @@ class FakeIcon {
 class FakeLabel {
   constructor() {
     this.destroy = td.func('.destroy');
+    this.shake = td.func('.shake');
   }
 }
 
@@ -97,7 +99,7 @@ test('#constructor when given a `mdc-text-field--outlined` element instantiates
   const root = bel`
     <div class="mdc-text-field mdc-text-field--outlined">
       <input type="text" class="mdc-text-field__input" id="my-text-field">
-      <label class="mdc-text-field__label" for="my-text-field">My Label</label>
+      <label class="mdc-floating-label" for="my-text-field">My Label</label>
       <div class="mdc-text-field__outline"></div>
       <div class="mdc-text-field__idle-outline"></div>
     </div>
@@ -126,7 +128,7 @@ test('#constructor when given a `mdc-text-field--outlined` element, initializes
   const root = bel`
     <div class="mdc-text-field mdc-text-field--outlined">
       <input type="text" class="mdc-text-field__input" id="my-text-field">
-      <label class="mdc-text-field__label" for="my-text-field">My Label</label>
+      <label class="mdc-floating-label" for="my-text-field">My Label</label>
       <div class="mdc-text-field__outline"></div>
       <div class="mdc-text-field__idle-outline"></div>
     </div>
@@ -160,10 +162,10 @@ test('#constructor instantiates an icon on the `.mdc-text-field__icon` element i
   assert.instanceOf(component.icon_, MDCTextFieldIcon);
 });
 
-test('#constructor instantiates a label on the `.mdc-text-field__label` element if present', () => {
+test('#constructor instantiates a label on the `.mdc-floating-label` element if present', () => {
   const root = getFixture();
   const component = new MDCTextField(root);
-  assert.instanceOf(component.label_, MDCTextFieldLabel);
+  assert.instanceOf(component.label_, MDCFloatingLabel);
 });
 
 test('#constructor instantiates an outline on the `.mdc-text-field__outline` element if present', () => {
diff --git a/webpack.config.js b/webpack.config.js
index db081b6951f..73afe75eb17 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -80,6 +80,7 @@ if (!env.isDev()) {
       chips: [path.resolve('./packages/mdc-chips/index.js')],
       dialog: [path.resolve('./packages/mdc-dialog/index.js')],
       drawer: [path.resolve('./packages/mdc-drawer/index.js')],
+      floatingLabel: [path.resolve('./packages/mdc-floating-label/index.js')],
       formField: [path.resolve('./packages/mdc-form-field/index.js')],
       gridList: [path.resolve('./packages/mdc-grid-list/index.js')],
       iconToggle: [path.resolve('./packages/mdc-icon-toggle/index.js')],