diff --git a/src/demo-app/a11y/autocomplete/autocomplete-a11y.html b/src/demo-app/a11y/autocomplete/autocomplete-a11y.html
index e84762443315..95c5df20d85e 100644
--- a/src/demo-app/a11y/autocomplete/autocomplete-a11y.html
+++ b/src/demo-app/a11y/autocomplete/autocomplete-a11y.html
@@ -2,7 +2,8 @@
   <h2>Filtering and selection</h2>
   <p>Select your favorite state</p>
   <mat-form-field>
-    <input matInput placeholder="Search for a state" [matAutocomplete]="autocomplete"
+    <mat-label>Search for a state</mat-label>
+    <input matInput [matAutocomplete]="autocomplete"
       [(ngModel)]="value" (ngModelChange)="filteredStates = filter(value)">
     <mat-autocomplete #autocomplete="matAutocomplete">
       <mat-option *ngFor="let state of filteredStates" [value]="state.name">
diff --git a/src/demo-app/a11y/datepicker/datepicker-a11y.html b/src/demo-app/a11y/datepicker/datepicker-a11y.html
index 9b1301e668ac..48692bf20fbd 100644
--- a/src/demo-app/a11y/datepicker/datepicker-a11y.html
+++ b/src/demo-app/a11y/datepicker/datepicker-a11y.html
@@ -1,13 +1,13 @@
 <section>
   <h2>Choose a date (e.g. choose your date of birth)</h2>
   <mat-form-field>
+    <mat-label>Date of birth</mat-label>
     <input matInput
            [matDatepicker]="birthdayPicker"
            [(ngModel)]="birthday"
            #birthdayModel="ngModel"
            [max]="maxBirthday"
-           required
-           placeholder="Date of birth">
+           required>
     <mat-datepicker-toggle matSuffix [for]="birthdayPicker"></mat-datepicker-toggle>
     <mat-datepicker #birthdayPicker startView="year"></mat-datepicker>
     <mat-error *ngIf="birthdayModel.hasError('required')">
@@ -44,14 +44,14 @@ <h2>Choose a date with touch UI (e.g. choose a payment date on mobile)</h2>
 <section>
   <h2>Choose date with startAt, min and max (e.g. schedule a departing and returning flight)</h2>
   <mat-form-field>
+    <mat-label>Departure date</mat-label>
     <input matInput
            [matDatepicker]="departPicker"
            [(ngModel)]="departDate"
            #departDateModel="ngModel"
            [min]="minTripDate"
            [max]="maxTripDate"
-           required
-           placeholder="Departure date">
+           required>
     <mat-datepicker-toggle matSuffix [for]="departPicker"></mat-datepicker-toggle>
     <mat-datepicker #departPicker [startAt]="startTripDate"></mat-datepicker>
     <mat-error *ngIf="departDateModel.hasError('required')">
@@ -65,13 +65,13 @@ <h2>Choose date with startAt, min and max (e.g. schedule a departing and returni
     </mat-error>
   </mat-form-field>
   <mat-form-field>
+    <mat-label>Return date</mat-label>
     <input matInput
            [matDatepicker]="returnPicker"
            [(ngModel)]="returnDate"
            #returnDateModel="ngModel"
            [min]="departDate || minTripDate"
-           [max]="maxTripDate"
-           placeholder="Return date">
+           [max]="maxTripDate">
     <mat-datepicker-toggle matSuffix [for]="returnPicker"></mat-datepicker-toggle>
     <mat-datepicker #returnPicker [startAt]="startTripDate"></mat-datepicker>
     <mat-error *ngIf="returnDateModel.hasError('matDatepickerMin') && !departDate">
@@ -89,6 +89,7 @@ <h2>Choose date with startAt, min and max (e.g. schedule a departing and returni
 <section>
   <h2>Choose date with date filter (e.g. schedule a doctor's appointment)</h2>
   <mat-form-field>
+    <mat-label>Appointment date</mat-label>
     <input matInput
            [matDatepicker]="appointmentPicker"
            [(ngModel)]="appointmentDate"
@@ -96,8 +97,7 @@ <h2>Choose date with date filter (e.g. schedule a doctor's appointment)</h2>
            [min]="minAppointmentDate"
            [max]="maxAppointmentDate"
            [matDatepickerFilter]="weekdaysOnly"
-           required
-           placeholder="Appointment date">
+           required>
     <mat-datepicker-toggle matSuffix [for]="appointmentPicker"></mat-datepicker-toggle>
     <mat-datepicker #appointmentPicker></mat-datepicker>
     <mat-error *ngIf="appointmentDateModel.hasError('required')">
diff --git a/src/demo-app/a11y/dialog/dialog-address-form-a11y.html b/src/demo-app/a11y/dialog/dialog-address-form-a11y.html
index abbeb3440645..7c0644ef6b0c 100644
--- a/src/demo-app/a11y/dialog/dialog-address-form-a11y.html
+++ b/src/demo-app/a11y/dialog/dialog-address-form-a11y.html
@@ -3,36 +3,44 @@ <h2 mat-dialog-title>Company</h2>
 <mat-dialog-content>
   <form class="example-form">
     <mat-form-field class="example-full-width">
-      <input matInput placeholder="Company (disabled)" disabled value="Google">
+      <mat-label>Company (disabled)</mat-label>
+      <input matInput disabled value="Google">
     </mat-form-field>
 
     <table class="example-full-width" cellspacing="0"><tr>
       <td><mat-form-field class="example-full-width">
-        <input matInput placeholder="First name">
+        <mat-label>First name</mat-label>
+        <input matInput>
       </mat-form-field></td>
       <td><mat-form-field class="example-full-width">
-        <input matInput placeholder="Long Last Name That Will Be Truncated">
+        <mat-label>Long last name that will be truncated</mat-label>
+        <input matInput>
       </mat-form-field></td>
     </tr></table>
 
     <p>
       <mat-form-field class="example-full-width">
-        <textarea matInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
+        <mat-label>Address</mat-label>
+        <textarea matInput>1600 Amphitheatre Pkwy</textarea>
       </mat-form-field>
       <mat-form-field class="example-full-width">
-        <textarea matInput placeholder="Address 2"></textarea>
+        <mat-label>Address 2</mat-label>
+        <textarea matInput></textarea>
       </mat-form-field>
     </p>
 
     <table class="example-full-width" cellspacing="0"><tr>
       <td><mat-form-field class="example-full-width">
-        <input matInput placeholder="City">
+        <mat-label>City</mat-label>
+        <input matInput>
       </mat-form-field></td>
       <td><mat-form-field class="example-full-width">
-        <input matInput placeholder="State">
+        <mat-label>State</mat-label>
+        <input matInput>
       </mat-form-field></td>
       <td><mat-form-field class="example-full-width">
-        <input matInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
+        <mat-label>Postal code</mat-label>
+        <input matInput #postalCode maxlength="5" value="94043">
         <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
       </mat-form-field></td>
     </tr></table>
diff --git a/src/demo-app/a11y/input/input-a11y.html b/src/demo-app/a11y/input/input-a11y.html
index cb9d19dfb345..006b85707ac3 100644
--- a/src/demo-app/a11y/input/input-a11y.html
+++ b/src/demo-app/a11y/input/input-a11y.html
@@ -1,18 +1,20 @@
 <section>
   <h2>Basic input box (e.g. name field)</h2>
   <mat-form-field floatLabel="never">
-    <input matInput placeholder="First name" [(ngModel)]="firstName">
+    <mat-label>First name</mat-label>
+    <input matInput [(ngModel)]="firstName">
   </mat-form-field>
   <mat-form-field floatLabel="never">
-    <input matInput placeholder="Last name" [(ngModel)]="lastName">
+    <mat-label>Last name</mat-label>
+    <input matInput [(ngModel)]="lastName">
   </mat-form-field>
 </section>
 
 <section>
   <h2>Input with hint (e.g. password field)</h2>
   <mat-form-field hideRequiredMarker>
-    <input matInput [type]="passwordType" placeholder="Password" [(ngModel)]="password" required
-           #passwordModel="ngModel">
+    <mat-label>Password</mat-label>
+    <input matInput [type]="passwordType" [(ngModel)]="password" required #passwordModel="ngModel">
     <button mat-icon-button matSuffix [attr.aria-label]="passwordToggleLabel"
             (click)="showPassword = !showPassword">
       <mat-icon>{{passwordToggleIcon}}</mat-icon>
@@ -25,8 +27,8 @@ <h2>Input with hint (e.g. password field)</h2>
 <section>
   <h2>Input with error message (e.g. email field)</h2>
   <mat-form-field>
-    <input matInput type="email" placeholder="Email" [(ngModel)]="email" required email
-           #emailModel="ngModel">
+    <mat-label>Email</mat-label>
+    <input matInput type="email" [(ngModel)]="email" required email #emailModel="ngModel">
     <mat-error *ngIf="emailModel.hasError('required')">You must enter your email.</mat-error>
     <mat-error *ngIf="emailModel.hasError('email')">Not a valid email address.</mat-error>
   </mat-form-field>
@@ -35,12 +37,14 @@ <h2>Input with error message (e.g. email field)</h2>
 <section>
   <h2>Input with prefix & suffix (e.g. currency converter)</h2>
   <mat-form-field floatLabel="always">
-    <input matInput type="number" placeholder="USD" [(ngModel)]="usd">
+    <mat-label>USD</mat-label>
+    <input matInput type="number" [(ngModel)]="usd">
     <span matPrefix>$</span>
   </mat-form-field>
   =
   <mat-form-field floatLabel="always">
-    <input matInput type="number" placeholder="JPY" [(ngModel)]="jpy">
+    <mat-label>JPY</mat-label>
+    <input matInput type="number" [(ngModel)]="jpy">
     <span matPrefix>‎¥‎</span>
   </mat-form-field>
   (as of 7/31/2017)
diff --git a/src/demo-app/a11y/select/select-a11y.html b/src/demo-app/a11y/select/select-a11y.html
index 829809d74987..5d1956ccc9ce 100644
--- a/src/demo-app/a11y/select/select-a11y.html
+++ b/src/demo-app/a11y/select/select-a11y.html
@@ -3,7 +3,8 @@ <h2>Single selection</h2>
   <p>Select your favorite color</p>
 
   <mat-form-field>
-    <mat-select placeholder="Colors" [(ngModel)]="selectedColor">
+    <mat-label>Colors</mat-label>
+    <mat-select [(ngModel)]="selectedColor">
       <mat-option *ngFor="let color of colors" [value]="color.value">
         {{ color.label }}
       </mat-option>
@@ -16,7 +17,8 @@ <h2>Multiple selection</h2>
   <p>Pick toppings for your pizza</p>
 
   <mat-form-field>
-    <mat-select placeholder="Toppings" [(ngModel)]="selectedTopping" multiple>
+    <mat-label>Toppings</mat-label>
+    <mat-select [(ngModel)]="selectedTopping" multiple>
       <mat-option *ngFor="let topping of toppings" [value]="topping.value">
         {{ topping.label }}
       </mat-option>
@@ -29,7 +31,8 @@ <h2>Grouped options</h2>
   <p>Pick your Pokemon</p>
 
   <mat-form-field>
-    <mat-select placeholder="Pokemon" [(ngModel)]="selectedPokemon">
+    <mat-label>Pokemon</mat-label>
+    <mat-select [(ngModel)]="selectedPokemon">
       <mat-optgroup *ngFor="let group of pokemon" [label]="group.label">
         <mat-option *ngFor="let creature of group.pokemon" [value]="creature.value">
           {{ creature.label }}
@@ -44,21 +47,24 @@ <h2>Colors</h2>
 
   <div class="select-a11y-spacer">
     <mat-form-field  color="primary">
-      <mat-select placeholder="ZIP code">
+      <mat-label>ZIP code</mat-label>
+      <mat-select>
         <mat-option value="2000">2000</mat-option>
         <mat-option value="2100">2100</mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field color="accent">
-      <mat-select placeholder="State">
+      <mat-label>State</mat-label>
+      <mat-select>
         <mat-option value="alaska">Alaska</mat-option>
         <mat-option value="alabama">Alabama</mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field color="warn">
-      <mat-select placeholder="Language">
+      <mat-label>Language</mat-label>
+      <mat-select>
         <mat-option value="english">English</mat-option>
         <mat-option value="spanish">Spanish</mat-option>
       </mat-select>
@@ -67,21 +73,24 @@ <h2>Colors</h2>
 
   <div class="select-a11y-spacer">
     <mat-form-field color="primary">
-      <mat-select placeholder="Digimon" multiple>
+      <mat-label>Digimon</mat-label>
+      <mat-select multiple>
         <mat-option value="mihiramon">Mihiramon</mat-option>
         <mat-option value="sandiramon">Sandiramon</mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field color="accent">
-      <mat-select placeholder="Drink" multiple>
+      <mat-label>Drink</mat-label>
+      <mat-select multiple>
         <mat-option value="water">Water</mat-option>
         <mat-option value="coke">Coke</mat-option>
       </mat-select>
     </mat-form-field>
 
     <mat-form-field color="warn">
-      <mat-select placeholder="Theme" multiple>
+      <mat-label>Theme</mat-label>
+      <mat-select multiple>
         <mat-option value="light">Light</mat-option>
         <mat-option value="dark">Dark</mat-option>
       </mat-select>
diff --git a/src/demo-app/autocomplete/autocomplete-demo.html b/src/demo-app/autocomplete/autocomplete-demo.html
index 04321b056aa5..13acb4b898af 100644
--- a/src/demo-app/autocomplete/autocomplete-demo.html
+++ b/src/demo-app/autocomplete/autocomplete-demo.html
@@ -7,7 +7,8 @@
     <div>Reactive dirty: {{ stateCtrl.dirty }}</div>
 
     <mat-form-field floatLabel="never">
-      <input matInput placeholder="State" [matAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
+      <mat-label>State</mat-label>
+      <input matInput [matAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
       <mat-autocomplete #reactiveAuto="matAutocomplete" [displayWith]="displayFn">
         <mat-option *ngFor="let state of reactiveStates | async" [value]="state">
           <span>{{ state.name }}</span>
@@ -33,7 +34,8 @@
 
     <!-- Added an ngIf below to test that autocomplete works with ngIf -->
     <mat-form-field *ngIf="true">
-      <input matInput placeholder="State" [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
+      <mat-label>State</mat-label>
+      <input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
         (ngModelChange)="tdStates = filterStates(currentState)" [disabled]="tdDisabled">
       <mat-autocomplete #tdAuto="matAutocomplete">
         <mat-option *ngFor="let state of tdStates" [value]="state.name">
@@ -56,9 +58,9 @@
     <div>Option groups (currentGroupedState): {{ currentGroupedState }}</div>
 
     <mat-form-field>
+      <mat-label>State</mat-label>
       <input
         matInput
-        placeholder="State"
         [matAutocomplete]="groupedAuto"
         [(ngModel)]="currentGroupedState"
         (ngModelChange)="filteredGroupedStates = filterStateGroups(currentGroupedState)">
diff --git a/src/demo-app/baseline/baseline-demo.html b/src/demo-app/baseline/baseline-demo.html
index 8a695ce1c7f4..e25d9f566ee0 100644
--- a/src/demo-app/baseline/baseline-demo.html
+++ b/src/demo-app/baseline/baseline-demo.html
@@ -11,18 +11,21 @@
     <mat-radio-button value="option_3">Radio 3</mat-radio-button>
     | Text 4 |
     <mat-form-field>
-      <input matInput placeholder="Input" value="Text Input">
+      <mat-label>Input</mat-label>
+      <input matInput value="Text Input">
     </mat-form-field>
     | Text 5 |
     <mat-form-field>
-      <mat-select placeholder="This placeholder is really really really long">
+      <mat-label>This label is really really really long</mat-label>
+      <mat-select>
         <mat-option value="option">Option</mat-option>
         <mat-option value="long">This option is really really really long</mat-option>
       </mat-select>
     </mat-form-field>
     | Text 6 |
     <mat-form-field>
-      <textarea matInput placeholder="Input" matTextareaAutosize>Textarea&#10;Line 2</textarea>
+      <mat-label>Input</mat-label>
+      <textarea matInput matTextareaAutosize>Textarea&#10;Line 2</textarea>
     </mat-form-field>
     | Text After
   </mat-card-content>
@@ -42,18 +45,21 @@ <h1>
       <mat-radio-button value="option_3">Radio 3</mat-radio-button>
       | Text 4 |
       <mat-form-field>
-        <input matInput placeholder="Input" value="Text Input">
+        <mat-label>Input</mat-label>
+        <input matInput value="Text Input">
       </mat-form-field>
       | Text 5 |
       <mat-form-field>
-        <mat-select placeholder="This placeholder is really really really long">
+        <mat-label>This label is really really really long</mat-label>
+        <mat-select>
           <mat-option value="option">Option</mat-option>
           <mat-option value="long">This option is really really really long</mat-option>
         </mat-select>
       </mat-form-field>
       | Text 6 |
       <mat-form-field>
-        <textarea matInput placeholder="Input" matTextareaAutosize>Textarea&#10;Line 2</textarea>
+        <mat-label>Input</mat-label>
+        <textarea matInput matTextareaAutosize>Textarea&#10;Line 2</textarea>
       </mat-form-field>
       | Text After
     </h1>
diff --git a/src/demo-app/datepicker/datepicker-demo.html b/src/demo-app/datepicker/datepicker-demo.html
index b9c6c7dba22c..75bf8e12ca35 100644
--- a/src/demo-app/datepicker/datepicker-demo.html
+++ b/src/demo-app/datepicker/datepicker-demo.html
@@ -8,13 +8,15 @@ <h2>Options</h2>
 </p>
 <p>
   <mat-form-field>
-    <input matInput [matDatepicker]="minDatePicker" [(ngModel)]="minDate" placeholder="Min date"
+    <mat-label>Min date</mat-label>
+    <input matInput [matDatepicker]="minDatePicker" [(ngModel)]="minDate"
         [disabled]="inputDisabled">
     <mat-datepicker-toggle matSuffix [for]="minDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #minDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
   </mat-form-field>
   <mat-form-field>
-    <input matInput [matDatepicker]="maxDatePicker" [(ngModel)]="maxDate" placeholder="Max date"
+    <mat-label>Max date</mat-label>
+    <input matInput [matDatepicker]="maxDatePicker" [(ngModel)]="maxDate"
         [disabled]="inputDisabled">
     <mat-datepicker-toggle matSuffix [for]="maxDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #maxDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
@@ -22,7 +24,8 @@ <h2>Options</h2>
 </p>
 <p>
   <mat-form-field>
-    <input matInput [matDatepicker]="startAtPicker" [(ngModel)]="startAt" placeholder="Start at date"
+    <mat-label>Start at date</mat-label>
+    <input matInput [matDatepicker]="startAtPicker" [(ngModel)]="startAt"
         [disabled]="inputDisabled">
     <mat-datepicker-toggle matSuffix [for]="startAtPicker"></mat-datepicker-toggle>
     <mat-datepicker #startAtPicker [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
@@ -34,6 +37,7 @@ <h2>Result</h2>
 <p>
   <mat-datepicker-toggle [for]="resultPicker"></mat-datepicker-toggle>
   <mat-form-field>
+    <mat-label>Pick a date</mat-label>
     <input matInput
            #resultPickerModel="ngModel"
            [matDatepicker]="resultPicker"
@@ -42,7 +46,6 @@ <h2>Result</h2>
            [max]="maxDate"
            [matDatepickerFilter]="filterOdd ? dateFilter : null"
            [disabled]="inputDisabled"
-           placeholder="Pick a date"
            (dateInput)="onDateInput($event)"
            (dateChange)="onDateChange($event)">
     <mat-datepicker
@@ -86,9 +89,9 @@ <h2>Input disabled datepicker</h2>
 <p>
   <mat-datepicker-toggle [for]="datePicker1"></mat-datepicker-toggle>
   <mat-form-field>
+    <mat-label>Input disabled</mat-label>
     <input matInput [matDatepicker]="datePicker1" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
-           [matDatepickerFilter]="filterOdd ? dateFilter : null" disabled
-           placeholder="Input disabled">
+           [matDatepickerFilter]="filterOdd ? dateFilter : null" disabled>
     <mat-datepicker #datePicker1 [touchUi]="touch" [startAt]="startAt"
                    [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
@@ -98,9 +101,9 @@ <h2>Input disabled via FormControl</h2>
 <p>
   <mat-datepicker-toggle [for]="datePicker2"></mat-datepicker-toggle>
   <mat-form-field>
+    <mat-label>FormControl disabled</mat-label>
     <input matInput [matDatepicker]="datePicker2" [formControl]="dateCtrl" [min]="minDate"
-           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null"
-           placeholder="FormControl disabled">
+           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
     <mat-datepicker #datePicker2 [touchUi]="touch" [startAt]="startAt"
                     [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
@@ -114,9 +117,9 @@ <h2>Input disabled, datepicker popup enabled</h2>
 <p>
   <mat-datepicker-toggle [for]="datePicker3"></mat-datepicker-toggle>
   <mat-form-field>
+    <mat-label>Input disabled, datepicker enabled</mat-label>
     <input matInput disabled [matDatepicker]="datePicker3" [(ngModel)]="date" [min]="minDate"
-           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null"
-           placeholder="Input disabled, datepicker enabled">
+           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
     <mat-datepicker #datePicker3 [touchUi]="touch" [disabled]="false" [startAt]="startAt"
                    [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
@@ -126,9 +129,9 @@ <h2>Datepicker with value property binding</h2>
 <p>
   <mat-datepicker-toggle [for]="datePicker4"></mat-datepicker-toggle>
   <mat-form-field>
+    <mat-label>Value binding</mat-label>
     <input matInput [matDatepicker]="datePicker4" [value]="date" [min]="minDate"
-           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null"
-           placeholder="Value binding">
+           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
     <mat-datepicker #datePicker4 [touchUi]="touch" [startAt]="startAt"
                     [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
diff --git a/src/demo-app/dialog/dialog-demo.html b/src/demo-app/dialog/dialog-demo.html
index dcb68eb03872..a4e2fba1eecb 100644
--- a/src/demo-app/dialog/dialog-demo.html
+++ b/src/demo-app/dialog/dialog-demo.html
@@ -16,28 +16,34 @@ <h2>Dialog dimensions</h2>
 
     <p>
       <mat-form-field>
-        <input matInput [(ngModel)]="config.width" placeholder="Width">
+        <mat-label>Width</mat-label>
+        <input matInput [(ngModel)]="config.width">
       </mat-form-field>
       <mat-form-field>
-        <input matInput [(ngModel)]="config.height" placeholder="Height">
+        <mat-label>Height</mat-label>
+        <input matInput [(ngModel)]="config.height">
       </mat-form-field>
     </p>
 
     <p>
       <mat-form-field>
-        <input matInput [(ngModel)]="config.minWidth" placeholder="Min Width">
+        <mat-label>Min width</mat-label>
+        <input matInput [(ngModel)]="config.minWidth">
       </mat-form-field>
       <mat-form-field>
-        <input matInput [(ngModel)]="config.minHeight" placeholder="Min Height">
+        <mat-label>Min height</mat-label>
+        <input matInput [(ngModel)]="config.minHeight">
       </mat-form-field>
     </p>
 
     <p>
       <mat-form-field>
-        <input matInput [(ngModel)]="config.maxWidth" placeholder="Max Width">
+        <mat-label>Max width</mat-label>
+        <input matInput [(ngModel)]="config.maxWidth">
       </mat-form-field>
       <mat-form-field>
-        <input matInput [(ngModel)]="config.maxHeight" placeholder="Max Height">
+        <mat-label>Max height</mat-label>
+        <input matInput [(ngModel)]="config.maxHeight">
       </mat-form-field>
     </p>
 
@@ -45,19 +51,23 @@ <h2>Dialog position</h2>
 
     <p>
       <mat-form-field>
-        <input matInput [(ngModel)]="config.position.top" (change)="config.position.bottom = ''" placeholder="Top">
+        <mat-label>Top</mat-label>
+        <input matInput [(ngModel)]="config.position.top" (change)="config.position.bottom = ''">
       </mat-form-field>
       <mat-form-field>
-        <input matInput [(ngModel)]="config.position.bottom" (change)="config.position.top = ''" placeholder="Bottom">
+        <mat-label>Bottom</mat-label>
+        <input matInput [(ngModel)]="config.position.bottom" (change)="config.position.top = ''">
       </mat-form-field>
     </p>
 
     <p>
       <mat-form-field>
-        <input matInput [(ngModel)]="config.position.left" (change)="config.position.right = ''" placeholder="Left">
+        <mat-label>Left</mat-label>
+        <input matInput [(ngModel)]="config.position.left" (change)="config.position.right = ''">
       </mat-form-field>
       <mat-form-field>
-        <input matInput [(ngModel)]="config.position.right" (change)="config.position.left = ''" placeholder="Right">
+        <mat-label>Right</mat-label>
+        <input matInput [(ngModel)]="config.position.right" (change)="config.position.left = ''">
       </mat-form-field>
     </p>
 
@@ -65,7 +75,8 @@ <h2>Dialog backdrop</h2>
 
     <p>
       <mat-form-field>
-        <input matInput [(ngModel)]="config.backdropClass" placeholder="Backdrop class">
+        <mat-label>Backdrop class</mat-label>
+        <input matInput [(ngModel)]="config.backdropClass">
       </mat-form-field>
     </p>
 
@@ -75,7 +86,8 @@ <h2>Other options</h2>
 
     <p>
       <mat-form-field>
-        <mat-select placeholder="Button alignment" [(ngModel)]="actionsAlignment">
+        <mat-label>Button alignment</mat-label>
+        <mat-select [(ngModel)]="actionsAlignment">
           <mat-option>Start</mat-option>
           <mat-option value="end">End</mat-option>
           <mat-option value="center">Center</mat-option>
@@ -85,7 +97,8 @@ <h2>Other options</h2>
 
     <p>
       <mat-form-field>
-        <input matInput [(ngModel)]="config.data.message" placeholder="Dialog message">
+        <mat-label>Dialog message</mat-label>
+        <input matInput [(ngModel)]="config.data.message">
       </mat-form-field>
     </p>
 
@@ -104,7 +117,8 @@ <h2>Other options</h2>
   <p>It's Jazz!</p>
 
   <mat-form-field>
-    <input matInput placeholder="How much?" #howMuch>
+    <mat-label>How much?</mat-label>
+    <input matInput #howMuch>
   </mat-form-field>
 
   <p> {{ data.message }} </p>
diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index 8e4ba9e3bd7a..b519069b7dc3 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/src/demo-app/dialog/dialog-demo.ts
@@ -92,7 +92,8 @@ export class DialogDemo {
   <p>It's Jazz!</p>
 
   <mat-form-field>
-    <input matInput placeholder="How much?" #howMuch>
+    <mat-label>How much?</mat-label>
+    <input matInput #howMuch>
   </mat-form-field>
 
   <p> {{ data.message }} </p>
diff --git a/src/demo-app/expansion/expansion-demo.html b/src/demo-app/expansion/expansion-demo.html
index 9e4ecb03f322..d3b0a94b375f 100644
--- a/src/demo-app/expansion/expansion-demo.html
+++ b/src/demo-app/expansion/expansion-demo.html
@@ -19,11 +19,13 @@ <h1>Single Expansion Panel</h1>
 
 <br>
 <mat-form-field>
-  <input matInput [(ngModel)]="collapsedHeight" placeholder="Collapsed height">
+  <mat-label>Collapsed height</mat-label>
+  <input matInput [(ngModel)]="collapsedHeight">
 </mat-form-field>
 
 <mat-form-field>
-  <input matInput [(ngModel)]="expandedHeight" placeholder="Expanded height">
+  <mat-label>Expanded height</mat-label>
+  <input matInput [(ngModel)]="expandedHeight">
 </mat-form-field>
 <br>
 
diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index d61f52c99508..c9932a43e58a 100644
--- a/src/demo-app/input/input-demo.html
+++ b/src/demo-app/input/input-demo.html
@@ -3,44 +3,51 @@
   <mat-card-content>
     <form>
       <mat-form-field class="demo-full-width">
-        <input matInput placeholder="Company (disabled)" disabled value="Google">
+        <mat-label>Company (disabled)</mat-label>
+        <input matInput disabled value="Google">
       </mat-form-field>
 
       <table style="width: 100%" cellspacing="0"><tr>
         <td>
           <mat-form-field style="width: 100%" floatLabel="never">
-            <input matInput placeholder="First name">
+            <mat-label>First name</mat-label>
+            <input matInput>
           </mat-form-field>
         </td>
         <td>
           <mat-form-field style="width: 100%">
-            <input matInput placeholder="Long Last Name That Will Be Truncated">
+            <mat-label>Long last name that will be truncated</mat-label>
+            <input matInput>
           </mat-form-field>
         </td>
       </tr></table>
       <p>
         <mat-form-field class="demo-full-width">
-          <textarea matInput placeholder="Address">1600 Amphitheatre Pkway</textarea>
+          <mat-label>Address</mat-label>
+          <textarea matInput>1600 Amphitheatre Pkway</textarea>
         </mat-form-field>
         <mat-form-field class="demo-full-width">
-          <textarea matInput placeholder="Address 2"></textarea>
+          <mat-label>Address 2</mat-label>
+          <textarea matInput></textarea>
         </mat-form-field>
       </p>
       <table style="width: 100%" cellspacing="0"><tr>
         <td>
           <mat-form-field class="demo-full-width">
-            <input matInput placeholder="City" value="Mountain View">
+            <mat-label>City</mat-label>
+            <input matInput value="Mountain View">
           </mat-form-field>
         </td>
         <td>
           <mat-form-field class="demo-full-width">
-            <input matInput placeholder="State" maxLength="2" value="CA">
+            <mat-label>State</mat-label>
+            <input matInput maxLength="2" value="CA">
           </mat-form-field>
         </td>
         <td>
           <mat-form-field class="demo-full-width">
-            <input matInput #postalCode maxLength="5" placeholder="Postal Code" value="94043"
-                   pattern="[0-9]{5}">
+            <mat-label>Postal code</mat-label>
+            <input matInput #postalCode maxLength="5" value="94043" pattern="[0-9]{5}">
             <mat-hint align="end">
               <mat-icon>mode_edit</mat-icon>
               <span aria-live="polite">{{postalCode.value.length}} / 5</span>
@@ -59,12 +66,14 @@ <h4>Regular</h4>
 
     <p>
       <mat-form-field>
-        <input matInput placeholder="example" [(ngModel)]="errorMessageExample1" required>
+        <mat-label>Example</mat-label>
+        <input matInput [(ngModel)]="errorMessageExample1" required>
         <mat-error>This field is required</mat-error>
       </mat-form-field>
 
       <mat-form-field>
-        <input matInput placeholder="email" [formControl]="emailFormControl">
+        <mat-label>Email</mat-label>
+        <input matInput [formControl]="emailFormControl">
         <mat-error *ngIf="emailFormControl.hasError('required')">
           This field is required
         </mat-error>
@@ -77,7 +86,8 @@ <h4>Regular</h4>
     <h4>With hint</h4>
 
     <mat-form-field>
-      <input matInput placeholder="example" [(ngModel)]="errorMessageExample2" required>
+      <mat-label>Example</mat-label>
+      <input matInput [(ngModel)]="errorMessageExample2" required>
       <mat-error>This field is required</mat-error>
       <mat-hint>Please type something here</mat-hint>
     </mat-form-field>
@@ -87,8 +97,8 @@ <h4>With hint</h4>
       <h4>Inside a form</h4>
 
       <mat-form-field>
-        <input matInput name="example" placeholder="example"
-          [(ngModel)]="errorMessageExample3" required>
+        <mat-label>Example</mat-label>
+        <input matInput name="example" [(ngModel)]="errorMessageExample3" required>
         <mat-error>This field is required</mat-error>
       </mat-form-field>
 
@@ -97,8 +107,8 @@ <h4>Inside a form</h4>
 
     <h4>With a custom error function</h4>
     <mat-form-field>
+      <mat-label>Example</mat-label>
       <input matInput
-        placeholder="example"
         [(ngModel)]="errorMessageExample4"
         [errorStateMatcher]="customErrorStateMatcher"
         required>
@@ -113,21 +123,24 @@ <h4>With a custom error function</h4>
   <mat-card-content>
     <h4>Text</h4>
     <mat-form-field class="demo-text-align-end">
-      <input matInput placeholder="amount">
+      <mat-label>Amount</mat-label>
+      <input matInput>
       <span matPrefix>$&nbsp;</span>
       <span matSuffix>.00</span>
     </mat-form-field>
 
     <h4>Icons</h4>
     <mat-form-field>
-      <input matInput placeholder="amount">
+      <mat-label>Amount</mat-label>
+      <input matInput>
       <mat-icon matPrefix>attach_money</mat-icon>
       <mat-icon matSuffix>mode_edit</mat-icon>
     </mat-form-field>
 
     <h4>Icon buttons</h4>
     <mat-form-field>
-      <input matInput placeholder="amount">
+      <mat-label>Amount</mat-label>
+      <input matInput>
       <button mat-icon-button matPrefix><mat-icon>attach_money</mat-icon></button>
       <button mat-icon-button matSuffix><mat-icon>mode_edit</mat-icon></button>
     </mat-form-field>
@@ -139,37 +152,46 @@ <h4>Icon buttons</h4>
   <mat-card-content>
     <h4>Input</h4>
     <mat-form-field color="primary" >
-      <input matInput placeholder="Default Color" value="example">
+      <mat-label>Default color</mat-label>
+      <input matInput value="example">
     </mat-form-field>
     <mat-form-field color="accent">
-      <input matInput placeholder="Accent Color" value="example">
+      <mat-label>Accent color</mat-label>
+      <input matInput value="example">
     </mat-form-field>
     <mat-form-field color="warn">
-      <input matInput placeholder="Warn Color" value="example">
+      <mat-label>Warn color</mat-label>
+      <input matInput value="example">
     </mat-form-field>
 
     <h4>Textarea</h4>
     <mat-form-field color="primary">
-      <textarea matInput placeholder="Default Color">example</textarea>
+      <mat-label>Default color</mat-label>
+      <textarea matInput>example</textarea>
     </mat-form-field>
     <mat-form-field color="accent">
-      <textarea matInput placeholder="Accent Color">example</textarea>
+      <mat-label>Accent color</mat-label>
+      <textarea matInput>example</textarea>
     </mat-form-field>
     <mat-form-field color="warn">
-      <textarea matInput placeholder="Warn Color">example</textarea>
+      <mat-label>Warn color</mat-label>
+      <textarea matInput>example</textarea>
     </mat-form-field>
 
     <h4>With error</h4>
     <mat-form-field color="primary" >
-      <input matInput placeholder="Default Color" [(ngModel)]="dividerColorExample1" required>
+      <mat-label>Default color</mat-label>
+      <input matInput [(ngModel)]="dividerColorExample1" required>
       <mat-error>This field is required</mat-error>
     </mat-form-field>
     <mat-form-field color="accent">
-      <input matInput placeholder="Accent Color" [(ngModel)]="dividerColorExample2" required>
+      <mat-label>Accent color</mat-label>
+      <input matInput [(ngModel)]="dividerColorExample2" required>
       <mat-error>This field is required</mat-error>
     </mat-form-field>
     <mat-form-field color="warn">
-      <input matInput placeholder="Warn Color" [(ngModel)]="dividerColorExample3" required>
+      <mat-label>Warn color</mat-label>
+      <input matInput [(ngModel)]="dividerColorExample3" required>
       <mat-error>This field is required</mat-error>
     </mat-form-field>
   </mat-card-content>
@@ -181,9 +203,9 @@ <h4>With error</h4>
     <h4>Input</h4>
     <p>
       <mat-form-field class="demo-full-width">
+        <mat-label>Character count (100 max)</mat-label>
         <input matInput
                #characterCountInputHintExample
-               placeholder="Character count (100 max)"
                maxLength="100"
                value="Hello world. How are you?">
         <mat-hint align="end" aria-live="polite">
@@ -195,9 +217,9 @@ <h4>Input</h4>
     <h4>Textarea</h4>
     <p>
       <mat-form-field class="demo-full-width">
+        <mat-label>Character count (100 max)</mat-label>
         <textarea matInput
                   #characterCountTextareaHintExample
-                  placeholder="Character count (100 max)"
                   maxLength="100">Hello world. How are you?</textarea>
         <mat-hint align="end" aria-live="polite">
           {{characterCountTextareaHintExample.value.length}} / 100
@@ -212,7 +234,8 @@ <h4>Textarea</h4>
     <span>
       Hello&nbsp;
       <mat-form-field color="accent">
-        <input matInput [(ngModel)]="name" type="text" placeholder="First name">
+        <mat-label>First name</mat-label>
+        <input matInput [(ngModel)]="name" type="text">
       </mat-form-field>,
       how are you?
     </span>
@@ -220,35 +243,40 @@ <h4>Textarea</h4>
   <mat-card-content>
     <p>
       <mat-form-field>
-        <input matInput disabled placeholder="Disabled field" value="Value">
+        <mat-label>Disabled field</mat-label>
+        <input matInput disabled value="Value">
       </mat-form-field>
       <mat-form-field>
-        <input matInput required placeholder="Required field">
+        <mat-label>Required field</mat-label>
+        <input matInput required>
       </mat-form-field>
     </p>
     <p>
       <mat-form-field style="width: 100%">
-        <input matInput placeholder="100% width placeholder">
+        <mat-label>100% width label</mat-label>
+        <input matInput>
       </mat-form-field>
     </p>
     <p>
       <mat-form-field style="width: 100%">
-        <input matInput #input placeholder="Character count (100 max)" maxLength="100">
+        <mat-label>Character count (100 max)</mat-label>
+        <input matInput #input maxLength="100">
         <mat-hint align="end" aria-live="polite">{{input.value.length}} / 100</mat-hint>
       </mat-form-field>
     </p>
     <p>
       <mat-form-field hintLabel="Hint label" style="width: 100%">
-        <input matInput placeholder="Show Hint Label">
+        <mat-label>Show hint label</mat-label>
+        <input matInput>
       </mat-form-field>
     </p>
 
     <p>
       <mat-form-field>
         <input matInput>
-        <mat-placeholder>
-          I <mat-icon>favorite</mat-icon> <b>bold</b> placeholder
-        </mat-placeholder>
+        <mat-label>
+          I <mat-icon>favorite</mat-icon> <b>bold</b> label
+        </mat-label>
         <mat-hint>
           I also <mat-icon>home</mat-icon> <i>italic</i> hint labels
         </mat-hint>
@@ -256,13 +284,15 @@ <h4>Textarea</h4>
     </p>
     <p>
       <mat-form-field hintLabel="Hint label" style="width: 100%">
-        <input matInput #hintLabelWithCharCount placeholder="Show Hint Label With Character Count">
+        <mat-label>Show hint label with character count</mat-label>
+        <input matInput #hintLabelWithCharCount>
         <mat-hint align="end" aria-live="polite">{{hintLabelWithCharCount.value.length}}</mat-hint>
       </mat-form-field>
     </p>
     <p>
       <mat-form-field style="margin-bottom: 4em">
-        <textarea matInput #longHint placeholder="Enter text to count"></textarea>
+        <mat-label>Enter text to count</mat-label>
+        <textarea matInput #longHint></textarea>
         <mat-hint>
           Enter some text to count how many characters are in it. The character count is shown on
           the right.
@@ -305,7 +335,8 @@ <h4>Textarea</h4>
 
     <p>
       <mat-form-field [floatLabel]="floatingLabel">
-        <input matInput placeholder="Placeholder">
+        <mat-label>Label</mat-label>
+        <input matInput>
       </mat-form-field>
     </p>
 
@@ -318,17 +349,20 @@ <h4>Textarea</h4>
 
     <p>
       <mat-form-field>
-        <input matInput placeholder="Prefixed" value="example">
+        <mat-label>Prefixed</mat-label>
+        <input matInput value="example">
         <div matPrefix>Example:&nbsp;</div>
       </mat-form-field>
       <mat-form-field class="demo-text-align-end">
-        <input matInput placeholder="Suffixed" value="123">
+        <mat-label>Suffixed</mat-label>
+        <input matInput value="123">
         <span matSuffix>.00 €</span>
       </mat-form-field>
       <br/>
       Both:
       <mat-form-field class="demo-text-align-end">
-        <input matInput #email placeholder="Email Address" value="angular-core">
+        <mat-label>Email address</mat-label>
+        <input matInput #email value="angular-core">
         <span matPrefix><mat-icon [class.primary]="email.focused">email</mat-icon>&nbsp;</span>
         <span matSuffix [class.primary]="email.focused">&nbsp;@gmail.com</span>
       </mat-form-field>
@@ -358,10 +392,9 @@ <h4>Textarea</h4>
         <td>{{i+1}}</td>
         <td>
           <mat-form-field>
+            <mat-label>Value</mat-label>
             <input matInput
                    type="number"
-                   placeholder="value"
-                   aria-label="hello"
                    [(ngModel)]="items[i].value">
           </mat-form-field>
         </td>
@@ -377,10 +410,13 @@ <h4>Textarea</h4>
 <mat-card class="demo-card demo-basic">
   <mat-toolbar color="primary">Forms</mat-toolbar>
   <mat-card-content>
-    <mat-form-field><input matInput placeholder="reactive" [formControl]="formControl">
+    <mat-form-field>
+      <mat-label>Reactive</mat-label>
+      <input matInput [formControl]="formControl">
     </mat-form-field>
     <mat-form-field>
-      <input matInput placeholder="template" [(ngModel)]="model" required [disabled]="ctrlDisabled">
+      <mat-label>Template</mat-label>
+      <input matInput [(ngModel)]="model" required [disabled]="ctrlDisabled">
     </mat-form-field>
     <button mat-raised-button color="primary"
             (click)="formControl.enabled ? formControl.disable() : formControl.enable()">
@@ -391,7 +427,8 @@ <h4>Textarea</h4>
     </button>
     <div>
       <mat-form-field>
-        <input matInput placeholder="delayed value" [formControl]="delayedFormControl">
+        <mat-label>Delayed value</mat-label>
+        <input matInput [formControl]="delayedFormControl">
       </mat-form-field>
     </div>
   </mat-card-content>
@@ -509,10 +546,10 @@ <h3>Regular &lt;textarea&gt;</h3>
     <h3>&lt;textarea&gt; with mat-form-field</h3>
     <div>
       <mat-form-field>
+        <mat-label>Autosized textarea</mat-label>
         <textarea matInput
                   matTextareaAutosize
-                  matAutosizeMaxRows="10"
-                  placeholder="Autosized textarea"></textarea>
+                  matAutosizeMaxRows="10"></textarea>
       </mat-form-field>
     </div>
 
@@ -526,3 +563,56 @@ <h3>&lt;textarea&gt; with ngModel</h3>
     </label>
   </mat-card-content>
 </mat-card>
+
+<mat-card class="demo-card demo-basic">
+  <mat-toolbar color="primary">Appearance</mat-toolbar>
+  <mat-card-content>
+    <mat-form-field appearance="legacy">
+      <mat-label>Legacy appearance</mat-label>
+      <input matInput [(ngModel)]="legacyAppearance" required>
+      <mat-error>This field is required</mat-error>
+      <mat-hint>Please type something here</mat-hint>
+    </mat-form-field>
+
+    <mat-form-field appearance="standard">
+      <mat-label>Standard appearance</mat-label>
+      <input matInput [(ngModel)]="standardAppearance" required>
+      <mat-error>This field is required</mat-error>
+      <mat-hint>Please type something here</mat-hint>
+    </mat-form-field>
+
+    <mat-form-field appearance="box">
+      <mat-label>Box appearance</mat-label>
+      <input matInput [(ngModel)]="boxAppearance" required>
+      <mat-error>This field is required</mat-error>
+      <mat-hint>Please type something here</mat-hint>
+    </mat-form-field>
+
+    <table style="width: 100%" cellspacing="0"><tr>
+      <td>
+        <mat-form-field appearance="legacy" style="width: 100%">
+          <mat-label>Legacy appearance</mat-label>
+          <input matInput [(ngModel)]="legacyAppearance" required>
+          <mat-error>This field is required</mat-error>
+          <mat-hint>Please type something here</mat-hint>
+        </mat-form-field>
+      </td>
+      <td>
+        <mat-form-field appearance="standard" style="width: 100%">
+          <mat-label>Standard appearance</mat-label>
+          <input matInput [(ngModel)]="standardAppearance" required>
+          <mat-error>This field is required</mat-error>
+          <mat-hint>Please type something here</mat-hint>
+        </mat-form-field>
+      </td>
+      <td>
+        <mat-form-field appearance="box" style="width: 100%">
+          <mat-label>Box appearance</mat-label>
+          <input matInput [(ngModel)]="boxAppearance" required>
+          <mat-error>This field is required</mat-error>
+          <mat-hint>Please type something here</mat-hint>
+        </mat-form-field>
+      </td>
+    </tr></table>
+  </mat-card-content>
+</mat-card>
diff --git a/src/demo-app/input/input-demo.ts b/src/demo-app/input/input-demo.ts
index 67cc69667381..04ed022cb3b6 100644
--- a/src/demo-app/input/input-demo.ts
+++ b/src/demo-app/input/input-demo.ts
@@ -52,6 +52,10 @@ export class InputDemo {
   delayedFormControl = new FormControl('');
   model = 'hello';
 
+  legacyAppearance: string;
+  standardAppearance: string;
+  boxAppearance: string;
+
   constructor() {
     setTimeout(() => this.delayedFormControl.setValue('hello'), 100);
   }
diff --git a/src/demo-app/ripple/ripple-demo.html b/src/demo-app/ripple/ripple-demo.html
index 98feef4e9d23..9b0b8180cc3e 100644
--- a/src/demo-app/ripple/ripple-demo.html
+++ b/src/demo-app/ripple/ripple-demo.html
@@ -28,10 +28,12 @@
   </section>
   <section>
     <mat-form-field>
-      <input matInput placeholder="Ripple radius" aria-label="radius" [(ngModel)]="radius">
+      <mat-label>Ripple radius</mat-label>
+      <input matInput aria-label="radius" [(ngModel)]="radius">
     </mat-form-field>
     <mat-form-field>
-      <input matInput placeholder="Ripple color" aria-label="color" [(ngModel)]="rippleColor">
+      <mat-label>Ripple color</mat-label>
+      <input matInput aria-label="color" [(ngModel)]="rippleColor">
     </mat-form-field>
   </section>
   <section>
diff --git a/src/demo-app/select/select-demo.html b/src/demo-app/select/select-demo.html
index dd1ca63c25a5..0d199f581348 100644
--- a/src/demo-app/select/select-demo.html
+++ b/src/demo-app/select/select-demo.html
@@ -7,7 +7,8 @@
     <mat-card-subtitle>ngModel</mat-card-subtitle>
 
     <mat-form-field [floatLabel]="floatLabel" [color]="drinksTheme">
-      <mat-select placeholder="Drink" [(ngModel)]="currentDrink" [required]="drinksRequired"
+      <mat-label>Drink</mat-label>
+      <mat-select [(ngModel)]="currentDrink" [required]="drinksRequired"
         [disabled]="drinksDisabled" #drinkControl="ngModel">
         <mat-option>None</mat-option>
         <mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
@@ -50,7 +51,8 @@
 
     <mat-card-content>
       <mat-form-field [color]="pokemonTheme">
-        <mat-select multiple placeholder="Pokemon" [(ngModel)]="currentPokemon"
+        <mat-label>Pokemon</mat-label>
+        <mat-select multiple [(ngModel)]="currentPokemon"
           [required]="pokemonRequired" [disabled]="pokemonDisabled" #pokemonControl="ngModel">
           <mat-option *ngFor="let creature of pokemon" [value]="creature.value">
             {{ creature.viewValue }}
@@ -78,7 +80,8 @@
     <mat-card-subtitle>Without Angular forms</mat-card-subtitle>
 
     <mat-form-field>
-      <mat-select placeholder="Digimon" [(value)]="currentDigimon">
+      <mat-label>Digimon</mat-label>
+      <mat-select [(value)]="currentDigimon">
         <mat-option>None</mat-option>
         <mat-option *ngFor="let creature of digimon" [value]="creature.value">
           {{ creature.viewValue }}
@@ -97,7 +100,8 @@
 
     <mat-card-content>
       <mat-form-field>
-        <mat-select placeholder="Pokemon" [(ngModel)]="currentPokemonFromGroup">
+        <mat-label>Pokemon</mat-label>
+        <mat-select [(ngModel)]="currentPokemonFromGroup">
           <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
             [disabled]="group.disabled">
             <mat-option *ngFor="let creature of group.pokemon" [value]="creature.value">
@@ -114,11 +118,11 @@
     <mat-card-subtitle>compareWith</mat-card-subtitle>
     <mat-card-content>
       <mat-form-field [color]="drinksTheme">
-        <mat-select placeholder="Drink"
-                   [(ngModel)]="currentDrinkObject"
-                   [required]="drinkObjectRequired"
-                   [compareWith]="compareByValue ? compareDrinkObjectsByValue : compareByReference"
-                   #drinkObjectControl="ngModel">
+        <mat-label>Drink</mat-label>
+        <mat-select [(ngModel)]="currentDrinkObject"
+                    [required]="drinkObjectRequired"
+                    [compareWith]="compareByValue ? compareDrinkObjectsByValue : compareByReference"
+                    #drinkObjectControl="ngModel">
           <mat-option *ngFor="let drink of drinks" [value]="drink" [disabled]="drink.disabled">
             {{ drink.viewValue }}
           </mat-option>
@@ -146,7 +150,8 @@
 
       <mat-card-content>
         <mat-form-field>
-          <mat-select placeholder="Food i would like to eat" [formControl]="foodControl">
+          <mat-label>Food I would like to eat</mat-label>
+          <mat-select [formControl]="foodControl">
             <mat-option *ngFor="let food of foods" [value]="food.value"> {{ food.viewValue }}</mat-option>
           </mat-select>
         </mat-form-field>
@@ -167,7 +172,8 @@
 
       <mat-card-content>
         <mat-form-field>
-          <mat-select placeholder="Starter Pokemon" (change)="latestChangeEvent = $event">
+          <mat-label>Starter pokemon</mat-label>
+          <mat-select (change)="latestChangeEvent = $event">
             <mat-option *ngFor="let creature of pokemon" [value]="creature.value">{{ creature.viewValue }}</mat-option>
           </mat-select>
         </mat-form-field>
diff --git a/src/demo-app/snack-bar/snack-bar-demo.html b/src/demo-app/snack-bar/snack-bar-demo.html
index 1bdb4819e7aa..9593e6034324 100644
--- a/src/demo-app/snack-bar/snack-bar-demo.html
+++ b/src/demo-app/snack-bar/snack-bar-demo.html
@@ -25,10 +25,10 @@ <h1>SnackBar demo</h1>
     <mat-checkbox [(ngModel)]="action">
       <p *ngIf="!action">Show button on snack bar</p>
       <mat-form-field *ngIf="action">
+        <mat-label>Snack bar action label</mat-label>
         <input matInput
                type="text"
                class="demo-button-label-input"
-               placeholder="Snack bar action label"
                [(ngModel)]="actionButtonLabel">
       </mat-form-field>
     </mat-checkbox>
@@ -37,10 +37,10 @@ <h1>SnackBar demo</h1>
     <mat-checkbox [(ngModel)]="setAutoHide">
       <p *ngIf="!setAutoHide">Auto hide after duration</p>
       <mat-form-field *ngIf="setAutoHide">
+        <mat-label>Auto hide duration in ms</mat-label>
         <input matInput
                type="number"
                class="demo-button-label-input"
-               placeholder="Auto Hide Duration in ms"
                [(ngModel)]="autoHide">
       </mat-form-field>
     </mat-checkbox>
diff --git a/src/demo-app/stepper/stepper-demo.html b/src/demo-app/stepper/stepper-demo.html
index 0dd4274921ba..40f2828e2a0b 100644
--- a/src/demo-app/stepper/stepper-demo.html
+++ b/src/demo-app/stepper/stepper-demo.html
@@ -6,12 +6,14 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
     <mat-step formGroupName="0" [stepControl]="formArray?.get([0])">
       <ng-template matStepLabel>Fill out your name</ng-template>
       <mat-form-field>
-        <input matInput placeholder="First Name" formControlName="firstNameFormCtrl" required>
+        <mat-label>First name</mat-label>
+        <input matInput formControlName="firstNameFormCtrl" required>
         <mat-error>This field is required</mat-error>
       </mat-form-field>
 
       <mat-form-field>
-        <input matInput placeholder="Last Name" formControlName="lastNameFormCtrl" required>
+        <mat-label>Last name</mat-label>
+        <input matInput formControlName="lastNameFormCtrl" required>
         <mat-error>This field is required</mat-error>
       </mat-form-field>
       <div>
@@ -24,7 +26,8 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
         <div>Fill out your email address</div>
       </ng-template>
       <mat-form-field>
-        <input matInput placeholder="Email address" formControlName="emailFormCtrl">
+        <mat-label>Email address</mat-label>
+        <input matInput formControlName="emailFormCtrl">
         <mat-error>The input is invalid.</mat-error>
       </mat-form-field>
       <div>
@@ -49,11 +52,13 @@ <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
     <form [formGroup]="nameFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
       <mat-form-field>
-        <input matInput placeholder="First Name" formControlName="firstNameCtrl" required>
+        <mat-label>First name</mat-label>
+        <input matInput formControlName="firstNameCtrl" required>
         <mat-error>This field is required</mat-error>
       </mat-form-field>
       <mat-form-field>
-        <input matInput placeholder="Last Name" formControlName="lastNameCtrl" required>
+        <mat-label>Last name</mat-label>
+        <input matInput formControlName="lastNameCtrl" required>
         <mat-error>This field is required</mat-error>
       </mat-form-field>
       <div>
@@ -66,7 +71,8 @@ <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
     <form [formGroup]="emailFormGroup">
       <ng-template matStepLabel>Fill out your email address</ng-template>
       <mat-form-field>
-        <input matInput placeholder="Email address" formControlName="emailCtrl">
+        <mat-label>Email address</mat-label>
+        <input matInput formControlName="emailCtrl">
         <mat-error>The input is invalid</mat-error>
       </mat-form-field>
       <div>
@@ -93,11 +99,13 @@ <h3>Vertical Stepper Demo</h3>
   <mat-step [editable]="!isNonEditable">
     <ng-template matStepLabel>Fill out your name</ng-template>
     <mat-form-field>
-      <input matInput placeholder="First Name">
+      <mat-label>First name</mat-label>
+      <input matInput>
     </mat-form-field>
 
     <mat-form-field>
-      <input matInput placeholder="Last Name">
+      <mat-label>Last name</mat-label>
+      <input matInput>
     </mat-form-field>
     <div>
       <button mat-button matStepperNext type="button">Next</button>
@@ -109,7 +117,8 @@ <h3>Vertical Stepper Demo</h3>
       <div>Fill out your phone number</div>
     </ng-template>
     <mat-form-field>
-      <input matInput placeholder="Phone number">
+      <mat-label>Phone number</mat-label>
+      <input matInput>
     </mat-form-field>
     <div>
       <button mat-button matStepperPrevious type="button">Back</button>
@@ -122,7 +131,8 @@ <h3>Vertical Stepper Demo</h3>
       <div>Fill out your address</div>
     </ng-template>
     <mat-form-field>
-      <input matInput placeholder="Address">
+      <mat-label>Address</mat-label>
+      <input matInput>
     </mat-form-field>
     <div>
       <button mat-button matStepperPrevious type="button">Back</button>
@@ -143,11 +153,13 @@ <h3>Horizontal Stepper Demo with Text Label</h3>
 <mat-horizontal-stepper>
   <mat-step label="Fill out your name">
     <mat-form-field>
-      <input matInput placeholder="First Name">
+      <mat-label>First name</mat-label>
+      <input matInput>
     </mat-form-field>
 
     <mat-form-field>
-      <input matInput placeholder="Last Name">
+      <mat-label>Last name</mat-label>
+      <input matInput>
     </mat-form-field>
     <div>
       <button mat-button matStepperNext type="button">Next</button>
@@ -156,7 +168,8 @@ <h3>Horizontal Stepper Demo with Text Label</h3>
 
   <mat-step label="Fill out your phone number">
     <mat-form-field>
-      <input matInput placeholder="Phone number">
+      <mat-label>Phone number</mat-label>
+      <input matInput>
     </mat-form-field>
     <div>
       <button mat-button matStepperPrevious type="button">Back</button>
@@ -166,7 +179,8 @@ <h3>Horizontal Stepper Demo with Text Label</h3>
 
   <mat-step label="Fill out your address">
     <mat-form-field>
-      <input matInput placeholder="Address">
+      <mat-label>Address</mat-label>
+      <input matInput>
     </mat-form-field>
     <div>
       <button mat-button matStepperPrevious type="button">Back</button>
@@ -187,7 +201,8 @@ <h3>Horizontal Stepper Demo with Templated Label</h3>
   <mat-step *ngFor="let step of steps">
     <ng-template matStepLabel>{{step.label}}</ng-template>
     <mat-form-field>
-      <input matInput placeholder="Answer" [(ngModel)]="step.content">
+      <mat-label>Answer</mat-label>
+      <input matInput [(ngModel)]="step.content">
     </mat-form-field>
     <div>
       <button mat-button matStepperPrevious>Back</button>
@@ -200,7 +215,8 @@ <h3>Stepper with autosize textarea</h3>
 <mat-horizontal-stepper>
   <mat-step label="Step 1">
     <mat-form-field>
-      <textarea matInput placeholder="Autosize textarea" matTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
+      <mat-label>Autosize textarea</mat-label>
+      <textarea matInput matTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
     </mat-form-field>
   </mat-step>
 </mat-horizontal-stepper>
diff --git a/src/demo-app/table/table-demo.html b/src/demo-app/table/table-demo.html
index f25906d05ca4..5fdf813f6bf9 100644
--- a/src/demo-app/table/table-demo.html
+++ b/src/demo-app/table/table-demo.html
@@ -214,7 +214,8 @@ <h3> MatTable Using 'When' Rows for Interactive Details</h3>
 <h3>MatTable With MatTableDataSource Example</h3>
 
 <mat-form-field>
-  <input matInput #filter placeholder="Filter users">
+  <mat-label>Filter users</mat-label>
+  <input matInput #filter>
 </mat-form-field>
 
 <div class="demo-table-container demo-mat-table-example mat-elevation-z4 mat-table-selectable">
diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html
index 8b85ef763f3d..8c1ac8261ad0 100644
--- a/src/demo-app/tabs/tabs-demo.html
+++ b/src/demo-app/tabs/tabs-demo.html
@@ -89,7 +89,8 @@ <h1>Tab Group Demo - Dynamic Tabs</h1>
         <br>
         <br>
         <mat-form-field>
-          <input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
+          <mat-label>Tab label</mat-label>
+          <input matInput [(ngModel)]="tab.label">
         </mat-form-field>
         <br><br>
         <button mat-raised-button
@@ -141,7 +142,8 @@ <h1>Tab Group Demo - Dynamic Height</h1>
       <br>
       <br>
       <mat-form-field>
-        <input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
+        <mat-label>Tab label</mat-label>
+        <input matInput [(ngModel)]="tab.label">
       </mat-form-field>
     </div>
   </mat-tab>
@@ -187,7 +189,8 @@ <h1>Tab Group Demo - Fixed Height</h1>
       <br>
       <br>
       <mat-form-field>
-        <input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
+        <mat-label>Tab label</mat-label>
+        <input matInput [(ngModel)]="tab.label">
       </mat-form-field>
     </div>
   </mat-tab>
@@ -217,7 +220,8 @@ <h1>Async Tabs</h1>
       <br>
       <br>
       <mat-form-field>
-        <input matInput placeholder="Tab Label" [(ngModel)]="tab.label">
+        <mat-label>Tab label</mat-label>
+        <input matInput [(ngModel)]="tab.label">
       </mat-form-field>
     </div>
   </mat-tab>
@@ -283,7 +287,8 @@ <h1>Tabs with autosize textarea</h1>
   <mat-tab label="Tab 1">
     <div class="tab-content">
       <mat-form-field>
-        <textarea matInput placeholder="Autosize textarea" matTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
+        <mat-label>Autosize textarea</mat-label>
+        <textarea matInput matTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
       </mat-form-field>
     </div>
   </mat-tab>
diff --git a/src/lib/form-field/BUILD.bazel b/src/lib/form-field/BUILD.bazel
index f88d4b2e648d..77b35dda754e 100644
--- a/src/lib/form-field/BUILD.bazel
+++ b/src/lib/form-field/BUILD.bazel
@@ -9,6 +9,9 @@ ng_module(
   module_name = "@angular/material/form-field",
   assets = [
     ":form_field_css",
+    ":form_field_box_css",
+    ":form_field_legacy_css",
+    ":form_field_standard_css",
     "//src/lib/input:input_css"
   ],
   deps = [
@@ -19,14 +22,31 @@ ng_module(
   tsconfig = ":tsconfig-build.json",
 )
 
-
 sass_binary(
   name = "form_field_scss",
   src = "form-field.scss",
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
-# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
+sass_binary(
+  name = "form_field_box_scss",
+  src = "form-field-box.scss",
+  deps = ["//src/lib/core:core_scss_lib"],
+)
+
+sass_binary(
+  name = "form_field_legacy_scss",
+  src = "form-field-legacy.scss",
+  deps = ["//src/lib/core:core_scss_lib"],
+)
+
+sass_binary(
+  name = "form_field_standard_scss",
+  src = "form-field-standard.scss",
+  deps = ["//src/lib/core:core_scss_lib"],
+)
+
+# TODO(jelbourn): remove these when sass_binary supports specifying an output filename and dir.
 # Copy the output of the sass_binary such that the filename and path match what we expect.
 genrule(
   name = "form_field_css",
@@ -35,3 +55,23 @@ genrule(
   cmd = "cat $(locations :form_field_scss) > $@",
 )
 
+genrule(
+  name = "form_field_box_css",
+  srcs = [":form_field_box_scss"],
+  outs = ["form-field-box.css"],
+  cmd = "cat $(locations :form_field_box_scss) > $@",
+)
+
+genrule(
+  name = "form_field_legacy_css",
+  srcs = [":form_field_legacy_scss"],
+  outs = ["form-field-legacy.css"],
+  cmd = "cat $(locations :form_field_legacy_scss) > $@",
+)
+
+genrule(
+  name = "form_field_standard_css",
+  srcs = [":form_field_standard_scss"],
+  outs = ["form-field-standard.css"],
+  cmd = "cat $(locations :form_field_standard_scss) > $@",
+)
diff --git a/src/lib/form-field/_form-field-box-theme.scss b/src/lib/form-field/_form-field-box-theme.scss
new file mode 100644
index 000000000000..7242c2307a0f
--- /dev/null
+++ b/src/lib/form-field/_form-field-box-theme.scss
@@ -0,0 +1,93 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/style/form-common';
+@import '../core/typography/typography-utils';
+
+
+// Theme styles that only apply to the box appearance of the form-field.
+
+@mixin mat-form-field-box-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  $box-background: mat-color($foreground, base, if($is-dark-theme, 0.1, 0.06));
+  $box-disabled-background: mat-color($foreground, base, if($is-dark-theme, 0.05, 0.03));
+  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+
+  .mat-form-field-appearance-box {
+    .mat-form-field-flex {
+      background-color: $box-background;
+    }
+
+    &.mat-form-field-disabled .mat-form-field-flex {
+      background-color: $box-disabled-background;
+    }
+
+    .mat-form-field-underline::before {
+      background-color: $underline-color;
+    }
+
+    &.mat-form-field-disabled .mat-form-field-underline::before {
+      background-color: transparent;
+    }
+  }
+}
+
+// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
+// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
+// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
+// an unknown pseudo-class it will discard the entire rule set.
+$mat-form-field-box-dedupe: 0;
+
+// Applies a floating label above the form field control itself.
+@mixin _mat-form-field-box-label-floating($font-scale, $infix-padding, $infix-margin-top) {
+  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-box-dedupe)
+             scale($font-scale);
+  width: 100% / $font-scale + $mat-form-field-box-dedupe;
+
+  $mat-form-field-box-dedupe: $mat-form-field-box-dedupe + 0.00001 !global;
+}
+
+@mixin mat-form-field-box-typography($config) {
+  // The unit-less line-height from the font config.
+  $line-height: mat-line-height($config, input);
+  // The amount to scale the font for the floating label and subscript.
+  $subscript-font-scale: 0.75;
+  // The padding on the infix. Mocks show half of the text size.
+  $infix-padding: 0.5em;
+  // The margin applied to the form-field-infix to reserve space for the floating label.
+  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
+  // The amount we offset the label in the box appearance.
+  $box-appearance-label-offset: -0.5em * $line-height;
+
+  .mat-form-field-appearance-box {
+    .mat-form-field-label {
+      margin-top: $box-appearance-label-offset;
+    }
+
+    &.mat-form-field-can-float {
+      &.mat-form-field-should-float .mat-form-field-label,
+      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
+        @include _mat-form-field-label-floating(
+                $subscript-font-scale, $infix-padding + $box-appearance-label-offset,
+                $infix-margin-top);
+      }
+
+      .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
+      .mat-form-field-label {
+        @include _mat-form-field-label-floating(
+                $subscript-font-scale, $infix-padding + $box-appearance-label-offset,
+                $infix-margin-top);
+      }
+
+      // Server-side rendered matInput with a label attribute but label not shown
+      // (used as a pure CSS stand-in for mat-form-field-should-float).
+      .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
+      .mat-form-field-label {
+        @include _mat-form-field-label-floating(
+                $subscript-font-scale, $infix-padding + $box-appearance-label-offset,
+                $infix-margin-top);
+      }
+    }
+  }
+}
diff --git a/src/lib/form-field/_form-field-legacy-theme.scss b/src/lib/form-field/_form-field-legacy-theme.scss
new file mode 100644
index 000000000000..6e09a89f1579
--- /dev/null
+++ b/src/lib/form-field/_form-field-legacy-theme.scss
@@ -0,0 +1,123 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/style/form-common';
+@import '../core/typography/typography-utils';
+
+
+// Theme styles that only apply to the legacy appearance of the form-field.
+
+@mixin mat-form-field-legacy-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+
+  .mat-form-field-appearance-legacy {
+    .mat-form-field-underline {
+      background-color: $underline-color;
+    }
+
+    &.mat-form-field-disabled .mat-form-field-underline {
+      @include mat-control-disabled-underline($underline-color);
+    }
+  }
+}
+
+// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
+// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
+// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
+// an unknown pseudo-class it will discard the entire rule set.
+$mat-form-field-legacy-dedupe: 0;
+
+// Applies a floating label above the form field control itself.
+@mixin _mat-form-field-legacy-label-floating($font-scale, $infix-padding, $infix-margin-top) {
+  // We use perspective to fix the text blurriness as described here:
+  // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
+  // This results in a small jitter after the label floats on Firefox, which the
+  // translateZ fixes.
+  transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px)
+  translateZ(0.001px + $mat-form-field-legacy-dedupe);
+  // The tricks above used to smooth out the animation on chrome and firefox actually make things
+  // worse on IE, so we don't include them in the IE version.
+  -ms-transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-legacy-dedupe)
+                 scale($font-scale);
+
+  width: 100% / $font-scale + $mat-form-field-legacy-dedupe;
+
+  $mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;
+}
+
+@mixin mat-form-field-legacy-typography($config) {
+  // The unit-less line-height from the font config.
+  $line-height: mat-line-height($config, input);
+  // The amount to scale the font for the floating label and subscript.
+  $subscript-font-scale: 0.75;
+  // The amount of space between the top of the line and the top of the actual text
+  // (as a fraction of the font-size).
+  $line-spacing: ($line-height - 1) / 2;
+  // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge
+  // of the text itself, not the edge of the line; therefore we subtract off the line spacing.
+  $infix-padding: 0.5em - $line-spacing;
+  // The margin applied to the form-field-infix to reserve space for the floating label.
+  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
+  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
+  // Mocks show half of the text size, but this margin is applied to an element with the subscript
+  // text font size, so we need to divide by the scale factor to make it half of the original text
+  // size. We again need to subtract off the line spacing since the mocks measure to the edge of the
+  // text, not the  edge of the line.
+  $subscript-margin-top: 0.5em / $subscript-font-scale - ($line-spacing * 2);
+  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
+  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
+  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
+  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
+
+  .mat-form-field-appearance-legacy {
+    .mat-form-field-wrapper {
+      padding-bottom: $wrapper-padding-bottom;
+    }
+
+    .mat-form-field-infix {
+      padding: $infix-padding 0;
+    }
+
+    &.mat-form-field-can-float {
+      &.mat-form-field-should-float .mat-form-field-label,
+      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
+        @include _mat-form-field-legacy-label-floating(
+                $subscript-font-scale, $infix-padding, $infix-margin-top);
+      }
+
+      .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
+      .mat-form-field-label {
+        @include _mat-form-field-legacy-label-floating(
+                $subscript-font-scale, $infix-padding, $infix-margin-top);
+      }
+
+      // Server-side rendered matInput with a label attribute but label not shown
+      // (used as a pure CSS stand-in for mat-form-field-should-float).
+      .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
+      .mat-form-field-label {
+        @include _mat-form-field-legacy-label-floating(
+                $subscript-font-scale, $infix-padding, $infix-margin-top);
+      }
+    }
+
+    .mat-form-field-label {
+      top: $infix-margin-top + $infix-padding;
+    }
+
+    .mat-form-field-underline {
+      // We want the underline to start at the end of the content box, not the padding box,
+      // so we move it up by the padding amount.
+      bottom: $wrapper-padding-bottom;
+    }
+
+    .mat-form-field-subscript-wrapper {
+      margin-top: $subscript-margin-top;
+
+      // We want the subscript to start at the end of the content box, not the padding box,
+      // so we move it up by the padding amount (adjusted for the smaller font size);
+      top: calc(100% - #{$wrapper-padding-bottom / $subscript-font-scale});
+    }
+  }
+}
diff --git a/src/lib/form-field/_form-field-standard-theme.scss b/src/lib/form-field/_form-field-standard-theme.scss
new file mode 100644
index 000000000000..01d7e123c3e5
--- /dev/null
+++ b/src/lib/form-field/_form-field-standard-theme.scss
@@ -0,0 +1,26 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/style/form-common';
+@import '../core/typography/typography-utils';
+
+
+// Theme styles that only apply to the standard appearance of the form-field.
+
+@mixin mat-form-field-standard-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+
+  .mat-form-field-appearance-standard {
+    .mat-form-field-underline {
+      background-color: $underline-color;
+    }
+
+    &.mat-form-field-disabled .mat-form-field-underline {
+      @include mat-control-disabled-underline($underline-color);
+    }
+  }
+}
+
+@mixin mat-form-field-standard-typography($config) {}
diff --git a/src/lib/form-field/_form-field-theme.scss b/src/lib/form-field/_form-field-theme.scss
index ee21101bc024..2641e2c86363 100644
--- a/src/lib/form-field/_form-field-theme.scss
+++ b/src/lib/form-field/_form-field-theme.scss
@@ -2,8 +2,13 @@
 @import '../core/theming/theming';
 @import '../core/style/form-common';
 @import '../core/typography/typography-utils';
+@import 'form-field-box-theme.scss';
+@import 'form-field-legacy-theme.scss';
+@import 'form-field-standard-theme.scss';
 
 
+// Theme styles that apply to all appearances of the form-field.
+
 @mixin mat-form-field-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
@@ -18,7 +23,7 @@
   $required-label-color: mat-color($accent);
 
   // Underline colors.
-  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+  $underline-color-base: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));
   $underline-color-accent: mat-color($accent);
   $underline-color-warn: mat-color($warn);
   $underline-focused-color: mat-color($primary);
@@ -47,30 +52,28 @@
     color: $required-label-color;
   }
 
-  .mat-form-field-underline {
-    background-color: $underline-color;
-  }
-
-  .mat-form-field-disabled .mat-form-field-underline {
-    @include mat-control-disabled-underline($underline-color);
+  .mat-form-field-ripple {
+    background-color: $underline-color-base;
   }
 
-  .mat-form-field-ripple {
-    background-color: $underline-focused-color;
+  .mat-form-field.mat-focused {
+    .mat-form-field-ripple {
+      background-color: $underline-focused-color;
 
-    &.mat-accent {
-      background-color: $underline-color-accent;
-    }
+      &.mat-accent {
+        background-color: $underline-color-accent;
+      }
 
-    &.mat-warn {
-      background-color: $underline-color-warn;
+      &.mat-warn {
+        background-color: $underline-color-warn;
+      }
     }
   }
 
   // Styling for the error state of the form field. Note that while the same can be
   // achieved with the ng-* classes, we use this approach in order to ensure that the same
   // logic is used to style the error state and to show the error messages.
-  .mat-form-field-invalid {
+  .mat-form-field.mat-form-field-invalid {
     .mat-form-field-label {
       color: $underline-color-warn;
 
@@ -88,29 +91,25 @@
   .mat-error {
     color: $underline-color-warn;
   }
+
+  @include mat-form-field-legacy-theme($theme);
+  @include mat-form-field-standard-theme($theme);
+  @include mat-form-field-box-theme($theme);
 }
 
 // Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
 // and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
 // of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
 // an unknown pseudo-class it will discard the entire rule set.
-$dedupe: 0;
+$mat-form-field-dedupe: 0;
 
 // Applies a floating label above the form field control itself.
 @mixin _mat-form-field-label-floating($font-scale, $infix-padding, $infix-margin-top) {
-  // We use perspective to fix the text blurriness as described here:
-  // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
-  // This results in a small jitter after the label floats on Firefox, which the
-  // translateZ fixes.
-  transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px)
-             translateZ(0.001px + $dedupe);
-  // The tricks above used to smooth out the animation on chrome and firefox actually make things
-  // worse on IE, so we don't include them in the IE version.
-  -ms-transform: translateY(-$infix-margin-top - $infix-padding + $dedupe) scale($font-scale);
-
-  width: 100% / $font-scale + $dedupe;
-
-  $dedupe: $dedupe + 0.00001 !global;
+  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-dedupe)
+             scale($font-scale);
+  width: 100% / $font-scale + $mat-form-field-dedupe;
+
+  $mat-form-field-dedupe: $mat-form-field-dedupe + 0.00001 !global;
 }
 
 @mixin mat-form-field-typography($config) {
@@ -122,12 +121,8 @@ $dedupe: 0;
   // The amount to scale the font for the prefix and suffix icons.
   $prefix-suffix-icon-font-scale: 1.5;
 
-  // The amount of space between the top of the line and the top of the actual text
-  // (as a fraction of the font-size).
-  $line-spacing: ($line-height - 1) / 2;
-  // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge
-  // of the text itself, not the edge of the line; therefore we subtract off the line spacing.
-  $infix-padding: 0.5em - $line-spacing;
+  // The padding on the infix. Mocks show half of the text size.
+  $infix-padding: 0.5em;
   // The margin applied to the form-field-infix to reserve space for the floating label.
   $infix-margin-top: 1em * $line-height * $subscript-font-scale;
   // Font size to use for the label and subscript text.
@@ -137,9 +132,8 @@ $dedupe: 0;
   // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
   // Mocks show half of the text size, but this margin is applied to an element with the subscript
   // text font size, so we need to divide by the scale factor to make it half of the original text
-  // size. We again need to subtract off the line spacing since the mocks measure to the edge of the
-  // text, not the  edge of the line.
-  $subscript-margin-top: 0.5em / $subscript-font-scale - ($line-spacing * 2);
+  // size.
+  $subscript-margin-top: 0.5em / $subscript-font-scale;
   // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
   // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
   // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
@@ -227,4 +221,8 @@ $dedupe: 0;
     // so we move it up by the padding amount (adjusted for the smaller font size);
     top: calc(100% - #{$wrapper-padding-bottom / $subscript-font-scale});
   }
+
+  @include mat-form-field-legacy-typography($config);
+  @include mat-form-field-standard-typography($config);
+  @include mat-form-field-box-typography($config);
 }
diff --git a/src/lib/form-field/form-field-box.scss b/src/lib/form-field/form-field-box.scss
new file mode 100644
index 000000000000..a939dd6bfba1
--- /dev/null
+++ b/src/lib/form-field/form-field-box.scss
@@ -0,0 +1,63 @@
+@import '../core/style/variables';
+@import '../core/style/vendor-prefixes';
+
+
+// Styles that only apply to the box appearance of the form-field.
+
+// The border radius for the form field box.
+$mat-form-field-box-border-radius: 4px !default;
+// The height of the underline at the bottom of the form field box.
+$mat-form-field-box-underline-height: 2px !default;
+// The horizontal padding between the edge of the form field box and the start of the text.
+$mat-form-field-box-side-padding: 1em !default;
+// The vertical padding between the edge of the form field box and the start of the text as well as
+// between the floating label and the value.
+$mat-form-field-box-line-spacing: 0.5em !default;
+// The scale of the subscript and floating label text w.r.t the value text.
+$mat-form-field-box-subscript-font-scale: 0.75 !default;
+// The horizontal padding between the edge of the subscript box and the start of the subscript text.
+$mat-form-field-box-subscript-padding:
+    $mat-form-field-box-side-padding / $mat-form-field-box-subscript-font-scale;
+
+
+.mat-form-field-appearance-box {
+  .mat-form-field-flex {
+    border-radius: $mat-form-field-box-border-radius;
+    padding: $mat-form-field-box-line-spacing $mat-form-field-box-side-padding 0
+             $mat-form-field-box-side-padding;
+  }
+
+  .mat-form-field-underline {
+    height: $mat-form-field-box-border-radius;
+    border-radius: 0 0 $mat-form-field-box-border-radius $mat-form-field-box-border-radius;
+    overflow: hidden;
+  }
+
+  .mat-form-field-underline::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: $mat-form-field-box-underline-height;
+    width: 100%;
+  }
+
+  .mat-form-field-ripple {
+    bottom: 0;
+    height: $mat-form-field-box-underline-height;
+  }
+
+  // Note that we need this specific of a selector because we don't want
+  // the hover effect to show when the user hovers over the hints.
+  &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-underline {
+    .mat-form-field-ripple {
+      opacity: 1;
+      transform: none;
+      transition: opacity 600ms $swift-ease-out-timing-function;
+    }
+  }
+
+  .mat-form-field-subscript-wrapper {
+    padding: 0 $mat-form-field-box-subscript-padding;
+  }
+}
diff --git a/src/lib/form-field/form-field-legacy.scss b/src/lib/form-field/form-field-legacy.scss
new file mode 100644
index 000000000000..301fea946862
--- /dev/null
+++ b/src/lib/form-field/form-field-legacy.scss
@@ -0,0 +1,36 @@
+@import '../core/style/variables';
+@import '../core/style/vendor-prefixes';
+
+
+// Styles that only apply to the legacy appearance of the form-field.
+
+// The height of the underline.
+$mat-form-field-legacy-underline-height: 1px !default;
+
+
+.mat-form-field-appearance-legacy {
+  .mat-form-field-label {
+    transform: perspective(100px);
+    -ms-transform: none;
+  }
+
+  // The underline is what's shown under the control, its prefix and its suffix.
+  // The ripple is the blue animation coming on top of it.
+  .mat-form-field-underline {
+    height: $mat-form-field-legacy-underline-height;
+  }
+
+  .mat-form-field-ripple {
+    top: 0;
+    height: $mat-form-field-legacy-underline-height * 2;
+  }
+
+  &.mat-form-field-disabled .mat-form-field-underline {
+    background-position: 0;
+    background-color: transparent;
+  }
+
+  &.mat-form-field-invalid:not(.mat-focused) .mat-form-field-ripple {
+    height: $mat-form-field-legacy-underline-height;
+  }
+}
diff --git a/src/lib/form-field/form-field-standard.scss b/src/lib/form-field/form-field-standard.scss
new file mode 100644
index 000000000000..a79a00c00612
--- /dev/null
+++ b/src/lib/form-field/form-field-standard.scss
@@ -0,0 +1,47 @@
+@import '../core/style/variables';
+@import '../core/style/vendor-prefixes';
+
+
+// Styles that only apply to the standard appearance of the form-field.
+
+// The height of the underline.
+$mat-form-field-standard-underline-height: 1px !default;
+// The bottom margin of the underline (used to push it up to align with box appearance underline).
+$mat-form-field-standard-underline-margin-bottom: 1px !default;
+// The padding between the top of the form field and the label text (used to align the standard
+// form field with the box appearance).
+$mat-form-field-standard-padding-top: 0.5em !default;
+
+
+.mat-form-field-appearance-standard {
+  .mat-form-field-flex {
+    padding-top: $mat-form-field-standard-padding-top;
+  }
+
+  // The underline is what's shown under the control, its prefix and its suffix.
+  // The ripple is the blue animation coming on top of it.
+  .mat-form-field-underline {
+    height: $mat-form-field-standard-underline-height;
+    margin-bottom: $mat-form-field-standard-underline-margin-bottom;
+  }
+
+  .mat-form-field-ripple {
+    top: 0;
+    height: $mat-form-field-standard-underline-height * 2;
+  }
+
+  &.mat-form-field-disabled .mat-form-field-underline {
+    background-position: 0;
+    background-color: transparent;
+  }
+
+  // Note that we need this specific of a selector because we don't want
+  // the hover effect to show when the user hovers over the hints.
+  &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-underline {
+    .mat-form-field-ripple {
+      opacity: 1;
+      transform: none;
+      transition: opacity 600ms $swift-ease-out-timing-function;
+    }
+  }
+}
diff --git a/src/lib/form-field/form-field.scss b/src/lib/form-field/form-field.scss
index 974a46997586..5e07a9513420 100644
--- a/src/lib/form-field/form-field.scss
+++ b/src/lib/form-field/form-field.scss
@@ -2,10 +2,10 @@
 @import '../core/style/vendor-prefixes';
 
 
+// Styles that apply to all appearances of the form-field.
+
 // Min amount of space between start and end hint.
 $mat-form-field-hint-min-space: 1em !default;
-// The height of the underline.
-$mat-form-field-underline-height: 1px !default;
 // Infix stretches to fit the container, but naturally wants to be this wide. We set this in order
 // to have a a consistent natural size for the various types of controls that can go in a form
 // field.
@@ -35,6 +35,7 @@ $mat-form-field-default-infix-width: 180px !default;
 .mat-form-field-flex {
   display: inline-flex;
   align-items: baseline;
+  box-sizing: border-box;
   width: 100%;
 }
 
@@ -96,10 +97,6 @@ $mat-form-field-default-infix-width: 180px !default;
   text-overflow: ellipsis;
   overflow: hidden;
 
-  // The perspective helps smooth out animations on Chrome and Firefox but isn't needed on IE.
-  transform: perspective(100px);
-  -ms-transform: none;
-
   transform-origin: 0 0;
   transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
   color $swift-ease-out-duration $swift-ease-out-timing-function,
@@ -155,49 +152,38 @@ $mat-form-field-default-infix-width: 180px !default;
   transition: none;
 }
 
-// The underline is what's shown under the control, its prefix and its suffix.
-// The ripple is the blue animation coming on top of it.
 .mat-form-field-underline {
   position: absolute;
-  height: $mat-form-field-underline-height;
   width: 100%;
+  // Need this so that the underline doesn't block the hover effect.
+  pointer-events: none;
+}
 
-  .mat-form-field-disabled & {
-    background-position: 0;
-    background-color: transparent;
-  }
+.mat-form-field-ripple {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  transform-origin: 50%;
+  transform: scaleX(0.5);
+  opacity: 0;
+  transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
+}
 
+.mat-form-field.mat-focused,
+.mat-form-field.mat-form-field-invalid {
   .mat-form-field-ripple {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: $mat-form-field-underline-height * 2;
-    transform-origin: 50%;
-    transform: scaleX(0.5);
-    visibility: hidden;
-    opacity: 0;
-    transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
-
-    .mat-form-field-invalid:not(.mat-focused) & {
-      height: $mat-form-field-underline-height;
-    }
-
-    .mat-focused &,
-    .mat-form-field-invalid & {
-      visibility: visible;
-      opacity: 1;
-      transform: scaleX(1);
-      transition: transform 300ms $swift-ease-out-timing-function,
-        opacity 100ms $swift-ease-out-timing-function,
-        background-color 300ms $swift-ease-out-timing-function;
-    }
+    opacity: 1;
+    transform: scaleX(1);
+    transition: transform 300ms $swift-ease-out-timing-function,
+                opacity 100ms $swift-ease-out-timing-function,
+                background-color 300ms $swift-ease-out-timing-function;
   }
 }
 
 // Wrapper for the hints and error messages.
 .mat-form-field-subscript-wrapper {
   position: absolute;
+  box-sizing: border-box;
   width: 100%;
   overflow: hidden; // prevents multi-line errors from overlapping the control
 }
diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts
index e84da2d09ad3..7ded8522915e 100644
--- a/src/lib/form-field/form-field.ts
+++ b/src/lib/form-field/form-field.ts
@@ -7,8 +7,6 @@
  */
 
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {take} from 'rxjs/operators/take';
-import {startWith} from 'rxjs/operators/startWith';
 import {
   AfterContentChecked,
   AfterContentInit,
@@ -26,9 +24,12 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {FloatLabelType, MAT_LABEL_GLOBAL_OPTIONS, LabelOptions} from '@angular/material/core';
+import {FloatLabelType, LabelOptions, MAT_LABEL_GLOBAL_OPTIONS} from '@angular/material/core';
 import {fromEvent} from 'rxjs/observable/fromEvent';
+import {startWith} from 'rxjs/operators/startWith';
+import {take} from 'rxjs/operators/take';
 import {MatError} from './error';
+import {matFormFieldAnimations} from './form-field-animations';
 import {MatFormFieldControl} from './form-field-control';
 import {
   getMatFormFieldDuplicatedHintError,
@@ -36,16 +37,18 @@ import {
   getMatFormFieldPlaceholderConflictError,
 } from './form-field-errors';
 import {MatHint} from './hint';
-import {MatPlaceholder} from './placeholder';
 import {MatLabel} from './label';
+import {MatPlaceholder} from './placeholder';
 import {MatPrefix} from './prefix';
 import {MatSuffix} from './suffix';
-import {matFormFieldAnimations} from './form-field-animations';
 
 
 let nextUniqueId = 0;
 
 
+export type MatFormFieldAppearance = 'legacy' | 'standard' | 'box';
+
+
 /** Container for form controls that applies Material Design styling and behavior. */
 @Component({
   moduleId: module.id,
@@ -56,10 +59,19 @@ let nextUniqueId = 0;
   // MatInput is a directive and can't have styles, so we need to include its styles here.
   // The MatInput styles are fairly minimal so it shouldn't be a big deal for people who
   // aren't using MatInput.
-  styleUrls: ['form-field.css', '../input/input.css'],
+  styleUrls: [
+    'form-field.css',
+    'form-field-box.css',
+    'form-field-legacy.css',
+    'form-field-standard.css',
+    '../input/input.css',
+  ],
   animations: [matFormFieldAnimations.transitionMessages],
   host: {
     'class': 'mat-input-container mat-form-field',
+    '[class.mat-form-field-appearance-standard]': 'appearance == "standard"',
+    '[class.mat-form-field-appearance-box]': 'appearance == "box"',
+    '[class.mat-form-field-appearance-legacy]': 'appearance == "legacy"',
     '[class.mat-input-invalid]': '_control.errorState',
     '[class.mat-form-field-invalid]': '_control.errorState',
     '[class.mat-form-field-can-float]': '_canLabelFloat',
@@ -86,6 +98,9 @@ let nextUniqueId = 0;
 export class MatFormField implements AfterViewInit, AfterContentInit, AfterContentChecked {
   private _labelOptions: LabelOptions;
 
+  /** The form-field appearance style. */
+  @Input() appearance: MatFormFieldAppearance = 'legacy';
+
   /** Color of the form field underline, based on the theme. */
   @Input() color: 'primary' | 'accent' | 'warn' = 'primary';
 
@@ -107,11 +122,11 @@ export class MatFormField implements AfterViewInit, AfterContentInit, AfterConte
 
   /** Whether the floating label should always float or not. */
   get _shouldAlwaysFloat() {
-    return this._floatLabel === 'always' && !this._showAlwaysAnimate;
+    return this.floatLabel === 'always' && !this._showAlwaysAnimate;
   }
 
   /** Whether the label can float or not. */
-  get _canLabelFloat() { return this._floatLabel !== 'never'; }
+  get _canLabelFloat() { return this.floatLabel !== 'never'; }
 
   /** State of the mat-hint and mat-error animations. */
   _subscriptAnimationState: string = '';
@@ -133,12 +148,21 @@ export class MatFormField implements AfterViewInit, AfterContentInit, AfterConte
    * @deprecated Use floatLabel instead.
    */
   @Input()
-  get floatPlaceholder(): FloatLabelType { return this._floatLabel; }
+  get floatPlaceholder(): FloatLabelType { return this.floatLabel; }
   set floatPlaceholder(value: FloatLabelType) { this.floatLabel = value; }
 
-  /** Whether the label should always float, never float or float as the user types. */
+  /**
+   * Whether the label should always float, never float or float as the user types.
+   *
+   * Note: only the legacy appearance supports the `never` option. `never` was originally added as a
+   * way to make the floating label emulate the behavior of a standard input placeholder. However
+   * the form field now supports both floating labels and placeholders. Therefore in the non-legacy
+   * appearances the `never` option has been disabled in favor of just using the placeholder.
+   */
   @Input()
-  get floatLabel(): FloatLabelType { return this._floatLabel; }
+  get floatLabel(): FloatLabelType {
+    return this.appearance !== 'legacy' && this._floatLabel === 'never' ? 'auto' : this._floatLabel;
+  }
   set floatLabel(value: FloatLabelType) {
     if (value !== this._floatLabel) {
       this._floatLabel = value || this._labelOptions.float || 'auto';
@@ -232,11 +256,14 @@ export class MatFormField implements AfterViewInit, AfterContentInit, AfterConte
   }
 
   _hideControlPlaceholder() {
-    return !this._hasLabel() || !this._shouldLabelFloat();
+    // In the legacy appearance the placeholder is promoted to a label if no label is given.
+    return this.appearance === 'legacy' && !this._hasLabel() ||
+        this._hasLabel() && !this._shouldLabelFloat();
   }
 
   _hasFloatingLabel() {
-    return this._hasLabel() || this._hasPlaceholder();
+    // In the legacy appearance the placeholder is promoted to a label if no label is given.
+    return this._hasLabel() || this.appearance === 'legacy' && this._hasPlaceholder();
   }
 
   /** Determines whether to display hints or errors. */
@@ -249,7 +276,7 @@ export class MatFormField implements AfterViewInit, AfterContentInit, AfterConte
   _animateAndLockLabel(): void {
     if (this._hasFloatingLabel() && this._canLabelFloat) {
       this._showAlwaysAnimate = true;
-      this._floatLabel = 'always';
+      this.floatLabel = 'always';
 
       fromEvent(this._label.nativeElement, 'transitionend').pipe(take(1)).subscribe(() => {
         this._showAlwaysAnimate = false;
diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts
index a74de097c758..a8893544a7c0 100644
--- a/src/lib/input/input.spec.ts
+++ b/src/lib/input/input.spec.ts
@@ -1,7 +1,7 @@
 import {Platform, PlatformModule} from '@angular/cdk/platform';
 import {createFakeEvent, dispatchFakeEvent, wrappedErrorMessage} from '@angular/cdk/testing';
 import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
-import {ComponentFixture, inject, TestBed, fakeAsync, flush} from '@angular/core/testing';
+import {ComponentFixture, fakeAsync, flush, inject, TestBed} from '@angular/core/testing';
 import {
   FormControl,
   FormGroup,
@@ -12,16 +12,17 @@ import {
   Validators,
 } from '@angular/forms';
 import {
-  MAT_LABEL_GLOBAL_OPTIONS,
-  ShowOnDirtyErrorStateMatcher,
   ErrorStateMatcher,
   FloatLabelType,
+  MAT_LABEL_GLOBAL_OPTIONS,
+  ShowOnDirtyErrorStateMatcher,
 } from '@angular/material/core';
 import {
   getMatFormFieldDuplicatedHintError,
   getMatFormFieldMissingControlError,
   getMatFormFieldPlaceholderConflictError,
   MatFormField,
+  MatFormFieldAppearance,
   MatFormFieldModule,
 } from '@angular/material/form-field';
 import {By} from '@angular/platform-browser';
@@ -1132,6 +1133,76 @@ describe('MatInput with forms', () => {
   }));
 });
 
+describe('MatInput with appearance', () => {
+  const nonLegacyAppearances: MatFormFieldAppearance[] = ['standard', 'box'];
+  let fixture: ComponentFixture<MatInputWithAppearance>;
+  let testComponent: MatInputWithAppearance;
+  let containerEl: HTMLElement;
+
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        NoopAnimationsModule,
+        PlatformModule,
+        ReactiveFormsModule,
+      ],
+      declarations: [
+        MatInputWithAppearance,
+      ],
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  beforeEach(fakeAsync(() => {
+    fixture = TestBed.createComponent(MatInputWithAppearance);
+    fixture.detectChanges();
+    testComponent = fixture.componentInstance;
+    containerEl = fixture.debugElement.query(By.css('mat-form-field')).nativeElement;
+  }));
+
+  it('legacy appearance should promote placeholder to label', fakeAsync(() => {
+    testComponent.appearance = 'legacy';
+    fixture.detectChanges();
+
+    expect(containerEl.classList).toContain('mat-form-field-appearance-legacy');
+    expect(testComponent.formField._hasFloatingLabel()).toBe(true);
+    expect(testComponent.formField._hideControlPlaceholder()).toBe(true);
+  }));
+
+  it('non-legacy appearances should not promote placeholder to label', fakeAsync(() => {
+    for (let appearance of nonLegacyAppearances) {
+      testComponent.appearance = appearance;
+      fixture.detectChanges();
+
+      expect(containerEl.classList).toContain(`mat-form-field-appearance-${appearance}`);
+      expect(testComponent.formField._hasFloatingLabel()).toBe(false);
+      expect(testComponent.formField._hideControlPlaceholder()).toBe(false);
+    }
+  }));
+
+  it('legacy appearance should respect float never', fakeAsync(() => {
+    testComponent.appearance = 'legacy';
+    fixture.detectChanges();
+
+    expect(containerEl.classList).toContain('mat-form-field-appearance-legacy');
+    expect(testComponent.formField.floatLabel).toBe('never');
+  }));
+
+  it('non-legacy appearances should not respect float never', fakeAsync(() => {
+    for (let appearance of nonLegacyAppearances) {
+      testComponent.appearance = appearance;
+      fixture.detectChanges();
+
+      expect(containerEl.classList).toContain(`mat-form-field-appearance-${appearance}`);
+      expect(testComponent.formField.floatLabel).toBe('auto');
+    }
+  }));
+});
+
 @Component({
   template: `
     <mat-form-field>
@@ -1467,3 +1538,15 @@ class MatInputWithReadonlyInput {}
 class MatInputWithLabelAndPlaceholder {
   floatLabel: FloatLabelType;
 }
+
+@Component({
+  template: `
+    <mat-form-field [appearance]="appearance" floatLabel="never">
+      <input matInput placeholder="Placeholder">
+    </mat-form-field>
+  `
+})
+class MatInputWithAppearance {
+  @ViewChild(MatFormField) formField: MatFormField;
+  appearance: MatFormFieldAppearance;
+}
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 7939c435dbd7..1a8305512d7b 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -45,6 +45,11 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
 .mat-select-arrow-wrapper {
   display: table-cell;
   vertical-align: middle;
+
+  // When used in a box appearance form-field the arrow should be centered in the box.
+  .mat-form-field-appearance-box & {
+    transform: translateY(-50%);
+  }
 }
 
 .mat-select-arrow {
@@ -100,5 +105,7 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
     // Remove the transition to prevent the placeholder
     // from overlapping when the label comes back down.
     transition: none;
+    // Prevents the '...' from showing on the parent element.
+    display: block;
   }
 }