diff --git a/src/app/components/components/directives/directives.component.html b/src/app/components/components/directives/directives.component.html
index ec3d52f7a..2f90df29d 100644
--- a/src/app/components/components/directives/directives.component.html
+++ b/src/app/components/components/directives/directives.component.html
@@ -36,16 +36,16 @@ <h3>Setup:</h3>
     <p class="md-body-1">Use <code>tdAutoTrim</code> on an input to automatically trim the characters.</p>
     <p>Try entering white spaces before or after a word this input:</p>
     <div layout="row">
-      <md-input-container flex>
+      <md-form-field flex>
         <input mdInput tdAutoTrim [(ngModel)]="trim" placeholder="This will be autotrimmed"/>
-      </md-input-container>
+      </md-form-field>
     </div>
     <p>Usage:</p>
     <td-highlight lang="html">
         <![CDATA[
-          <md-input-container>
+          <md-form-field>
             <input mdInput tdAutoTrim [(ngModel)]="trim" placeholder="This will be autotrimmed"/>
-          </md-input-container>
+          </md-form-field>
         ]]>
     </td-highlight>
   </md-card-content>
diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.html b/src/app/components/components/dynamic-forms/dynamic-forms.component.html
index b5909954c..3c76e4424 100644
--- a/src/app/components/components/dynamic-forms/dynamic-forms.component.html
+++ b/src/app/components/components/dynamic-forms/dynamic-forms.component.html
@@ -69,13 +69,13 @@ <h4>Form elements</h4>
           <md-divider></md-divider>
           <div class="pad" layout="column">
             <div layout="row">
-              <md-input-container class="pad-right-xs" flex>
+              <md-form-field class="pad-right-xs" flex>
                 <input mdInput
                       placeholder="Label"
                       [(ngModel)]="model.label"
                       name="label">
-              </md-input-container>
-              <md-input-container flex="30">
+              </md-form-field>
+              <md-form-field flex="30">
                 <input mdInput
                       type="number"
                       min="0"
@@ -83,23 +83,23 @@ <h4>Form elements</h4>
                       placeholder="Flex (width in %)"
                       [(ngModel)]="model.flex"
                       name="flex">
-              </md-input-container>
+              </md-form-field>
             </div>
             <div *ngIf="isMinMaxSupported(model.type)" layout="row">
-              <md-input-container class="pad-right-xs" flex>
+              <md-form-field class="pad-right-xs" flex>
                 <input mdInput
                       type="number"
                       placeholder="Min"
                       [(ngModel)]="model.min"
                       name="min">
-              </md-input-container>
-              <md-input-container flex="50">
+              </md-form-field>
+              <md-form-field flex="50">
                 <input mdInput
                       type="number"
                       placeholder="Max"
                       [(ngModel)]="model.max"
                       name="max">
-              </md-input-container>
+              </md-form-field>
             </div>
             <div layout="row">
               <md-slide-toggle [(ngModel)]="model.required" name="required">Required</md-slide-toggle>
diff --git a/src/app/components/components/expansion-panel/expansion-panel.component.html b/src/app/components/components/expansion-panel/expansion-panel.component.html
index 06faf8988..3e6c2f7c3 100644
--- a/src/app/components/components/expansion-panel/expansion-panel.component.html
+++ b/src/app/components/components/expansion-panel/expansion-panel.component.html
@@ -155,14 +155,14 @@ <h4 mdLine>Headquarters</h4>
         </td-expansion-summary>
         <form class="md-padding">
           <div layout="row">
-            <md-input-container flex>
+            <md-form-field flex>
               <input mdInput placeholder="Company (disabled)" disabled value="Google"/>
-            </md-input-container>
+            </md-form-field>
           </div>
           <div layout="row">
-            <md-input-container flex>
+            <md-form-field flex>
               <textarea mdInput placeholder="Description" rows="4"></textarea>
-            </md-input-container>
+            </md-form-field>
           </div>
         </form>
         <md-divider></md-divider>
@@ -200,14 +200,14 @@ <h4 mdLine>Headquarters</h4>
               </td-expansion-summary>
               <form class="md-padding">
                 <div layout="row">
-                  <md-input-container flex>
+                  <md-form-field flex>
                     <input mdInput placeholder="Company (disabled)" disabled value="Google"/>
-                  </md-input-container>
+                  </md-form-field>
                 </div>
                 <div layout="row">
-                  <md-input-container flex>
+                  <md-form-field flex>
                     <textarea mdInput placeholder="Description" rows="4"></textarea>
-                  </md-input-container>
+                  </md-form-field>
                 </div>
               </form>
               <md-divider></md-divider>
diff --git a/src/app/components/components/file-input/file-input.component.html b/src/app/components/components/file-input/file-input.component.html
index 0268b44c1..0adb79e1d 100644
--- a/src/app/components/components/file-input/file-input.component.html
+++ b/src/app/components/components/file-input/file-input.component.html
@@ -7,7 +7,7 @@
       <ng-template mdTabLabel>Demo</ng-template>
       <md-card-content>
         <div layout="row">
-          <md-input-container tdFileDrop
+          <md-form-field tdFileDrop
                               [disabled]="disabled"
                               (fileDrop)="files = $event"
                               (click)="fileInput.inputElement.click()"
@@ -20,7 +20,7 @@
                    [value]="files?.length ? (files?.length + ' files') : files?.name"
                    [disabled]="disabled"
                    readonly/>
-          </md-input-container>
+          </md-form-field>
           <button md-icon-button *ngIf="files" (click)="fileInput.clear()" (keyup.enter)="fileInput.clear()">
             <md-icon>cancel</md-icon>
           </button>
@@ -45,7 +45,7 @@
         <td-highlight lang="html">
           <![CDATA[
             <div layout="row">
-              <md-input-container tdFileDrop
+              <md-form-field tdFileDrop
                                   [disabled]="disabled"
                                   (fileDrop)="files = $event"
                                   (click)="fileInput.inputElement.click()"
@@ -58,7 +58,7 @@
                       [value]="files?.length ? (files?.length + ' files') : files?.name"
                       [disabled]="disabled"
                       readonly/>
-              </md-input-container>
+              </md-form-field>
               <button md-icon-button *ngIf="files" (click)="fileInput.clear()" (keyup.enter)="fileInput.clear()">
                 <md-icon>cancel</md-icon>
               </button>
diff --git a/src/app/components/components/loading/loading.component.html b/src/app/components/components/loading/loading.component.html
index f3383e5b3..de5d8e1b3 100644
--- a/src/app/components/components/loading/loading.component.html
+++ b/src/app/components/components/loading/loading.component.html
@@ -10,14 +10,14 @@ <h4 class="md-subhead">with indetederminate [tdLoadingMode], circular [tdLoading
         <ng-template mdTabLabel>Demo</ng-template>
         <div *tdLoading="'overlayStarSyntax'; mode:'indeterminate'; type:'circle'; strategy:'overlay'; color:'accent'">
           <div layout="row">
-            <md-input-container flex>
+            <md-form-field flex>
               <input mdInput [(ngModel)]="overlayDemo.name" placeholder="Name"/>
-            </md-input-container>
+            </md-form-field>
           </div>
           <div layout="row">
-            <md-input-container flex>
+            <md-form-field flex>
               <textarea mdInput [(ngModel)]="overlayDemo.description" placeholder="Description" rows="4"></textarea>
-            </md-input-container>
+            </md-form-field>
           </div>
         </div>
         <div layout="row">
@@ -31,14 +31,14 @@ <h4 class="md-subhead">with indetederminate [tdLoadingMode], circular [tdLoading
           <![CDATA[
             <div *tdLoading="'overlayStarSyntax'; mode:'indeterminate'; type:'circle'; strategy:'overlay'; color:'accent'">
               <div layout="row">
-                <md-input-container flex>
+                <md-form-field flex>
                   <input mdInput [(ngModel)]="overlayDemo.name" placeholder="Name"/>
-                </md-input-container>
+                </md-form-field>
               </div>
               <div layout="row">
-                <md-input-container flex>
+                <md-form-field flex>
                   <textarea mdInput [(ngModel)]="overlayDemo.description" placeholder="Description" rows="4"></textarea>
-                </md-input-container>
+                </md-form-field>
               </div>
             </div>
             <div layout="row">
@@ -89,14 +89,14 @@ <h4 class="md-subhead">with determinate [tdLoadingMode], linear [tdLoadingType],
         <ng-template mdTabLabel>Demo</ng-template>
         <ng-template tdLoading="replaceTemplateSyntax" tdLoadingMode="determinate" tdLoadingType="linear" tdLoadingStrategy="replace" tdLoadingColor="warn">
           <div layout="row">
-            <md-input-container flex>
+            <md-form-field flex>
               <input mdInput [(ngModel)]="replaceDemo.name" placeholder="Name"/>
-            </md-input-container>
+            </md-form-field>
           </div>
           <div layout="row">
-            <md-input-container flex>
+            <md-form-field flex>
               <textarea mdInput [(ngModel)]="replaceDemo.description" placeholder="Description" rows="4"></textarea>
-            </md-input-container>
+            </md-form-field>
           </div>
         </ng-template>
         <div layout="row">
@@ -110,14 +110,14 @@ <h4 class="md-subhead">with determinate [tdLoadingMode], linear [tdLoadingType],
           <![CDATA[
             <ng-template tdLoading="replaceTemplateSyntax" tdLoadingMode="determinate" tdLoadingType="linear" tdLoadingStrategy="replace" tdLoadingColor="warn">
               <div layout="row">
-                <md-input-container flex>
+                <md-form-field flex>
                   <input mdInput [(ngModel)]="replaceDemo.name" placeholder="Name"/>
-                </md-input-container>
+                </md-form-field>
               </div>
               <div layout="row">
-                <md-input-container flex>
+                <md-form-field flex>
                   <textarea mdInput [(ngModel)]="replaceDemo.description" placeholder="Description" rows="4"></textarea>
-                </md-input-container>
+                </md-form-field>
               </div>
             </ng-template>
             <div layout="row">
@@ -237,14 +237,14 @@ <h4 class="md-subhead">with overlay [tdLoadingStrategy]</h4>
         <ng-template mdTabLabel>Demo</ng-template>
         <ng-template tdLoading [tdLoadingUntil]="!loading" tdLoadingStrategy="overlay">
           <div layout="row">
-            <md-input-container flex>
+            <md-form-field flex>
               <input mdInput [(ngModel)]="untilOverlayDemo.name" placeholder="Name"/>
-            </md-input-container>
+            </md-form-field>
           </div>
           <div layout="row">
-            <md-input-container flex>
+            <md-form-field flex>
               <textarea mdInput [(ngModel)]="untilOverlayDemo.description" placeholder="Description" rows="4"></textarea>
-            </md-input-container>
+            </md-form-field>
           </div>
         </ng-template>
         <div class="pad-sm">
@@ -258,14 +258,14 @@ <h4 class="md-subhead">with overlay [tdLoadingStrategy]</h4>
           <![CDATA[
             <ng-template tdLoading [tdLoadingUntil]="!loading" tdLoadingStrategy="overlay">
               <div layout="row">
-                <md-input-container flex>
+                <md-form-field flex>
                   <input mdInput [(ngModel)]="untilOverlayDemo.name" placeholder="Name"/>
-                </md-input-container>
+                </md-form-field>
               </div>
               <div layout="row">
-                <md-input-container flex>
+                <md-form-field flex>
                   <textarea mdInput [(ngModel)]="untilOverlayDemo.description" placeholder="Description" rows="4"></textarea>
-                </md-input-container>
+                </md-form-field>
               </div>
             </ng-template>
             <div class="pad-sm">
diff --git a/src/app/components/components/paging/paging.component.html b/src/app/components/components/paging/paging.component.html
index c5c05c699..49602ef33 100644
--- a/src/app/components/components/paging/paging.component.html
+++ b/src/app/components/components/paging/paging.component.html
@@ -194,7 +194,7 @@
       <md-divider></md-divider>
       <td-paging-bar #pagingBarInput pageLinkCount="5" [firstLast]="false" [pageSize]="100" [total]="1345" (change)="changeInput($event)">
         <p hide-xs>Go to:</p>
-        <md-input-container>
+        <md-form-field>
           <input #goToInput
                   mdInput
                   type="number"
@@ -203,7 +203,7 @@
                   [value]="pagingBarInput.page"
                   (blur)="goToInput.value = pagingBarInput.page"
                   (keyup.enter)="pagingBarInput.navigateToPage(goToInput.value); goToInput.value = pagingBarInput.page"/>
-        </md-input-container>
+        </md-form-field>
         <span hide-xs>{{pagingBarInput.range}} of {{pagingBarInput.total}}</span>
       </td-paging-bar>
     </md-tab>
@@ -215,7 +215,7 @@
           <![CDATA[
             <td-paging-bar #pagingBarInput pageLinkCount="5" [firstLast]="false" [pageSize]="100" [total]="1345" (change)="changeInput($event)">
               <p hide-xs>Go to:</p>
-              <md-input-container>
+              <md-form-field>
                 <input #goToInput
                         mdInput
                         type="number"
@@ -224,7 +224,7 @@
                         [value]="pagingBarInput.page"
                         (blur)="goToInput.value = pagingBarInput.page"
                         (keyup.enter)="pagingBarInput.navigateToPage(goToInput.value); goToInput.value = pagingBarInput.page"/>
-              </md-input-container>
+              </md-form-field>
               <span hide-xs>{ {pagingBarInput.range} } of { {pagingBarInput.total} }</span>
             </td-paging-bar>
           ]]>
@@ -278,7 +278,7 @@
             </md-option>
           </md-select>
           <p hide-xs hide-sm hide-md>Go to:</p>
-          <md-input-container *ngIf="media.registerQuery('gt-sm') | async">
+          <md-form-field *ngIf="media.registerQuery('gt-sm') | async">
             <input #goToResponsive
                     mdInput
                     type="number"
@@ -287,7 +287,7 @@
                     [value]="pagingBarResponsive.page"
                     (blur)="goToResponsive.value = pagingBarResponsive.page"
                     (keyup.enter)="pagingBarResponsive.navigateToPage(goToResponsive.value); goToResponsive.value = pagingBarResponsive.page"/>
-          </md-input-container>
+          </md-form-field>
           <span>{{pagingBarResponsive.range}} <span hide-xs hide-sm hide-md>of {{pagingBarResponsive.total}}</span></span>
         </td-paging-bar>
     </md-tab>
@@ -310,7 +310,7 @@
                 </md-option>
               </md-select>
               <p hide-xs hide-sm hide-md>Go to:</p>
-              <md-input-container *ngIf="media.registerQuery('gt-sm') | async">
+              <md-form-field *ngIf="media.registerQuery('gt-sm') | async">
                 <input #goToResponsive
                         mdInput
                         type="number"
@@ -319,7 +319,7 @@
                         [value]="pagingBarResponsive.page"
                         (blur)="goToResponsive.value = pagingBarResponsive.page"
                         (keyup.enter)="pagingBarResponsive.navigateToPage(goToResponsive.value); goToResponsive.value = pagingBarResponsive.page"/>
-              </md-input-container>
+              </md-form-field>
               <span>{ {pagingBarResponsive.range} } <span hide-xs hide-sm hide-md>of { {pagingBarResponsive.total} }</span></span>
             </td-paging-bar>
           ]]>
diff --git a/src/app/components/design-patterns/alerts/alerts.component.html b/src/app/components/design-patterns/alerts/alerts.component.html
index d3e2ce036..86f424f3f 100644
--- a/src/app/components/design-patterns/alerts/alerts.component.html
+++ b/src/app/components/design-patterns/alerts/alerts.component.html
@@ -210,33 +210,33 @@ <h3>Solution</h3>
                 <![CDATA[
                   <form #myForm="ngForm">
                       <div layout-gt-xs="row" layout-margin>
-                        <md-input-container flex>
+                        <md-form-field flex>
                           <input mdInput #firstNameForm="ngModel" placeholder="Firstname" [(ngModel)]="first_name" name="first_name" required tdAutoTrim/>
                           <md-hint>
                             <span [hidden]="firstNameForm.pristine || !firstNameForm.errors?.required" class="tc-red-600">Required</span>
                           </md-hint>
-                        </md-input-container>
-                        <md-input-container flex>
+                        </md-form-field>
+                        <md-form-field flex>
                           <input mdInput #lastNameForm="ngModel" flex placeholder="Lastname" [(ngModel)]="last_name" name="last_name" required tdAutoTrim/>
                           <md-hint>
                             <span [hidden]="lastNameForm.pristine || !lastNameForm.errors?.required" class="tc-red-600">Required</span>
                           </md-hint>
-                        </md-input-container>
+                        </md-form-field>
                       </div>
                       <div layout-gt-xs="row" layout-margin>
-                        <md-input-container flex="40">
+                        <md-form-field flex="40">
                           <input mdInput #addressEl #addressForm="ngModel" placeholder="Address" [(ngModel)]="address" name="address" required maxlength="50" tdAutoTrim/>
                           <md-hint>
                             <span [hidden]="addressForm.pristine || !addressForm.errors?.required" class="tc-red-600">Required</span>
                           </md-hint>
                           <md-hint align="end">{{addressEl.value.length}} / 50</md-hint>
-                        </md-input-container>
-                        <md-input-container flex="35">
+                        </md-form-field>
+                        <md-form-field flex="35">
                           <input mdInput placeholder="City" [(ngModel)]="city" name="city" tdAutoTrim/>
-                        </md-input-container>
+                        </md-form-field>
                       </div>
                       <div layout-gt-xs="row" layout-margin>
-                        <md-input-container flex="20">
+                        <md-form-field flex="20">
                           <input mdInput #stateForm="ngModel" placeholder="State" [(ngModel)]="state" name="state" pattern="[A-Z]{2}" maxlength="2" required tdAutoTrim/>
                           <md-hint>
                             <span [hidden]="stateForm.pristine" class="tc-red-600">
@@ -245,8 +245,8 @@ <h3>Solution</h3>
                             </span>
                           </md-hint>
                           <md-hint align="end">e.g CA</md-hint>
-                        </md-input-container>
-                        <md-input-container flex="25">
+                        </md-form-field>
+                        <md-form-field flex="25">
                           <input mdInput #zipForm="ngModel" placeholder="Zip" [(ngModel)]="zip" name="zip" pattern="\d{5}" maxlength="5" required/>
                           <md-hint>
                             <span [hidden]="zipForm.pristine" class="tc-red-600">
@@ -255,7 +255,7 @@ <h3>Solution</h3>
                             </span>
                           </md-hint>
                           <md-hint align="end">e.g 92101</md-hint>
-                        </md-input-container>
+                        </md-form-field>
                       </div>
                       <md-divider></md-divider>
                       <div class="inset">
@@ -270,34 +270,34 @@ <h3>Solution</h3>
           <!-- example -->
           <form #myForm="ngForm">
             <div layout-gt-xs="row" layout-margin>
-              <md-input-container flex>
+              <md-form-field flex>
                 <input mdInput #firstNameForm="ngModel" placeholder="Firstname" [(ngModel)]="firstName" name="first_name" required tdAutoTrim/>
                 <md-hint>
                   <span [hidden]="firstNameForm.pristine || !firstNameForm.errors?.required" class="tc-red-600">Required</span>
                 </md-hint>
-              </md-input-container>
-              <md-input-container flex>
+              </md-form-field>
+              <md-form-field flex>
                 <input mdInput #lastNameForm="ngModel" flex placeholder="Lastname" [(ngModel)]="lastName" name="last_name" required tdAutoTrim/>
                 <md-hint>
                   <span [hidden]="lastNameForm.pristine || !lastNameForm.errors?.required" class="tc-red-600">Required</span>
                 </md-hint>
-              </md-input-container>
+              </md-form-field>
             </div>
             <div layout-gt-xs="row" layout-margin>
-              <md-input-container flex="40">
+              <md-form-field flex="40">
                 <input mdInput #addressEl #addressForm="ngModel" placeholder="Address" [(ngModel)]="address" name="address" required maxlength="50"
                   tdAutoTrim/>
                 <md-hint>
                   <span [hidden]="addressForm.pristine || !addressForm.errors?.required" class="tc-red-600">Required</span>
                 </md-hint>
                 <md-hint align="end">{{addressEl.value.length}} / 50</md-hint>
-              </md-input-container>
-              <md-input-container flex="35">
+              </md-form-field>
+              <md-form-field flex="35">
                 <input mdInput placeholder="City" [(ngModel)]="city" name="city" tdAutoTrim/>
-              </md-input-container>
+              </md-form-field>
             </div>
             <div layout-gt-xs="row" layout-margin>
-              <md-input-container flex="20">
+              <md-form-field flex="20">
                 <input mdInput #stateForm="ngModel" placeholder="State" [(ngModel)]="state" name="state" pattern="[A-Z]{2}" maxlength="2"
                   required tdAutoTrim/>
                 <md-hint>
@@ -307,8 +307,8 @@ <h3>Solution</h3>
                   </span>
                 </md-hint>
                 <md-hint align="end">e.g CA</md-hint>
-              </md-input-container>
-              <md-input-container flex="25">
+              </md-form-field>
+              <md-form-field flex="25">
                 <input mdInput #zipForm="ngModel" placeholder="Zip" [(ngModel)]="zip" name="zip" pattern="\d{5}" maxlength="5" required/>
                 <md-hint>
                   <span [hidden]="zipForm.pristine" class="tc-red-600">
@@ -317,7 +317,7 @@ <h3>Solution</h3>
                   </span>
                 </md-hint>
                 <md-hint align="end">e.g 92101</md-hint>
-              </md-input-container>
+              </md-form-field>
             </div>
           </form>
         </md-card>
diff --git a/src/app/components/design-patterns/cards/cards.component.html b/src/app/components/design-patterns/cards/cards.component.html
index accaaa22e..d8da3bcaa 100644
--- a/src/app/components/design-patterns/cards/cards.component.html
+++ b/src/app/components/design-patterns/cards/cards.component.html
@@ -141,22 +141,22 @@ <h3>Solution</h3>
                       <md-card-content class="push-bottom-none">
                         <form #loginForm="ngForm">
                           <div layout="row">
-                            <md-input-container flex> 
+                            <md-form-field flex> 
                               <input mdInput #userElement #userControl="ngModel" placeholder="Username" type="text" maxlength="30" name="username" [(ngModel)]="username" required>
                               <md-hint align="start">
                                 <span [hidden]="!userControl.errors?.required || userControl.pristine" class="tc-red-600">Required</span>
                               </md-hint>
                               <md-hint align="end">{ {userElement.value.length} } / 30</md-hint>
-                            </md-input-container>
+                            </md-form-field>
                           </div>
                           <div layout="row" class="push-top-sm">
-                            <md-input-container flex> 
+                            <md-form-field flex> 
                               <input mdInput #passElement #passControl="ngModel" placeholder="Password" type="password" name="password" [(ngModel)]="password" required>
                               <md-hint align="start">
                                 <span [hidden]="!passControl.errors?.required || passControl.pristine" class="tc-red-600">Required</span>
                               </md-hint>
                               <md-hint align="end">Something hard to guess</md-hint>
-                            </md-input-container>
+                            </md-form-field>
                           </div>
                         </form>
                         <div id="invalid-auth-msg" *ngIf="invalidError" class="tc-red-600 text-center" flex>The username or password is incorrect. Please try again.</div>
@@ -182,24 +182,24 @@ <h3>Solution</h3>
             <md-card-content class="push-bottom-none">
               <form #loginForm="ngForm">
                 <div layout="row">
-                  <md-input-container flex>
+                  <md-form-field flex>
                     <input mdInput #userElement #userControl="ngModel" placeholder="Username" type="text" maxlength="30" name="username" [(ngModel)]="username"
                       required>
                     <md-hint align="start">
                       <span [hidden]="!userControl.errors?.required || userControl.pristine" class="tc-red-600">Required</span>
                     </md-hint>
                     <md-hint align="end">{{userElement.value.length}} / 30</md-hint>
-                  </md-input-container>
+                  </md-form-field>
                 </div>
                 <div layout="row" class="push-top-sm">
-                  <md-input-container flex>
+                  <md-form-field flex>
                     <input mdInput #passElement #passControl="ngModel" placeholder="Password" type="password" name="password" [(ngModel)]="password"
                       required>
                     <md-hint align="start">
                       <span [hidden]="!passControl.errors?.required || passControl.pristine" class="tc-red-600">Required</span>
                     </md-hint>
                     <md-hint align="end">Something hard to guess</md-hint>
-                  </md-input-container>
+                  </md-form-field>
                 </div>
               </form>
               <div id="invalid-auth-msg" *ngIf="invalidError" class="tc-red-600 text-center" flex>The username or password is incorrect. Please try again.</div>
@@ -352,10 +352,10 @@ <h4 mdLine>Wed, July 4, 2016 09:11 AM</h4>
                   <![CDATA[
                     <md-card>
                       <md-card-title layout>
-                        <md-input-container class="text-sm" flex>
+                        <md-form-field class="text-sm" flex>
                           <input mdInput placeholder="Search Items"/>
                           <span mdPrefix><md-icon>search</md-icon></span>
-                        </md-input-container>
+                        </md-form-field>
                       </md-card-title>
                       <md-list class="pull-top">
                         <md-list-item>
@@ -385,10 +385,10 @@ <h3 mdLine> Item { {i} } </h3>
           </div>
           <md-card class="push-md">
               <md-card-title layout>
-                <md-input-container class="text-sm" flex>
+                <md-form-field class="text-sm" flex>
                   <input mdInput placeholder="Search Items"/>
                   <span mdPrefix><md-icon>search</md-icon></span>
-                </md-input-container>
+                </md-form-field>
               </md-card-title>
               <md-list class="pull-top">
                 <md-list-item>
diff --git a/src/platform/core/chips/_chips-theme.scss b/src/platform/core/chips/_chips-theme.scss
index 1acb47b62..f6a10abbe 100644
--- a/src/platform/core/chips/_chips-theme.scss
+++ b/src/platform/core/chips/_chips-theme.scss
@@ -44,17 +44,17 @@
       }
     }
     &.mat-primary {
-      .mat-input-underline .mat-input-ripple {
+      .mat-form-field-underline .mat-form-field-ripple {
         background-color: mat-color($primary);
       }
     }
     &.mat-accent {
-      .mat-input-underline .mat-input-ripple {
+      .mat-form-field-underline .mat-form-field-ripple {
         background-color: mat-color($accent);
       }
     }
     &.mat-warn {
-      .mat-input-underline .mat-input-ripple {
+      .mat-form-field-underline .mat-form-field-ripple {
         background-color: mat-color($warn);
       }
     }
diff --git a/src/platform/core/chips/chips.component.html b/src/platform/core/chips/chips.component.html
index b87a321d5..376d35923 100644
--- a/src/platform/core/chips/chips.component.html
+++ b/src/platform/core/chips/chips.component.html
@@ -21,7 +21,7 @@
       </div>
     </md-basic-chip>
   </ng-template>
-  <md-input-container floatPlaceholder="never"
+  <md-form-field floatPlaceholder="never"
                       [style.width.px]="canAddChip ? null : 0"
                       [style.height.px]="canAddChip ? null : 0"
                       [color]="color">
@@ -34,7 +34,7 @@
             (keydown)="_inputKeydown($event)"
             (keyup.enter)="_handleAddChip()"
             (focus)="_handleFocus()">
-  </md-input-container>
+  </md-form-field>
   <md-autocomplete #autocomplete="mdAutocomplete" [displayWith]="_removeInputDisplay">
     <ng-template let-item let-first="first" ngFor [ngForOf]="items">
       <md-option (click)="_internalClick = addChip(item)" [value]="item">
@@ -48,9 +48,9 @@
     </ng-template>
   </md-autocomplete>
 </div>
-<div *ngIf="chipAddition" class="mat-input-underline"
+<div *ngIf="chipAddition" class="mat-form-field-underline"
       [class.mat-disabled]="disabled">
-  <span class="mat-input-ripple"
+  <span class="mat-form-field-ripple"
         [class.mat-focused]="focused"></span>
 </div>
 <ng-content></ng-content>
\ No newline at end of file
diff --git a/src/platform/core/chips/chips.component.scss b/src/platform/core/chips/chips.component.scss
index 647fa49a3..12b16dda6 100644
--- a/src/platform/core/chips/chips.component.scss
+++ b/src/platform/core/chips/chips.component.scss
@@ -15,7 +15,7 @@
     }
   }
   /deep/ {
-    .mat-input-wrapper {
+    .mat-form-field-wrapper {
       padding-bottom: 2px;
     }
     /* TODO see if we can make styles more abstract to future proof for contact chips */
@@ -57,7 +57,7 @@
       }
     }
   }
-  .mat-input-underline {
+  .mat-form-field-underline {
     position: relative;
     height: 1px;
     width: 100%;
@@ -69,7 +69,7 @@
       background-color: transparent;
     }
 
-    .mat-input-ripple {
+    .mat-form-field-ripple {
       position: absolute;
       height: 2px;
       top: 0;
@@ -89,8 +89,8 @@
 }
 
 :host {
-   /deep/ md-input-container {
-    .mat-input-underline {
+   /deep/ md-form-field {
+    .mat-form-field-underline {
       display: none;
     }
   }
diff --git a/src/platform/core/common/styles/_input.scss b/src/platform/core/common/styles/_input.scss
index 23663a3f4..1629b2817 100644
--- a/src/platform/core/common/styles/_input.scss
+++ b/src/platform/core/common/styles/_input.scss
@@ -1,4 +1,4 @@
 // Proper placeholder font size
-.mat-input-placeholder-wrapper {
+.mat-form-field-placeholder-wrapper {
   font-size: 16px;
 }
\ No newline at end of file
diff --git a/src/platform/core/data-table/_data-table-theme.scss b/src/platform/core/data-table/_data-table-theme.scss
index 22789e295..b5dae6857 100644
--- a/src/platform/core/data-table/_data-table-theme.scss
+++ b/src/platform/core/data-table/_data-table-theme.scss
@@ -23,8 +23,8 @@
       font-weight: 400;
       letter-spacing: 0.010em;
       line-height: 20px;
-      md-input-container {
-        .mat-input-underline {
+      md-form-field {
+        .mat-form-field-underline {
           display: none;
         }
       }
diff --git a/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.html b/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.html
index 527590577..4cf278253 100644
--- a/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.html
+++ b/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.html
@@ -6,7 +6,7 @@
     {{message}}
     <form #form="ngForm" novalidate>
       <div layout="row">
-        <md-input-container flex>
+        <md-form-field flex>
           <input mdInput
                 #input
                 (focus)="handleInputFocus()"
@@ -14,7 +14,7 @@
                 [(ngModel)]="value"
                 name="value"
                 required/>
-        </md-input-container>
+        </md-form-field>
       </div>
     </form>
   </td-dialog-content>
diff --git a/src/platform/core/paging/paging-bar.component.spec.ts b/src/platform/core/paging/paging-bar.component.spec.ts
index 0b8d3397e..a4166570d 100644
--- a/src/platform/core/paging/paging-bar.component.spec.ts
+++ b/src/platform/core/paging/paging-bar.component.spec.ts
@@ -242,7 +242,7 @@ class TestPageLinkCountComponent {
   template: `
     <td-paging-bar #pagingBar [pageSize]="100" [total]="650">
       <p>Go to:</p>
-      <md-input-container>
+      <md-form-field>
         <input #goToInput
                 mdInput
                 type="number"
@@ -251,7 +251,7 @@ class TestPageLinkCountComponent {
                 [value]="pagingBar.page"
                 (blur)="goToInput.value = pagingBar.page"
                 (keyup.enter)="pagingBar.navigateToPage(goToInput.value); goToInput.value = pagingBar.page"/>
-      </md-input-container>
+      </md-form-field>
       
     </td-paging-bar>`,
 })
diff --git a/src/platform/core/search/search-input/search-input.component.html b/src/platform/core/search/search-input/search-input.component.html
index 5d97c7279..c68518cc8 100644
--- a/src/platform/core/search/search-input/search-input.component.html
+++ b/src/platform/core/search/search-input/search-input.component.html
@@ -1,5 +1,5 @@
 <div class="td-search-input" layout="row" layout-align="end center">
-  <md-input-container [class.mat-hide-underline]="!showUnderline" floatPlaceholder="never" flex>
+  <md-form-field [class.mat-hide-underline]="!showUnderline" floatPlaceholder="never" flex>
     <input mdInput
             #searchElement
             type="search"
@@ -8,7 +8,7 @@
             (blur)="handleBlur()"
             (search)="stopPropagation($event)"
             (keyup.enter)="handleSearch($event)"/>
-  </md-input-container>
+  </md-form-field>
   <button md-icon-button
           type="button"
           [@searchState]="(searchElement.value ?  'show' : (isRTL ? 'hide-left' : 'hide-right'))"
diff --git a/src/platform/core/search/search-input/search-input.component.scss b/src/platform/core/search/search-input/search-input.component.scss
index 0591241a6..480a1c4c1 100644
--- a/src/platform/core/search/search-input/search-input.component.scss
+++ b/src/platform/core/search/search-input/search-input.component.scss
@@ -1,7 +1,7 @@
 .td-search-input {
   overflow-x: hidden;
-  /deep/ md-input-container.mat-hide-underline {
-    .mat-input-underline {
+  /deep/ md-form-field.mat-hide-underline {
+    .mat-form-field-underline {
       display: none;
     }
   }
diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html
index 8142c7d0f..5d620860e 100644
--- a/src/platform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html
+++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html
@@ -1,5 +1,5 @@
 <div class="dynamic-file-input-wrapper" layout="row">
-  <md-input-container tdFileDrop
+  <md-form-field tdFileDrop
                       floatPlaceholder="never"
                       (fileDrop)="value = $event"
                       (click)="fileInput.inputElement.click()"
@@ -11,7 +11,7 @@
           [value]="value?.name"
           [placeholder]="label"
           readonly/>
-  </md-input-container>
+  </md-form-field>
   <button md-icon-button *ngIf="value" (click)="fileInput.clear()" (keyup.enter)="fileInput.clear()">
     <md-icon>cancel</md-icon>
   </button>
diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-input/dynamic-input.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-input/dynamic-input.component.html
index 9c8679217..09d8d3919 100644
--- a/src/platform/dynamic-forms/dynamic-elements/dynamic-input/dynamic-input.component.html
+++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-input/dynamic-input.component.html
@@ -1,5 +1,5 @@
 <div class="dynamic-input-wrapper" layout="column">
-  <md-input-container>
+  <md-form-field>
     <input #elementInput
             mdInput
             [(ngModel)]="value"
@@ -10,5 +10,5 @@
             [attr.min]="min"
             [attr.max]="max"
             flex/>
-  </md-input-container>
+  </md-form-field>
 </div>
diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.html
index 014be8ed0..6316b75db 100644
--- a/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.html
+++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.html
@@ -1,5 +1,5 @@
 <div class="dynamic-slider-wrapper relative push-top" flex layout="column">
-  <label class="mat-input-placeholder mat-float td-slider-label" [class.mat-focused]="slider._isActive"> {{label}} <span *ngIf="required" class="mat-placeholder-required">*</span></label>
+  <label class="mat-form-field-placeholder mat-float td-slider-label" [class.mat-focused]="slider._isActive"> {{label}} <span *ngIf="required" class="mat-placeholder-required">*</span></label>
   <div layout="row" layout-align="start center" flex>
     <md-slider #slider
                [(ngModel)]="value"
diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-textarea/dynamic-textarea.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-textarea/dynamic-textarea.component.html
index 543765418..90ec0fa1b 100644
--- a/src/platform/dynamic-forms/dynamic-elements/dynamic-textarea/dynamic-textarea.component.html
+++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-textarea/dynamic-textarea.component.html
@@ -1,5 +1,5 @@
 <div class="dynamic-textarea-wrapper" layout="column">
-  <md-input-container>
+  <md-form-field>
     <textarea #elementInput
             mdInput
             [(ngModel)]="value"
@@ -8,5 +8,5 @@
             rows="4"
             flex>
     </textarea>
-  </md-input-container>
+  </md-form-field>
 </div>
\ No newline at end of file