diff --git a/src/dev-app/autocomplete/autocomplete-demo.html b/src/dev-app/autocomplete/autocomplete-demo.html
index 6f17ba4cda67..c8fd9f0cc70d 100644
--- a/src/dev-app/autocomplete/autocomplete-demo.html
+++ b/src/dev-app/autocomplete/autocomplete-demo.html
@@ -6,7 +6,7 @@
     <div>Reactive value: {{ stateCtrl.value | json }}</div>
     <div>Reactive dirty: {{ stateCtrl.dirty }}</div>
 
-    <mat-form-field floatLabel="never">
+    <mat-form-field appearance="outline" floatLabel="never">
       <mat-label>State</mat-label>
       <input matInput [matAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
       <mat-autocomplete #reactiveAuto="matAutocomplete" [displayWith]="displayFn">
@@ -33,10 +33,10 @@
     <div>Template-driven dirty: {{ modelDir ? modelDir.dirty : false }}</div>
 
     <!-- Added an ngIf below to test that autocomplete works with ngIf -->
-    <mat-form-field *ngIf="true">
+    <mat-form-field appearance="outline" *ngIf="true">
       <mat-label>State</mat-label>
-      <input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
-        (ngModelChange)="tdStates = filterStates(currentState)" [disabled]="tdDisabled">
+      <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">
           <span>{{ state.name }}</span>
@@ -57,20 +57,15 @@
   <mat-card>
     <div>Option groups (currentGroupedState): {{ currentGroupedState }}</div>
 
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>State</mat-label>
-      <input
-        matInput
-        [matAutocomplete]="groupedAuto"
-        [(ngModel)]="currentGroupedState"
-        (ngModelChange)="filteredGroupedStates = filterStateGroups(currentGroupedState)">
+      <input matInput [matAutocomplete]="groupedAuto" [(ngModel)]="currentGroupedState" (ngModelChange)="filteredGroupedStates = filterStateGroups(currentGroupedState)">
     </mat-form-field>
   </mat-card>
 </div>
 
 <mat-autocomplete #groupedAuto="matAutocomplete">
-  <mat-optgroup *ngFor="let group of filteredGroupedStates"
-    [label]="'States starting with ' + group.letter">
+  <mat-optgroup *ngFor="let group of filteredGroupedStates" [label]="'States starting with ' + group.letter">
     <mat-option *ngFor="let state of group.states" [value]="state.name">{{ state.name }}</mat-option>
   </mat-optgroup>
 </mat-autocomplete>
diff --git a/src/dev-app/baseline/baseline-demo.html b/src/dev-app/baseline/baseline-demo.html
index c021f9d37fbe..511283f92b5b 100644
--- a/src/dev-app/baseline/baseline-demo.html
+++ b/src/dev-app/baseline/baseline-demo.html
@@ -10,12 +10,12 @@
     | Text 3 |
     <mat-radio-button value="option_3">Radio 3</mat-radio-button>
     | Text 4 |
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Input</mat-label>
       <input matInput value="Text Input">
     </mat-form-field>
     | Text 5 |
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>This label is really really really long</mat-label>
       <mat-select>
         <mat-option value="option">Option</mat-option>
@@ -23,7 +23,7 @@
       </mat-select>
     </mat-form-field>
     | Text 6 |
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Input</mat-label>
       <textarea matInput cdkTextareaAutosize>Textarea&#10;Line 2</textarea>
     </mat-form-field>
@@ -44,12 +44,12 @@ <h1>
       | Text 3 |
       <mat-radio-button value="option_3">Radio 3</mat-radio-button>
       | Text 4 |
-      <mat-form-field>
+      <mat-form-field appearance="outline">
         <mat-label>Input</mat-label>
         <input matInput value="Text Input">
       </mat-form-field>
       | Text 5 |
-      <mat-form-field>
+      <mat-form-field appearance="outline">
         <mat-label>This label is really really really long</mat-label>
         <mat-select>
           <mat-option value="option">Option</mat-option>
@@ -57,7 +57,7 @@ <h1>
         </mat-select>
       </mat-form-field>
       | Text 6 |
-      <mat-form-field>
+      <mat-form-field appearance="outline">
         <mat-label>Input</mat-label>
         <textarea matInput cdkTextareaAutosize>Textarea&#10;Line 2</textarea>
       </mat-form-field>
diff --git a/src/dev-app/datepicker/datepicker-demo.html b/src/dev-app/datepicker/datepicker-demo.html
index 3abeedf1d183..0a0b4543a5f7 100644
--- a/src/dev-app/datepicker/datepicker-demo.html
+++ b/src/dev-app/datepicker/datepicker-demo.html
@@ -5,7 +5,7 @@ <h2>Options</h2>
   <mat-checkbox [(ngModel)]="yearView">Start in year view</mat-checkbox>
   <mat-checkbox [(ngModel)]="datepickerDisabled">Disable datepicker</mat-checkbox>
   <mat-checkbox [(ngModel)]="inputDisabled">Disable input</mat-checkbox>
-  <mat-form-field>
+  <mat-form-field appearance="outline">
     <mat-select [(ngModel)]="color" placeholder="Color">
       <mat-option value="primary">Primary</mat-option>
       <mat-option value="accent">Accent</mat-option>
@@ -14,26 +14,23 @@ <h2>Options</h2>
   </mat-form-field>
 </p>
 <p>
-  <mat-form-field color="accent">
+  <mat-form-field class="example-space-between" appearance="outline" color="accent">
     <mat-label>Min date</mat-label>
-    <input matInput [matDatepicker]="minDatePicker" [(ngModel)]="minDate"
-        [disabled]="inputDisabled" [max]="maxDate">
+    <input matInput [matDatepicker]="minDatePicker" [(ngModel)]="minDate" [disabled]="inputDisabled" [max]="maxDate" />
     <mat-datepicker-toggle matSuffix [for]="minDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #minDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
   </mat-form-field>
-  <mat-form-field color="accent">
+  <mat-form-field class="example-space-between" appearance="outline" color="accent">
     <mat-label>Max date</mat-label>
-    <input matInput [matDatepicker]="maxDatePicker" [(ngModel)]="maxDate"
-        [disabled]="inputDisabled" [min]="minDate">
+    <input matInput [matDatepicker]="maxDatePicker" [(ngModel)]="maxDate" [disabled]="inputDisabled" [min]="minDate" />
     <mat-datepicker-toggle matSuffix [for]="maxDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #maxDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
   </mat-form-field>
 </p>
 <p>
-  <mat-form-field color="accent">
+  <mat-form-field appearance="outline" color="accent">
     <mat-label>Start at date</mat-label>
-    <input matInput [matDatepicker]="startAtPicker" [(ngModel)]="startAt"
-        [disabled]="inputDisabled">
+    <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>
   </mat-form-field>
@@ -43,113 +40,89 @@ <h2>Result</h2>
 
 <p>
   <mat-datepicker-toggle [for]="resultPicker"></mat-datepicker-toggle>
-  <mat-form-field>
+  <mat-form-field appearance="outline">
     <mat-label>Pick a date</mat-label>
-    <input matInput
-           #resultPickerModel="ngModel"
-           [matDatepicker]="resultPicker"
-           [(ngModel)]="date"
-           [min]="minDate"
-           [max]="maxDate"
-           [matDatepickerFilter]="filterOdd ? dateFilter : null"
-           [disabled]="inputDisabled"
-           (dateInput)="onDateInput($event)"
-           (dateChange)="onDateChange($event)">
-    <mat-datepicker
-        #resultPicker
-        [touchUi]="touch"
-        [disabled]="datepickerDisabled"
-        [startAt]="startAt"
-        [startView]="yearView ? 'year' : 'month'"
-        [color]="color">
+    <input matInput #resultPickerModel="ngModel" [matDatepicker]="resultPicker" [(ngModel)]="date" [min]="minDate"
+      [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null" [disabled]="inputDisabled" (dateInput)="onDateInput($event)"
+      (dateChange)="onDateChange($event)" />
+    <mat-datepicker #resultPicker [touchUi]="touch" [disabled]="datepickerDisabled" [startAt]="startAt" [startView]="yearView ? 'year' : 'month'"
+      [color]="color">
     </mat-datepicker>
     <mat-error *ngIf="resultPickerModel.hasError('matDatepickerParse')">
-      "{{resultPickerModel.getError('matDatepickerParse').text}}" is not a valid date!
+      "{{ resultPickerModel.getError('matDatepickerParse').text }}" is not a
+      valid date!
     </mat-error>
     <mat-error *ngIf="resultPickerModel.hasError('matDatepickerMin')">Too early!</mat-error>
     <mat-error *ngIf="resultPickerModel.hasError('matDatepickerMax')">Too late!</mat-error>
     <mat-error *ngIf="resultPickerModel.hasError('matDatepickerFilter')">Date unavailable!</mat-error>
   </mat-form-field>
 </p>
-<p>Last input: {{lastDateInput}}</p>
-<p>Last change: {{lastDateChange}}</p>
-<br>
+<p>Last input: {{ lastDateInput }}</p>
+<p>Last change: {{ lastDateChange }}</p>
+<br />
 <p>
-  <input #resultPickerModel2
-         [matDatepicker]="resultPicker2"
-         [(ngModel)]="date"
-         [min]="minDate"
-         [max]="maxDate"
-         [disabled]="inputDisabled"
-         [matDatepickerFilter]="filterOdd ? dateFilter : null"
-         placeholder="Pick a date">
+  <mat-form-field appearance="outline">
+    <mat-label>Pick a date</mat-label>
+    <input matInput #resultPickerModel2 [matDatepicker]="resultPicker2" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
+      [disabled]="inputDisabled" [matDatepickerFilter]="filterOdd ? dateFilter : null" placeholder="Pick a date" />
+    <mat-datepicker #resultPicker2 [touchUi]="touch" [disabled]="datepickerDisabled" [startAt]="startAt" [startView]="yearView ? 'year' : 'month'">
+    </mat-datepicker>
+  </mat-form-field>
   <mat-datepicker-toggle [for]="resultPicker2"></mat-datepicker-toggle>
-  <mat-datepicker
-      #resultPicker2
-      [touchUi]="touch"
-      [disabled]="datepickerDisabled"
-      [startAt]="startAt"
-      [startView]="yearView ? 'year' : 'month'">
-  </mat-datepicker>
 </p>
 
 <h2>Input disabled datepicker</h2>
 <p>
   <mat-datepicker-toggle [for]="datePicker1"></mat-datepicker-toggle>
-  <mat-form-field>
+  <mat-form-field appearance="outline">
     <mat-label>Input disabled</mat-label>
     <input matInput [matDatepicker]="datePicker1" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
-           [matDatepickerFilter]="filterOdd ? dateFilter : null" disabled>
-    <mat-datepicker #datePicker1 [touchUi]="touch" [startAt]="startAt"
-                    [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
+      [matDatepickerFilter]="filterOdd ? dateFilter : null" disabled />
+    <mat-datepicker #datePicker1 [touchUi]="touch" [startAt]="startAt" [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
 </p>
 
 <h2>Input disabled via FormControl</h2>
 <p>
   <mat-datepicker-toggle [for]="datePicker2"></mat-datepicker-toggle>
-  <mat-form-field>
+  <mat-form-field appearance="outline">
     <mat-label>FormControl disabled</mat-label>
-    <input matInput [matDatepicker]="datePicker2" [formControl]="dateCtrl" [min]="minDate"
-           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
-    <mat-datepicker #datePicker2 [touchUi]="touch" [startAt]="startAt"
-                    [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
+    <input matInput [matDatepicker]="datePicker2" [formControl]="dateCtrl" [min]="minDate" [max]="maxDate"
+      [matDatepickerFilter]="filterOdd ? dateFilter : null" />
+    <mat-datepicker #datePicker2 [touchUi]="touch" [startAt]="startAt" [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
 
   <button mat-button (click)="dateCtrl.disabled ? dateCtrl.enable() : dateCtrl.disable()">
-    {{dateCtrl.disabled ? 'Enable' : 'Disable'}} FormControl
+    {{ dateCtrl.disabled ? 'Enable' : 'Disable' }} FormControl
   </button>
 </p>
 
 <h2>Input disabled, datepicker popup enabled</h2>
 <p>
   <mat-datepicker-toggle [for]="datePicker3"></mat-datepicker-toggle>
-  <mat-form-field>
+  <mat-form-field appearance="outline">
     <mat-label>Input disabled, datepicker enabled</mat-label>
-    <input matInput disabled [matDatepicker]="datePicker3" [(ngModel)]="date" [min]="minDate"
-           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
-    <mat-datepicker #datePicker3 [touchUi]="touch" [disabled]="false" [startAt]="startAt"
-                    [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
+    <input matInput disabled [matDatepicker]="datePicker3" [(ngModel)]="date" [min]="minDate" [max]="maxDate"
+      [matDatepickerFilter]="filterOdd ? dateFilter : null" />
+    <mat-datepicker #datePicker3 [touchUi]="touch" [disabled]="false" [startAt]="startAt" [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
 </p>
 
 <h2>Datepicker with value property binding</h2>
 <p>
   <mat-datepicker-toggle [for]="datePicker4"></mat-datepicker-toggle>
-  <mat-form-field>
+  <mat-form-field appearance="outline">
     <mat-label>Value binding</mat-label>
-    <input matInput [matDatepicker]="datePicker4" [value]="date" [min]="minDate"
-           [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null">
-    <mat-datepicker #datePicker4 [touchUi]="touch" [startAt]="startAt"
-                    [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
+    <input matInput [matDatepicker]="datePicker4" [value]="date" [min]="minDate" [max]="maxDate" [matDatepickerFilter]="filterOdd ? dateFilter : null" />
+    <mat-datepicker #datePicker4 [touchUi]="touch" [startAt]="startAt" [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
 </p>
 
 <h2>Datepicker with custom header</h2>
 <p>
-  <mat-form-field>
+  <mat-form-field appearance="outline">
     <mat-label>Custom calendar header</mat-label>
-    <input matInput [matDatepicker]="customHeaderPicker">
+    <input matInput [matDatepicker]="customHeaderPicker" />
     <mat-datepicker-toggle matSuffix [for]="customHeaderPicker"></mat-datepicker-toggle>
     <mat-datepicker #customHeaderPicker [calendarHeaderComponent]="customHeader"></mat-datepicker>
   </mat-form-field>
@@ -157,9 +130,9 @@ <h2>Datepicker with custom header</h2>
 
 <h2>Datepicker with custom header extending the default header</h2>
 <p>
-  <mat-form-field>
+  <mat-form-field appearance="outline">
     <mat-label>Custom calendar header extending default</mat-label>
-    <input matInput [matDatepicker]="customHeaderNgContentPicker">
+    <input matInput [matDatepicker]="customHeaderNgContentPicker" />
     <mat-datepicker-toggle matSuffix [for]="customHeaderNgContentPicker"></mat-datepicker-toggle>
     <mat-datepicker #customHeaderNgContentPicker [calendarHeaderComponent]="customHeaderNgContent"></mat-datepicker>
   </mat-form-field>
diff --git a/src/dev-app/datepicker/datepicker-demo.scss b/src/dev-app/datepicker/datepicker-demo.scss
index 1dc57962c1c4..fce4c2a81106 100644
--- a/src/dev-app/datepicker/datepicker-demo.scss
+++ b/src/dev-app/datepicker/datepicker-demo.scss
@@ -2,3 +2,6 @@ mat-calendar {
   width: 300px;
 }
 
+.example-space-between {
+  margin: 5px;
+}
diff --git a/src/dev-app/dialog/dialog-demo.html b/src/dev-app/dialog/dialog-demo.html
index 7605af0d8911..2429588d0551 100644
--- a/src/dev-app/dialog/dialog-demo.html
+++ b/src/dev-app/dialog/dialog-demo.html
@@ -14,34 +14,34 @@ <h1>Dialog demo</h1>
   <mat-card-content>
     <h2>Dialog dimensions</h2>
 
-    <p>
-      <mat-form-field>
+    <p class="example-space-between">
+      <mat-form-field appearance="outline">
         <mat-label>Width</mat-label>
         <input matInput [(ngModel)]="config.width">
       </mat-form-field>
-      <mat-form-field>
+      <mat-form-field appearance="outline">
         <mat-label>Height</mat-label>
         <input matInput [(ngModel)]="config.height">
       </mat-form-field>
     </p>
 
-    <p>
-      <mat-form-field>
+    <p class="example-space-between">
+      <mat-form-field appearance="outline" class="example-margin">
         <mat-label>Min width</mat-label>
         <input matInput [(ngModel)]="config.minWidth">
       </mat-form-field>
-      <mat-form-field>
+      <mat-form-field appearance="outline" class="example-margin">
         <mat-label>Min height</mat-label>
         <input matInput [(ngModel)]="config.minHeight">
       </mat-form-field>
     </p>
 
-    <p>
-      <mat-form-field>
+    <p class="example-space-between">
+      <mat-form-field appearance="outline" class="example-margin">
         <mat-label>Max width</mat-label>
         <input matInput [(ngModel)]="config.maxWidth">
       </mat-form-field>
-      <mat-form-field>
+      <mat-form-field appearance="outline" class="example-margin">
         <mat-label>Max height</mat-label>
         <input matInput [(ngModel)]="config.maxHeight">
       </mat-form-field>
@@ -49,23 +49,23 @@ <h2>Dialog dimensions</h2>
 
     <h2>Dialog position</h2>
 
-    <p>
-      <mat-form-field>
+    <p class="example-space-between">
+      <mat-form-field appearance="outline" class="example-margin">
         <mat-label>Top</mat-label>
         <input matInput [(ngModel)]="config.position.top" (change)="config.position.bottom = ''">
       </mat-form-field>
-      <mat-form-field>
+      <mat-form-field appearance="outline" class="example-margin">
         <mat-label>Bottom</mat-label>
         <input matInput [(ngModel)]="config.position.bottom" (change)="config.position.top = ''">
       </mat-form-field>
     </p>
 
-    <p>
-      <mat-form-field>
+    <p class="example-space-between">
+      <mat-form-field appearance="outline" class="example-margin">
         <mat-label>Left</mat-label>
         <input matInput [(ngModel)]="config.position.left" (change)="config.position.right = ''">
       </mat-form-field>
-      <mat-form-field>
+      <mat-form-field appearance="outline" class="example-margin">
         <mat-label>Right</mat-label>
         <input matInput [(ngModel)]="config.position.right" (change)="config.position.left = ''">
       </mat-form-field>
@@ -73,8 +73,8 @@ <h2>Dialog position</h2>
 
     <h2>Dialog backdrop</h2>
 
-    <p>
-      <mat-form-field>
+    <p class="example-space-between">
+      <mat-form-field appearance="outline" class="example-margin">
         <mat-label>Backdrop class</mat-label>
         <input matInput [(ngModel)]="config.backdropClass">
       </mat-form-field>
@@ -84,8 +84,8 @@ <h2>Dialog backdrop</h2>
 
     <h2>Other options</h2>
 
-    <p>
-      <mat-form-field>
+    <p class="example-space-between">
+      <mat-form-field appearance="outline" class="example-margin">
         <mat-label>Button alignment</mat-label>
         <mat-select [(ngModel)]="actionsAlignment">
           <mat-option>Start</mat-option>
@@ -95,33 +95,34 @@ <h2>Other options</h2>
       </mat-form-field>
     </p>
 
-    <p>
-      <mat-form-field>
+    <p class="example-space-between">
+      <mat-form-field appearance="outline" class="example-margin">
         <mat-label>Dialog message</mat-label>
         <input matInput [(ngModel)]="config.data.message">
       </mat-form-field>
     </p>
 
-    <p>
+    <p class="example-space-between">
       <mat-checkbox [(ngModel)]="config.disableClose">Disable close</mat-checkbox>
     </p>
   </mat-card-content>
 </mat-card>
 
-<p>Last afterClosed result: {{lastAfterClosedResult}}</p>
-<p>Last beforeClose result: {{lastBeforeCloseResult}}</p>
+<p class="example-space-between">Last afterClosed result: {{lastAfterClosedResult}}</p>
+<p class="example-space-between">Last beforeClose result: {{lastBeforeCloseResult}}</p>
 
 <ng-template let-data let-dialogRef="dialogRef">
   I'm a template dialog. I've been opened {{numTemplateOpens}} times!
 
-  <p>It's Jazz!</p>
+  <p class="example-space-between">It's Jazz!</p>
 
-  <mat-form-field>
+  <mat-form-field appearance="outline" class="example-margin">
     <mat-label>How much?</mat-label>
     <input matInput #howMuch>
   </mat-form-field>
 
-  <p> {{ data.message }} </p>
+  <p class="example-space-between"> {{ data.message }} </p>
   <button type="button" (click)="dialogRef.close(howMuch.value)">Close dialog</button>
-  <button (click)="dialogRef.updateSize('500px', '500px').updatePosition({top: '25px', left: '25px'});">Change dimensions</button>
+  <button (click)="dialogRef.updateSize('500px', '500px').updatePosition({top: '25px', left: '25px'});">Change
+    dimensions</button>
 </ng-template>
diff --git a/src/dev-app/dialog/dialog-demo.scss b/src/dev-app/dialog/dialog-demo.scss
index c57cae78b6b3..26f9a09cdd8c 100644
--- a/src/dev-app/dialog/dialog-demo.scss
+++ b/src/dev-app/dialog/dialog-demo.scss
@@ -11,3 +11,8 @@ button {
     margin-right: 0;
   }
 }
+
+.example-space-between {
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts
index d79a59931bdd..4998f65d87ab 100644
--- a/src/dev-app/dialog/dialog-demo.ts
+++ b/src/dev-app/dialog/dialog-demo.ts
@@ -93,7 +93,7 @@ export class DialogDemo {
     <div cdkDrag cdkDragRootElement=".cdk-overlay-pane">
       <p>It's Jazz!</p>
 
-      <mat-form-field>
+      <mat-form-field appearance="outline">
         <mat-label>How much?</mat-label>
         <input matInput #howMuch>
       </mat-form-field>
diff --git a/src/dev-app/drag-drop/drag-drop-demo.html b/src/dev-app/drag-drop/drag-drop-demo.html
index af30924db583..ffe83cbd2098 100644
--- a/src/dev-app/drag-drop/drag-drop-demo.html
+++ b/src/dev-app/drag-drop/drag-drop-demo.html
@@ -2,11 +2,7 @@
   <div class="demo-list">
 
     <h2>To do</h2>
-    <div
-      cdkDropList
-      (cdkDropListDropped)="drop($event)"
-      [cdkDropListLockAxis]="axisLock"
-      [cdkDropListData]="todo">
+    <div cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListLockAxis]="axisLock" [cdkDropListData]="todo">
       <div *ngFor="let item of todo" cdkDrag>
         {{item}}
         <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
@@ -16,11 +12,7 @@ <h2>To do</h2>
 
   <div class="demo-list">
     <h2>Done</h2>
-    <div
-      cdkDropList
-      (cdkDropListDropped)="drop($event)"
-      [cdkDropListLockAxis]="axisLock"
-      [cdkDropListData]="done">
+    <div cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListLockAxis]="axisLock" [cdkDropListData]="done">
       <div *ngFor="let item of done" cdkDrag>
         {{item}}
         <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
@@ -32,11 +24,7 @@ <h2>Done</h2>
 <div>
   <div class="demo-list demo-list-horizontal">
     <h2>Horizontal list</h2>
-    <div
-      cdkDropList
-      cdkDropListOrientation="horizontal"
-      (cdkDropListDropped)="drop($event)"
-      [cdkDropListLockAxis]="axisLock"
+    <div cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)" [cdkDropListLockAxis]="axisLock"
       [cdkDropListData]="horizontalData">
       <div *ngFor="let item of horizontalData" cdkDrag>
         {{item}}
@@ -60,7 +48,7 @@ <h2>Data</h2>
 
 <div>
   <h2>Axis locking</h2>
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>Lock position along axis</mat-label>
     <mat-select [(ngModel)]="axisLock">
       <mat-option>None</mat-option>
diff --git a/src/dev-app/expansion/expansion-demo.html b/src/dev-app/expansion/expansion-demo.html
index 30bf4918a84d..bebb4eaab167 100644
--- a/src/dev-app/expansion/expansion-demo.html
+++ b/src/dev-app/expansion/expansion-demo.html
@@ -1,8 +1,6 @@
 <h1>Single Expansion Panel</h1>
 
-<mat-expansion-panel class="demo-expansion-width" #myPanel
-                     (afterExpand)="addEvent('afterExpand')"
-                     (afterCollapse)="addEvent('afterCollapse')">
+<mat-expansion-panel class="demo-expansion-width" #myPanel (afterExpand)="addEvent('afterExpand')" (afterCollapse)="addEvent('afterCollapse')">
   <mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
     <mat-panel-description>This is a panel description.</mat-panel-description>
     <mat-panel-title>Panel Title</mat-panel-title>
@@ -20,12 +18,12 @@ <h1>Single Expansion Panel</h1>
 </mat-expansion-panel>
 
 <br>
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Collapsed height</mat-label>
   <input matInput [(ngModel)]="collapsedHeight">
 </mat-form-field>
 
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Expanded height</mat-label>
   <input matInput [(ngModel)]="expandedHeight">
 </mat-form-field>
@@ -62,8 +60,7 @@ <h1>matAccordion</h1>
   </div>
 </div>
 <br>
-<mat-accordion [displayMode]="displayMode" [multi]="multi" [hideToggle]="hideToggle"
-               class="demo-expansion-width">
+<mat-accordion [displayMode]="displayMode" [multi]="multi" [hideToggle]="hideToggle" class="demo-expansion-width">
   <mat-expansion-panel #panel1>
     <mat-expansion-panel-header>Section 1</mat-expansion-panel-header>
     <p>This is the content text that makes sense here.</p>
@@ -115,4 +112,3 @@ <h1>cdkAccordion</h1>
     <p *ngIf="item3.expanded">I only show if item 3 is expanded</p>
   </cdk-accordion-item>
 </cdk-accordion>
-
diff --git a/src/dev-app/input/input-demo.html b/src/dev-app/input/input-demo.html
index 5defa027774d..ce39a1fa5839 100644
--- a/src/dev-app/input/input-demo.html
+++ b/src/dev-app/input/input-demo.html
@@ -1,60 +1,75 @@
 <mat-card class="demo-card demo-basic">
+  <mat-toolbar color="primary"> Form Field Appearance </mat-toolbar>
+  <mat-card-content>
+    <mat-form-field [appearance]="appearance">
+      <mat-label>Change Control Appearance</mat-label>
+      <mat-select name="appearance" [(ngModel)]="appearance">
+        <mat-option value="outline">Outline</mat-option>
+        <mat-option value="fill">Fill</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </mat-card-content>
   <mat-toolbar color="primary">Basic</mat-toolbar>
   <mat-card-content>
     <form>
-      <mat-form-field class="demo-full-width">
+
+      <mat-form-field [appearance]="appearance" class="demo-full-width">
         <mat-label>Company (disabled)</mat-label>
         <input matNativeControl disabled value="Google">
       </mat-form-field>
 
-      <table style="width: 100%" cellspacing="0"><tr>
-        <td>
-          <mat-form-field style="width: 100%" floatLabel="never">
-            <mat-label>First name</mat-label>
-            <input matInput>
-          </mat-form-field>
-        </td>
-        <td>
-          <mat-form-field style="width: 100%">
-            <mat-label>Long last name that will be truncated</mat-label>
-            <input matInput>
-          </mat-form-field>
-        </td>
-      </tr></table>
+      <table style="width: 100%" cellspacing="0">
+        <tr>
+          <td>
+            <mat-form-field [appearance]="appearance" style="width: 100%" floatLabel="never">
+              <mat-label>First name</mat-label>
+              <input matInput>
+            </mat-form-field>
+          </td>
+          <td>
+            <mat-form-field [appearance]="appearance" style="width: 100%">
+              <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">
+        <mat-form-field [appearance]="appearance" class="demo-full-width">
           <mat-label>Address</mat-label>
           <textarea matInput>1600 Amphitheatre Pkway</textarea>
         </mat-form-field>
-        <mat-form-field class="demo-full-width">
+        <mat-form-field [appearance]="appearance" class="demo-full-width">
           <mat-label>Address 2</mat-label>
           <textarea matNativeControl></textarea>
         </mat-form-field>
       </p>
-      <table style="width: 100%" cellspacing="0"><tr>
-        <td>
-          <mat-form-field class="demo-full-width">
-            <mat-label>City</mat-label>
-            <input matInput value="Mountain View">
-          </mat-form-field>
-        </td>
-        <td>
-          <mat-form-field class="demo-full-width">
-            <mat-label>State</mat-label>
-            <input matInput maxLength="2" value="CA">
-          </mat-form-field>
-        </td>
-        <td>
-          <mat-form-field class="demo-full-width">
-            <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>
-            </mat-hint>
-          </mat-form-field>
-        </td>
-      </tr></table>
+      <table style="width: 100%" cellspacing="0">
+        <tr>
+          <td>
+            <mat-form-field [appearance]="appearance" class="demo-full-width">
+              <mat-label>City</mat-label>
+              <input matInput value="Mountain View">
+            </mat-form-field>
+          </td>
+          <td>
+            <mat-form-field [appearance]="appearance" class="demo-full-width">
+              <mat-label>State</mat-label>
+              <input matInput maxLength="2" value="CA">
+            </mat-form-field>
+          </td>
+          <td>
+            <mat-form-field [appearance]="appearance" class="demo-full-width">
+              <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>
+              </mat-hint>
+            </mat-form-field>
+          </td>
+        </tr>
+      </table>
     </form>
   </mat-card-content>
 </mat-card>
@@ -65,13 +80,13 @@
     <h4>Regular</h4>
 
     <p>
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Example</mat-label>
         <input matInput [(ngModel)]="errorMessageExample1" required>
         <mat-error>This field is required</mat-error>
       </mat-form-field>
 
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Email</mat-label>
         <input matInput [formControl]="emailFormControl">
         <mat-error *ngIf="emailFormControl.hasError('required')">
@@ -85,7 +100,7 @@ <h4>Regular</h4>
 
     <h4>With hint</h4>
 
-    <mat-form-field>
+    <mat-form-field [appearance]="appearance">
       <mat-label>Example</mat-label>
       <input matInput [(ngModel)]="errorMessageExample2" required>
       <mat-error>This field is required</mat-error>
@@ -96,7 +111,7 @@ <h4>With hint</h4>
     <form novalidate>
       <h4>Inside a form</h4>
 
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Example</mat-label>
         <input matInput name="example" [(ngModel)]="errorMessageExample3" required>
         <mat-error>This field is required</mat-error>
@@ -106,12 +121,9 @@ <h4>Inside a form</h4>
     </form>
 
     <h4>With a custom error function</h4>
-    <mat-form-field>
+    <mat-form-field [appearance]="appearance">
       <mat-label>Example</mat-label>
-      <input matInput
-        [(ngModel)]="errorMessageExample4"
-        [errorStateMatcher]="customErrorStateMatcher"
-        required>
+      <input matInput [(ngModel)]="errorMessageExample4" [errorStateMatcher]="customErrorStateMatcher" required>
       <mat-error>This field is required</mat-error>
     </mat-form-field>
 
@@ -122,7 +134,7 @@ <h4>With a custom error function</h4>
   <mat-toolbar color="primary">Prefix + Suffix</mat-toolbar>
   <mat-card-content>
     <h4>Text</h4>
-    <mat-form-field class="demo-text-align-end">
+    <mat-form-field [appearance]="appearance" class="demo-text-align-end">
       <mat-label>Amount</mat-label>
       <input matInput>
       <span matPrefix>$&nbsp;</span>
@@ -130,7 +142,7 @@ <h4>Text</h4>
     </mat-form-field>
 
     <h4>Icons</h4>
-    <mat-form-field>
+    <mat-form-field [appearance]="appearance">
       <mat-label>Amount</mat-label>
       <input matInput>
       <mat-icon matPrefix>attach_money</mat-icon>
@@ -138,11 +150,15 @@ <h4>Icons</h4>
     </mat-form-field>
 
     <h4>Icon buttons</h4>
-    <mat-form-field>
+    <mat-form-field [appearance]="appearance">
       <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>
+      <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>
   </mat-card-content>
 </mat-card>
@@ -151,45 +167,45 @@ <h4>Icon buttons</h4>
   <mat-toolbar color="primary">Divider Colors</mat-toolbar>
   <mat-card-content>
     <h4>Input</h4>
-    <mat-form-field color="primary" >
+    <mat-form-field [appearance]="appearance" color="primary">
       <mat-label>Default color</mat-label>
       <input matInput value="example">
     </mat-form-field>
-    <mat-form-field color="accent">
+    <mat-form-field [appearance]="appearance" color="accent">
       <mat-label>Accent color</mat-label>
       <input matInput value="example">
     </mat-form-field>
-    <mat-form-field color="warn">
+    <mat-form-field [appearance]="appearance" color="warn">
       <mat-label>Warn color</mat-label>
       <input matInput value="example">
     </mat-form-field>
 
     <h4>Textarea</h4>
-    <mat-form-field color="primary">
+    <mat-form-field [appearance]="appearance" color="primary">
       <mat-label>Default color</mat-label>
       <textarea matInput>example</textarea>
     </mat-form-field>
-    <mat-form-field color="accent">
+    <mat-form-field [appearance]="appearance" color="accent">
       <mat-label>Accent color</mat-label>
       <textarea matInput>example</textarea>
     </mat-form-field>
-    <mat-form-field color="warn">
+    <mat-form-field [appearance]="appearance" color="warn">
       <mat-label>Warn color</mat-label>
       <textarea matInput>example</textarea>
     </mat-form-field>
 
     <h4>With error</h4>
-    <mat-form-field color="primary" >
+    <mat-form-field [appearance]="appearance" color="primary">
       <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">
+    <mat-form-field [appearance]="appearance" color="accent">
       <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">
+    <mat-form-field [appearance]="appearance" color="warn">
       <mat-label>Warn color</mat-label>
       <input matInput [(ngModel)]="dividerColorExample3" required>
       <mat-error>This field is required</mat-error>
@@ -202,12 +218,9 @@ <h4>With error</h4>
   <mat-card-content>
     <h4>Input</h4>
     <p>
-      <mat-form-field class="demo-full-width">
+      <mat-form-field [appearance]="appearance" class="demo-full-width">
         <mat-label>Character count (100 max)</mat-label>
-        <input matInput
-               #characterCountInputHintExample
-               maxLength="100"
-               value="Hello world. How are you?">
+        <input matInput #characterCountInputHintExample maxLength="100" value="Hello world. How are you?">
         <mat-hint align="end" aria-live="polite">
           {{characterCountInputHintExample.value.length}} / 100
         </mat-hint>
@@ -216,11 +229,9 @@ <h4>Input</h4>
 
     <h4>Textarea</h4>
     <p>
-      <mat-form-field class="demo-full-width">
+      <mat-form-field [appearance]="appearance" class="demo-full-width">
         <mat-label>Character count (100 max)</mat-label>
-        <textarea matInput
-                  #characterCountTextareaHintExample
-                  maxLength="100">Hello world. How are you?</textarea>
+        <textarea matInput #characterCountTextareaHintExample maxLength="100">Hello world. How are you?</textarea>
         <mat-hint align="end" aria-live="polite">
           {{characterCountTextareaHintExample.value.length}} / 100
         </mat-hint>
@@ -233,7 +244,7 @@ <h4>Textarea</h4>
   <mat-toolbar color="primary">
     <span>
       Hello&nbsp;
-      <mat-form-field color="accent">
+      <mat-form-field [appearance]="appearance" color="accent">
         <mat-label>First name</mat-label>
         <input matInput [(ngModel)]="name" type="text">
       </mat-form-field>,
@@ -242,37 +253,37 @@ <h4>Textarea</h4>
   </mat-toolbar>
   <mat-card-content>
     <p>
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Disabled field</mat-label>
         <input matInput disabled value="Value">
       </mat-form-field>
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Required field</mat-label>
         <input matInput required>
       </mat-form-field>
     </p>
     <p>
-      <mat-form-field style="width: 100%">
+      <mat-form-field [appearance]="appearance" style="width: 100%">
         <mat-label>100% width label</mat-label>
         <input matInput>
       </mat-form-field>
     </p>
     <p>
-      <mat-form-field style="width: 100%">
+      <mat-form-field [appearance]="appearance" style="width: 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%">
+      <mat-form-field [appearance]="appearance" hintLabel="Hint label" style="width: 100%">
         <mat-label>Show hint label</mat-label>
         <input matInput>
       </mat-form-field>
     </p>
 
     <p>
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <input matInput>
         <mat-label>
           I <mat-icon>favorite</mat-icon> <b>bold</b> label
@@ -283,14 +294,14 @@ <h4>Textarea</h4>
       </mat-form-field>
     </p>
     <p>
-      <mat-form-field hintLabel="Hint label" style="width: 100%">
+      <mat-form-field [appearance]="appearance" hintLabel="Hint label" style="width: 100%">
         <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">
+      <mat-form-field [appearance]="appearance" style="margin-bottom: 4em">
         <mat-label>Enter text to count</mat-label>
         <textarea matInput #longHint></textarea>
         <mat-hint>
@@ -304,24 +315,20 @@ <h4>Textarea</h4>
     </p>
     <p>
       <mat-checkbox [(ngModel)]="color">Check to change the color:</mat-checkbox>
-      <mat-form-field [color]="color ? 'primary' : 'accent'">
+      <mat-form-field [appearance]="appearance" [color]="color ? 'primary' : 'accent'">
         <input matInput [placeholder]="color ? 'Primary color' : 'Accent color'">
       </mat-form-field>
     </p>
     <p>
       <mat-checkbox [(ngModel)]="requiredField"> Check to make required:</mat-checkbox>
-      <mat-form-field>
-        <input matInput
-               [required]="requiredField"
-               [placeholder]="requiredField ? 'Required field' : 'Not required field'">
+      <mat-form-field [appearance]="appearance">
+        <input matInput [required]="requiredField" [placeholder]="requiredField ? 'Required field' : 'Not required field'">
       </mat-form-field>
     </p>
     <p>
       <mat-checkbox [(ngModel)]="hideRequiredMarker">Check to hide the required marker:</mat-checkbox>
-      <mat-form-field [hideRequiredMarker]="hideRequiredMarker" style="width: 300px">
-        <input matInput
-               required
-               [placeholder]="hideRequiredMarker ?
+      <mat-form-field [appearance]="appearance" [hideRequiredMarker]="hideRequiredMarker" style="width: 300px">
+        <input matInput required [placeholder]="hideRequiredMarker ?
                    'Required Without Marker' : 'Required With Marker'">
       </mat-form-field>
     </p>
@@ -334,43 +341,45 @@ <h4>Textarea</h4>
     </p>
 
     <p>
-      <mat-form-field [floatLabel]="floatingLabel">
+      <mat-form-field [appearance]="appearance" [floatLabel]="floatingLabel">
         <mat-label>Label</mat-label>
         <input matInput>
       </mat-form-field>
     </p>
 
     <p>
-      <mat-form-field [floatLabel]="floatingLabel">
+      <mat-form-field [appearance]="appearance" [floatLabel]="floatingLabel">
         <mat-label>What is your favorite color?</mat-label>
         <input matInput type="color" value="#00ff00">
       </mat-form-field>
     </p>
 
     <p>
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <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">
+      <mat-form-field [appearance]="appearance" class="demo-text-align-end">
         <mat-label>Suffixed</mat-label>
         <input matInput value="123">
         <span matSuffix>.00 €</span>
       </mat-form-field>
-      <br/>
+      <br />
       Both:
-      <mat-form-field class="demo-text-align-end">
+      <mat-form-field [appearance]="appearance" class="demo-text-align-end">
         <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 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>
     </p>
 
     <p>
-      Empty: <mat-form-field><input matInput></mat-form-field>
-      <label>Label: <mat-form-field><input matInput></mat-form-field></label>
+      Empty: <mat-form-field [appearance]="appearance"><input matInput></mat-form-field>
+      <label>Label: <mat-form-field [appearance]="appearance"><input matInput></mat-form-field></label>
     </p>
   </mat-card-content>
 </mat-card>
@@ -380,22 +389,20 @@ <h4>Textarea</h4>
   <mat-card-content>
     <table width="100%">
       <thead>
-      <td>Table</td>
-      <td colspan="3">
-        <button (click)="addABunch(5)">Add 5</button>
-        <button (click)="addABunch(10)">Add 10</button>
-        <button (click)="addABunch(100)">Add 100</button>
-        <button (click)="addABunch(1000)">Add 1000</button>
-      </td>
+        <td>Table</td>
+        <td colspan="3">
+          <button (click)="addABunch(5)">Add 5</button>
+          <button (click)="addABunch(10)">Add 10</button>
+          <button (click)="addABunch(100)">Add 100</button>
+          <button (click)="addABunch(1000)">Add 1000</button>
+        </td>
       </thead>
       <tr *ngFor="let item of items; let i = index">
         <td>{{i+1}}</td>
         <td>
-          <mat-form-field>
+          <mat-form-field [appearance]="appearance">
             <mat-label>Value</mat-label>
-            <input matInput
-                   type="number"
-                   [(ngModel)]="items[i].value">
+            <input matInput type="number" [(ngModel)]="items[i].value">
           </mat-form-field>
         </td>
         <td>
@@ -410,23 +417,22 @@ <h4>Textarea</h4>
 <mat-card class="demo-card demo-basic">
   <mat-toolbar color="primary">Forms</mat-toolbar>
   <mat-card-content>
-    <mat-form-field>
+    <mat-form-field [appearance]="appearance">
       <mat-label>Reactive</mat-label>
       <input matInput [formControl]="formControl">
     </mat-form-field>
-    <mat-form-field>
+    <mat-form-field [appearance]="appearance">
       <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()">
+    <button mat-raised-button color="primary" (click)="formControl.enabled ? formControl.disable() : formControl.enable()">
       DISABLE REACTIVE CTRL
     </button>
     <button mat-raised-button color="primary" (click)="ctrlDisabled = !ctrlDisabled">
       DISABLE TD CTRL
     </button>
     <div>
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Delayed value</mat-label>
         <input matInput [formControl]="delayedFormControl">
       </mat-form-field>
@@ -440,35 +446,35 @@ <h4>Textarea</h4>
 
   <mat-card-content>
     <div>
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <input matInput [formControl]="placeholderTestControl">
       </mat-form-field>
 
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <input matInput [formControl]="placeholderTestControl" placeholder="Only placeholder">
       </mat-form-field>
 
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Only label</mat-label>
         <input matInput [formControl]="placeholderTestControl">
       </mat-form-field>
 
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Label and placeholder</mat-label>
         <input matInput [formControl]="placeholderTestControl" placeholder="This is the placeholder">
       </mat-form-field>
 
-      <mat-form-field floatLabel="always">
+      <mat-form-field [appearance]="appearance" floatLabel="always">
         <mat-label>Always float</mat-label>
         <input matInput [formControl]="placeholderTestControl" placeholder="This is the placeholder">
       </mat-form-field>
 
-      <mat-form-field floatLabel="never">
+      <mat-form-field [appearance]="appearance" floatLabel="never">
         <mat-label>Never float</mat-label>
         <input matInput [formControl]="placeholderTestControl" placeholder="This is the placeholder">
       </mat-form-field>
 
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Label and placeholder element</mat-label>
         <mat-placeholder>The placeholder element</mat-placeholder>
         <input matInput [formControl]="placeholderTestControl">
@@ -476,47 +482,47 @@ <h4>Textarea</h4>
     </div>
 
     <div>
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-select [formControl]="placeholderTestControl">
           <mat-option value="Value">Value</mat-option>
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-select [formControl]="placeholderTestControl" placeholder="Only placeholder">
           <mat-option value="Value">Value</mat-option>
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Only label</mat-label>
         <mat-select [formControl]="placeholderTestControl">
           <mat-option value="Value">Value</mat-option>
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Label and placeholder</mat-label>
         <mat-select [formControl]="placeholderTestControl" placeholder="This is the placeholder">
           <mat-option value="Value">Value</mat-option>
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field floatLabel="always">
+      <mat-form-field [appearance]="appearance" floatLabel="always">
         <mat-label>Always float</mat-label>
         <mat-select [formControl]="placeholderTestControl" placeholder="This is the placeholder">
           <mat-option value="Value">Value</mat-option>
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field floatLabel="never">
+      <mat-form-field [appearance]="appearance" floatLabel="never">
         <mat-label>Never float</mat-label>
         <mat-select [formControl]="placeholderTestControl" placeholder="This is the placeholder">
           <mat-option value="Value">Value</mat-option>
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Label and placeholder element</mat-label>
         <mat-placeholder>The placeholder element</mat-placeholder>
         <mat-select [formControl]="placeholderTestControl">
@@ -525,15 +531,9 @@ <h4>Textarea</h4>
       </mat-form-field>
     </div>
 
-    <button
-      mat-raised-button
-      color="primary"
-      (click)="togglePlaceholderTestValue()">Toggle value</button>
+    <button mat-raised-button color="primary" (click)="togglePlaceholderTestValue()">Toggle value</button>
 
-    <button
-      mat-raised-button
-      color="primary"
-      (click)="togglePlaceholderTestTouched()">Toggle touched</button>
+    <button mat-raised-button color="primary" (click)="togglePlaceholderTestTouched()">Toggle touched</button>
   </mat-card-content>
 </mat-card>
 
@@ -548,15 +548,12 @@ <h3>Regular &lt;textarea&gt; with maxRows and minRows</h3>
       <label>minRows<input type="number" #minRows class="demo-rows" (input)="1+1"></label> &nbsp;
       <label>maxRows<input type="number" #maxRows class="demo-rows" (input)="1+1"></label>
     </div>
-    <textarea class="demo-textarea"
-        cdkTextareaAutosize
-        [cdkAutosizeMinRows]="minRows.value"
-        [cdkAutosizeMaxRows]="maxRows.value"></textarea>
+    <textarea class="demo-textarea" cdkTextareaAutosize [cdkAutosizeMinRows]="minRows.value" [cdkAutosizeMaxRows]="maxRows.value"></textarea>
     <button type="button" (click)="minRows.value = minRows.value - 1">Decrement minRows</button>
 
     <h3>&lt;textarea&gt; with mat-form-field</h3>
     <div>
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Autosized textarea</mat-label>
         <textarea matInput cdkTextareaAutosize cdkAutosizeMaxRows="10"></textarea>
       </mat-form-field>
@@ -610,40 +607,42 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
       <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="fill" style="width: 100%">
-          <mat-label>Fill appearance</mat-label>
-          <input matInput [(ngModel)]="fillAppearance" 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="outline" style="width: 100%">
-          <mat-label>Outline appearance</mat-label>
-          <input matInput [(ngModel)]="outlineAppearance" required>
-          <mat-error>This field is required</mat-error>
-          <mat-hint>Please type something here</mat-hint>
-        </mat-form-field>
-      </td>
-    </tr></table>
+    <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="fill" style="width: 100%">
+            <mat-label>Fill appearance</mat-label>
+            <input matInput [(ngModel)]="fillAppearance" 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="outline" style="width: 100%">
+            <mat-label>Outline appearance</mat-label>
+            <input matInput [(ngModel)]="outlineAppearance" 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>
 
@@ -654,10 +653,10 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
       <mat-checkbox [(ngModel)]="customAutofillStyle" name="custom">
         Use custom autofill style
       </mat-checkbox>
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Autofill monitored</mat-label>
         <input matInput (cdkAutofill)="isAutofilled = $event.isAutofilled" name="autofill"
-               [class.demo-custom-autofill-style]="customAutofillStyle">
+          [class.demo-custom-autofill-style]="customAutofillStyle">
       </mat-form-field>
       <button color="primary" mat-raised-button>Submit</button>
       <span> is autofilled? {{isAutofilled ? 'yes' : 'no'}}</span>
diff --git a/src/dev-app/input/input-demo.ts b/src/dev-app/input/input-demo.ts
index 54178dbe7bff..7ce17301dd26 100644
--- a/src/dev-app/input/input-demo.ts
+++ b/src/dev-app/input/input-demo.ts
@@ -5,12 +5,10 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-
 import {Component, ChangeDetectionStrategy} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
 import {ErrorStateMatcher} from '@angular/material';
 
-
 let max = 5;
 
 const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
@@ -20,7 +18,7 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'input-demo',
   templateUrl: 'input-demo.html',
-  styleUrls: ['input-demo.css'],
+  styleUrls: ['input-demo.css']
 })
 export class InputDemo {
   floatingLabel = 'auto';
@@ -45,11 +43,14 @@ export class InputDemo {
     {value: 20},
     {value: 30},
     {value: 40},
-    {value: 50},
+    {value: 50}
   ];
   rows = 8;
   formControl = new FormControl('hello', Validators.required);
-  emailFormControl = new FormControl('', [Validators.required, Validators.pattern(EMAIL_REGEX)]);
+  emailFormControl = new FormControl('', [
+    Validators.required,
+    Validators.pattern(EMAIL_REGEX)
+  ]);
   delayedFormControl = new FormControl('');
   model = 'hello';
   isAutofilled = false;
@@ -60,13 +61,14 @@ export class InputDemo {
   fillAppearance: string;
   outlineAppearance: string;
 
+  appearance: 'outline' | 'fill' = 'outline';
   constructor() {
     setTimeout(() => this.delayedFormControl.setValue('hello'), 100);
   }
 
   addABunch(n: number) {
     for (let x = 0; x < n; x++) {
-      this.items.push({ value: ++max });
+      this.items.push({value: ++max});
     }
   }
 
@@ -84,12 +86,14 @@ export class InputDemo {
   };
 
   togglePlaceholderTestValue() {
-    this.placeholderTestControl.setValue(this.placeholderTestControl.value === '' ? 'Value' : '');
+    this.placeholderTestControl.setValue(
+      this.placeholderTestControl.value === '' ? 'Value' : ''
+    );
   }
 
   togglePlaceholderTestTouched() {
-    this.placeholderTestControl.touched ?
-      this.placeholderTestControl.markAsUntouched() :
-      this.placeholderTestControl.markAsTouched();
+    this.placeholderTestControl.touched
+      ? this.placeholderTestControl.markAsUntouched()
+      : this.placeholderTestControl.markAsTouched();
   }
 }
diff --git a/src/dev-app/paginator/paginator-demo.html b/src/dev-app/paginator/paginator-demo.html
index af3c21879c14..a744fbb259fb 100644
--- a/src/dev-app/paginator/paginator-demo.html
+++ b/src/dev-app/paginator/paginator-demo.html
@@ -5,15 +5,15 @@ <h2>No inputs</h2>
 
 <mat-card class="demo-section">
   <div class="demo-options">
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <input matInput placeholder="Length" type="number" [(ngModel)]="length">
     </mat-form-field>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <input matInput placeholder="Page Size" type="number" [(ngModel)]="pageSize">
     </mat-form-field>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <input matInput placeholder="Page Index" type="number" [(ngModel)]="pageIndex">
     </mat-form-field>
 
@@ -23,15 +23,9 @@ <h2>No inputs</h2>
     <mat-slide-toggle [(ngModel)]="disabled">Disabled</mat-slide-toggle>
   </div>
 
-  <mat-paginator #paginator
-                 (page)="handlePageEvent($event)"
-                 [length]="length"
-                 [pageSize]="pageSize"
-                 [disabled]="disabled"
-                 [showFirstLastButtons]="showFirstLastButtons"
-                 [pageSizeOptions]="showPageSizeOptions ? pageSizeOptions : []"
-                 [hidePageSize]="hidePageSize"
-                 [pageIndex]="pageIndex">
+  <mat-paginator #paginator (page)="handlePageEvent($event)" [length]="length" [pageSize]="pageSize" [disabled]="disabled"
+    [showFirstLastButtons]="showFirstLastButtons" [pageSizeOptions]="showPageSizeOptions ? pageSizeOptions : []"
+    [hidePageSize]="hidePageSize" [pageIndex]="pageIndex">
   </mat-paginator>
 
   <div> Output event: {{pageEvent | json}} </div>
diff --git a/src/dev-app/select/select-demo.html b/src/dev-app/select/select-demo.html
index 9b7061c9d63d..cb3f847867e8 100644
--- a/src/dev-app/select/select-demo.html
+++ b/src/dev-app/select/select-demo.html
@@ -1,11 +1,22 @@
+<mat-card class="demo-card demo-basic">
+  <mat-toolbar color="primary">Change Form Field Appearance</mat-toolbar>
+  <mat-card-content>
 
+    <h4>Change form field appearance to either Outline or Fill</h4>
+    <mat-form-field [appearance]="appearance" class="demo-full-width">
+      <mat-label>Change Appearance</mat-label>
+      <select [(ngModel)]="appearance" matNativeControl id="mySelectId">
+        <option value="outline">Outline</option>
+        <option value="fill">Fill</option>
+      </select>
+    </mat-form-field>
 
-<mat-card class="demo-card demo-basic">
+  </mat-card-content>
   <mat-toolbar color="primary">Native Select</mat-toolbar>
   <mat-card-content>
     <form>
       <h4>Basic</h4>
-      <mat-form-field class="demo-full-width">
+      <mat-form-field [appearance]="appearance" class="demo-full-width">
         <mat-label>Select your car</mat-label>
         <select matNativeControl id="mySelectId">
           <option value="" disabled selected></option>
@@ -16,7 +27,7 @@ <h4>Basic</h4>
         </select>
       </mat-form-field>
       <h4>Disabled and required</h4>
-      <mat-form-field class="demo-full-width">
+      <mat-form-field [appearance]="appearance" class="demo-full-width">
         <mat-label>Select your car (disabled)</mat-label>
         <select matNativeControl disabled required>
           <option value="volvo">Volvo</option>
@@ -26,7 +37,7 @@ <h4>Disabled and required</h4>
         </select>
       </mat-form-field>
       <h4>Floating label</h4>
-      <mat-form-field>
+      <mat-form-field style="margin: 5px" [appearance]="appearance">
         <mat-label>Float with value</mat-label>
         <select matNativeControl>
           <option value="volvo">Volvo</option>
@@ -35,7 +46,7 @@ <h4>Floating label</h4>
           <option value="audi">Audi</option>
         </select>
       </mat-form-field>
-      <mat-form-field>
+      <mat-form-field style="margin: 5px" [appearance]="appearance">
         <mat-label>Not float when empty</mat-label>
         <select matNativeControl>
           <option value="" selected></option>
@@ -44,7 +55,7 @@ <h4>Floating label</h4>
           <option value="audi">Audi</option>
         </select>
       </mat-form-field>
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Float with no value, but with label</mat-label>
         <select matNativeControl>
           <option value="" selected label="--select one--"></option>
@@ -53,7 +64,7 @@ <h4>Floating label</h4>
           <option value="audi">Audi</option>
         </select>
       </mat-form-field>
-      <mat-form-field>
+      <mat-form-field style="margin: 5px" [appearance]="appearance">
         <mat-label>Float with no value, but with html</mat-label>
         <select matNativeControl>
           <option value="" selected>--select one--</option>
@@ -63,7 +74,7 @@ <h4>Floating label</h4>
         </select>
       </mat-form-field>
       <h4>Looks</h4>
-      <mat-form-field appearance="legacy">
+      <mat-form-field style="margin: 5px" appearance="legacy">
         <mat-label>Legacy</mat-label>
         <select matNativeControl required>
           <option value="volvo">Volvo</option>
@@ -72,7 +83,7 @@ <h4>Looks</h4>
           <option value="audi">Audi</option>
         </select>
       </mat-form-field>
-      <mat-form-field appearance="standard">
+      <mat-form-field style="margin: 5px" appearance="standard">
         <mat-label>Standard</mat-label>
         <select matNativeControl required>
           <option value="volvo">Volvo</option>
@@ -81,7 +92,7 @@ <h4>Looks</h4>
           <option value="audi">Audi</option>
         </select>
       </mat-form-field>
-      <mat-form-field appearance="fill">
+      <mat-form-field style="margin: 5px" appearance="fill">
         <mat-label>Fill</mat-label>
         <select matNativeControl required>
           <option value="" selected></option>
@@ -91,7 +102,7 @@ <h4>Looks</h4>
           <option value="audi">Audi</option>
         </select>
       </mat-form-field>
-      <mat-form-field appearance="outline">
+      <mat-form-field style="margin: 5px" appearance="outline">
         <mat-label>Outline</mat-label>
         <select matNativeControl>
           <option value="" selected></option>
@@ -102,7 +113,7 @@ <h4>Looks</h4>
         </select>
       </mat-form-field>
       <h4>Option group</h4>
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <select matNativeControl>
           <optgroup label="Swedish Cars">
             <option value="volvo">volvo</option>
@@ -115,7 +126,7 @@ <h4>Option group</h4>
         </select>
       </mat-form-field>
       <h4>Place holder</h4>
-      <mat-form-field class="demo-full-width">
+      <mat-form-field [appearance]="appearance" class="demo-full-width">
         <select matNativeControl placeholder="place holder">
           <option value="" disabled selected></option>
           <option value="volvo">Volvo</option>
@@ -125,7 +136,7 @@ <h4>Place holder</h4>
         </select>
       </mat-form-field>
       <h4>Error message, hint, form sumbit</h4>
-      <mat-form-field class="demo-full-width">
+      <mat-form-field [appearance]="appearance" class="demo-full-width">
         <mat-label>Select your car (required)</mat-label>
         <select matNativeControl required [formControl]="selectFormControl">
           <option label="--select something --"></option>
@@ -140,7 +151,7 @@ <h4>Error message, hint, form sumbit</h4>
       </mat-form-field>
 
       <h4>Error message with errorStateMatcher</h4>
-      <mat-form-field class="demo-full-width">
+      <mat-form-field [appearance]="appearance" class="demo-full-width">
         <mat-label>Select your car</mat-label>
         <select matNativeControl required [formControl]="selectFormControl" [errorStateMatcher]="matcher">
           <option label="--select something --"></option>
@@ -168,10 +179,9 @@ <h4>Error message with errorStateMatcher</h4>
   <mat-card>
     <mat-card-subtitle>ngModel</mat-card-subtitle>
 
-    <mat-form-field [floatLabel]="floatLabel" [color]="drinksTheme">
+    <mat-form-field [appearance]="appearance" [floatLabel]="floatLabel" [color]="drinksTheme">
       <mat-label>Drink</mat-label>
-      <mat-select [(ngModel)]="currentDrink" [required]="drinksRequired"
-        [disabled]="drinksDisabled" #drinkControl="ngModel">
+      <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">
           {{ drink.viewValue }}
@@ -212,10 +222,10 @@ <h4>Error message with errorStateMatcher</h4>
     <mat-card-subtitle>Multiple selection</mat-card-subtitle>
 
     <mat-card-content>
-      <mat-form-field [color]="pokemonTheme">
+      <mat-form-field [appearance]="appearance" [color]="pokemonTheme">
         <mat-label>Pokemon</mat-label>
-        <mat-select multiple [(ngModel)]="currentPokemon"
-          [required]="pokemonRequired" [disabled]="pokemonDisabled" #pokemonControl="ngModel">
+        <mat-select multiple [(ngModel)]="currentPokemon" [required]="pokemonRequired" [disabled]="pokemonDisabled"
+          #pokemonControl="ngModel">
           <mat-option *ngFor="let creature of pokemon" [value]="creature.value">
             {{ creature.viewValue }}
           </mat-option>
@@ -241,7 +251,7 @@ <h4>Error message with errorStateMatcher</h4>
   <mat-card>
     <mat-card-subtitle>Without Angular forms</mat-card-subtitle>
 
-    <mat-form-field>
+    <mat-form-field [appearance]="appearance">
       <mat-label>Digimon</mat-label>
       <mat-select [(value)]="currentDigimon">
         <mat-option>None</mat-option>
@@ -261,11 +271,10 @@ <h4>Error message with errorStateMatcher</h4>
     <mat-card-subtitle>Option groups</mat-card-subtitle>
 
     <mat-card-content>
-      <mat-form-field>
+      <mat-form-field [appearance]="appearance">
         <mat-label>Pokemon</mat-label>
         <mat-select [(ngModel)]="currentPokemonFromGroup">
-          <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
-            [disabled]="group.disabled">
+          <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name" [disabled]="group.disabled">
             <mat-option *ngFor="let creature of group.pokemon" [value]="creature.value">
               {{ creature.viewValue }}
             </mat-option>
@@ -279,12 +288,10 @@ <h4>Error message with errorStateMatcher</h4>
   <mat-card>
     <mat-card-subtitle>compareWith</mat-card-subtitle>
     <mat-card-content>
-      <mat-form-field [color]="drinksTheme">
+      <mat-form-field [appearance]="appearance" [color]="drinksTheme">
         <mat-label>Drink</mat-label>
-        <mat-select [(ngModel)]="currentDrinkObject"
-                    [required]="drinkObjectRequired"
-                    [compareWith]="compareByValue ? compareDrinkObjectsByValue : compareByReference"
-                    #drinkObjectControl="ngModel">
+        <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>
@@ -296,8 +303,7 @@ <h4>Error message with errorStateMatcher</h4>
       <p> Status: {{ drinkObjectControl.control?.status }} </p>
       <p> Comparison Mode: {{ compareByValue ? 'VALUE' : 'REFERENCE' }} </p>
 
-      <button mat-button (click)="reassignDrinkByCopy()"
-              matTooltip="This action should clear the display value when comparing by reference.">
+      <button mat-button (click)="reassignDrinkByCopy()" matTooltip="This action should clear the display value when comparing by reference.">
         REASSIGN DRINK BY COPY
       </button>
       <button mat-button (click)="drinkObjectRequired=!drinkObjectRequired">TOGGLE REQUIRED</button>
@@ -310,7 +316,7 @@ <h4>Error message with errorStateMatcher</h4>
     <mat-card-subtitle>Appearance comparison</mat-card-subtitle>
     <mat-card-content>
       <p>
-        <mat-form-field>
+        <mat-form-field appearance="legacy">
           <mat-label>Legacy</mat-label>
           <mat-select [(value)]="currentAppearanceValue">
             <mat-option>None</mat-option>
@@ -366,7 +372,7 @@ <h4>Error message with errorStateMatcher</h4>
       <mat-card-subtitle>formControl</mat-card-subtitle>
 
       <mat-card-content>
-        <mat-form-field>
+        <mat-form-field [appearance]="appearance">
           <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>
@@ -388,7 +394,7 @@ <h4>Error message with errorStateMatcher</h4>
       <mat-card-subtitle>Change event</mat-card-subtitle>
 
       <mat-card-content>
-        <mat-form-field>
+        <mat-form-field [appearance]="appearance">
           <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>
@@ -402,4 +408,3 @@ <h4>Error message with errorStateMatcher</h4>
 
 </div>
 <div style="height: 500px">This div is for testing scrolled selects.</div>
-
diff --git a/src/dev-app/select/select-demo.ts b/src/dev-app/select/select-demo.ts
index dabde38fca54..633453d55c76 100644
--- a/src/dev-app/select/select-demo.ts
+++ b/src/dev-app/select/select-demo.ts
@@ -21,10 +21,10 @@ export class MyErrorStateMatcher implements ErrorStateMatcher {
 }
 
 @Component({
-    moduleId: module.id,
-    selector: 'select-demo',
-    templateUrl: 'select-demo.html',
-    styleUrls: ['select-demo.css'],
+  moduleId: module.id,
+  selector: 'select-demo',
+  templateUrl: 'select-demo.html',
+  styleUrls: ['select-demo.css']
 })
 export class SelectDemo {
   drinksRequired = false;
@@ -34,7 +34,7 @@ export class SelectDemo {
   pokemonDisabled = false;
   showSelect = false;
   currentDrink: string;
-  currentDrinkObject: {}|undefined = {value: 'tea-5', viewValue: 'Tea'};
+  currentDrinkObject: {} | undefined = {value: 'tea-5', viewValue: 'Tea'};
   currentPokemon: string[];
   currentPokemonFromGroup: string;
   currentDigimon: string;
@@ -48,6 +48,8 @@ export class SelectDemo {
   compareByValue = true;
   selectFormControl = new FormControl('', Validators.required);
 
+  appearance: 'outline' | 'fill' = 'outline';
+
   foods = [
     {value: null, viewValue: 'None'},
     {value: 'steak-0', viewValue: 'Steak'},
@@ -57,14 +59,17 @@ export class SelectDemo {
 
   drinks = [
     {value: 'coke-0', viewValue: 'Coke'},
-    {value: 'long-name-1', viewValue: 'Decaf Chocolate Brownie Vanilla Gingerbread Frappuccino'},
+    {
+      value: 'long-name-1',
+      viewValue: 'Decaf Chocolate Brownie Vanilla Gingerbread Frappuccino'
+    },
     {value: 'water-2', viewValue: 'Water'},
     {value: 'pepper-3', viewValue: 'Dr. Pepper'},
     {value: 'coffee-4', viewValue: 'Coffee'},
     {value: 'tea-5', viewValue: 'Tea'},
     {value: 'juice-6', viewValue: 'Orange juice'},
     {value: 'wine-7', viewValue: 'Wine'},
-    {value: 'milk-8', viewValue: 'Milk'},
+    {value: 'milk-8', viewValue: 'Milk'}
   ];
 
   pokemon = [
@@ -72,15 +77,18 @@ export class SelectDemo {
     {value: 'charizard-1', viewValue: 'Charizard'},
     {value: 'squirtle-2', viewValue: 'Squirtle'},
     {value: 'pikachu-3', viewValue: 'Pikachu'},
-    {value: 'jigglypuff-4', viewValue: 'Jigglypuff with a really long name that will truncate'},
+    {
+      value: 'jigglypuff-4',
+      viewValue: 'Jigglypuff with a really long name that will truncate'
+    },
     {value: 'ditto-5', viewValue: 'Ditto'},
-    {value: 'psyduck-6', viewValue: 'Psyduck'},
+    {value: 'psyduck-6', viewValue: 'Psyduck'}
   ];
 
   availableThemes = [
-    {value: 'primary', name: 'Primary' },
-    {value: 'accent', name: 'Accent' },
-    {value: 'warn', name: 'Warn' }
+    {value: 'primary', name: 'Primary'},
+    {value: 'accent', name: 'Accent'},
+    {value: 'warn', name: 'Warn'}
   ];
 
   pokemonGroups = [
@@ -113,7 +121,7 @@ export class SelectDemo {
       name: 'Psychic',
       pokemon: [
         {value: 'mew-9', viewValue: 'Mew'},
-        {value: 'mewtwo-10', viewValue: 'Mewtwo'},
+        {value: 'mewtwo-10', viewValue: 'Mewtwo'}
       ]
     }
   ];
@@ -128,7 +136,9 @@ export class SelectDemo {
   ];
 
   toggleDisabled() {
-    this.foodControl.enabled ? this.foodControl.disable() : this.foodControl.enable();
+    this.foodControl.enabled
+      ? this.foodControl.disable()
+      : this.foodControl.enable();
   }
 
   setPokemonValue() {
@@ -150,6 +160,8 @@ export class SelectDemo {
   matcher = new MyErrorStateMatcher();
 
   toggleSelected() {
-    this.currentAppearanceValue = this.currentAppearanceValue ? null : this.digimon[0].value;
+    this.currentAppearanceValue = this.currentAppearanceValue
+      ? null
+      : this.digimon[0].value;
   }
 }
diff --git a/src/dev-app/snack-bar/snack-bar-demo.html b/src/dev-app/snack-bar/snack-bar-demo.html
index e8ef3ca05cc0..b16a804241ae 100644
--- a/src/dev-app/snack-bar/snack-bar-demo.html
+++ b/src/dev-app/snack-bar/snack-bar-demo.html
@@ -1,11 +1,14 @@
 <h1>SnackBar demo</h1>
 <div>
   <div>
-    Message: <mat-form-field><input matInput type="text" [(ngModel)]="message"></mat-form-field>
+    <mat-form-field appearance="fill">
+      <mat-label>Message</mat-label>
+      <input matInput type="text" [(ngModel)]="message">
+    </mat-form-field>
   </div>
   <div>
     <div>Position in page: </div>
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-select [(ngModel)]="horizontalPosition">
         <mat-option value="start">Start</mat-option>
         <mat-option value="end">End</mat-option>
@@ -14,7 +17,7 @@ <h1>SnackBar demo</h1>
         <mat-option value="center">Center</mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-select [(ngModel)]="verticalPosition">
         <mat-option value="top">Top</mat-option>
         <mat-option value="bottom">Bottom</mat-option>
@@ -24,22 +27,18 @@ <h1>SnackBar demo</h1>
   <div>
     <mat-checkbox [(ngModel)]="action">
       <p *ngIf="!action">Show button on snack bar</p>
-      <mat-form-field *ngIf="action">
+      <mat-form-field appearance="fill" *ngIf="action">
         <mat-label>Snack bar action label</mat-label>
-        <input matInput
-               type="text"
-               [(ngModel)]="actionButtonLabel">
+        <input matInput type="text" [(ngModel)]="actionButtonLabel">
       </mat-form-field>
     </mat-checkbox>
   </div>
   <div>
     <mat-checkbox [(ngModel)]="setAutoHide">
       <p *ngIf="!setAutoHide">Auto hide after duration</p>
-      <mat-form-field *ngIf="setAutoHide">
+      <mat-form-field appearance="fill" *ngIf="setAutoHide">
         <mat-label>Auto hide duration in ms</mat-label>
-        <input matInput
-               type="number"
-               [(ngModel)]="autoHide">
+        <input matInput type="number" [(ngModel)]="autoHide">
       </mat-form-field>
     </mat-checkbox>
   </div>
diff --git a/src/dev-app/stepper/stepper-demo.html b/src/dev-app/stepper/stepper-demo.html
index 67b2a97237bb..5d6d4922550c 100644
--- a/src/dev-app/stepper/stepper-demo.html
+++ b/src/dev-app/stepper/stepper-demo.html
@@ -5,13 +5,13 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
   <mat-vertical-stepper #linearVerticalStepper="matVerticalStepper" formArrayName="formArray" [linear]="!isNonLinear">
     <mat-step formGroupName="0" [stepControl]="formArray?.get([0])">
       <ng-template matStepLabel>Fill out your name</ng-template>
-      <mat-form-field>
+      <mat-form-field style="margin: 5px" appearance="outline">
         <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>
+      <mat-form-field style="margin: 5px" appearance="outline">
         <mat-label>Last name</mat-label>
         <input matInput formControlName="lastNameFormCtrl" required>
         <mat-error>This field is required</mat-error>
@@ -25,7 +25,7 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
       <ng-template matStepLabel>
         <div>Fill out your email address</div>
       </ng-template>
-      <mat-form-field>
+      <mat-form-field appearance="outline">
         <mat-label>Email address</mat-label>
         <input matInput formControlName="emailFormCtrl">
         <mat-error>The input is invalid.</mat-error>
@@ -52,12 +52,12 @@ <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
   <mat-step [stepControl]="nameFormGroup">
     <form [formGroup]="nameFormGroup">
       <ng-template matStepLabel>Fill out your name</ng-template>
-      <mat-form-field>
+      <mat-form-field style="margin: 5px" appearance="outline">
         <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>
+      <mat-form-field style="margin: 5px" appearance="outline">
         <mat-label>Last name</mat-label>
         <input matInput formControlName="lastNameCtrl" required>
         <mat-error>This field is required</mat-error>
@@ -71,7 +71,7 @@ <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
   <mat-step [stepControl]="emailFormGroup" optional>
     <form [formGroup]="emailFormGroup">
       <ng-template matStepLabel>Fill out your email address</ng-template>
-      <mat-form-field>
+      <mat-form-field appearance="outline">
         <mat-label>Email address</mat-label>
         <input matInput formControlName="emailCtrl">
         <mat-error>The input is invalid</mat-error>
@@ -100,12 +100,12 @@ <h3>Vertical Stepper Demo</h3>
 <mat-vertical-stepper>
   <mat-step [editable]="!isNonEditable">
     <ng-template matStepLabel>Fill out your name</ng-template>
-    <mat-form-field>
+    <mat-form-field style="margin: 5px" appearance="outline">
       <mat-label>First name</mat-label>
       <input matInput>
     </mat-form-field>
 
-    <mat-form-field>
+    <mat-form-field style="margin: 5px" appearance="outline">
       <mat-label>Last name</mat-label>
       <input matInput>
     </mat-form-field>
@@ -118,7 +118,7 @@ <h3>Vertical Stepper Demo</h3>
     <ng-template matStepLabel>
       <div>Fill out your phone number</div>
     </ng-template>
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Phone number</mat-label>
       <input matInput>
     </mat-form-field>
@@ -132,7 +132,7 @@ <h3>Vertical Stepper Demo</h3>
     <ng-template matStepLabel>
       <div>Fill out your address</div>
     </ng-template>
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Address</mat-label>
       <input matInput>
     </mat-form-field>
@@ -154,12 +154,12 @@ <h3>Vertical Stepper Demo</h3>
 <h3>Horizontal Stepper Demo with Text Label</h3>
 <mat-horizontal-stepper>
   <mat-step label="Fill out your name">
-    <mat-form-field>
+    <mat-form-field style="margin: 5px" appearance="outline">
       <mat-label>First name</mat-label>
       <input matInput>
     </mat-form-field>
 
-    <mat-form-field>
+    <mat-form-field style="margin: 5px" appearance="outline">
       <mat-label>Last name</mat-label>
       <input matInput>
     </mat-form-field>
@@ -169,7 +169,7 @@ <h3>Horizontal Stepper Demo with Text Label</h3>
   </mat-step>
 
   <mat-step label="Fill out your phone number">
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Phone number</mat-label>
       <input matInput>
     </mat-form-field>
@@ -180,7 +180,7 @@ <h3>Horizontal Stepper Demo with Text Label</h3>
   </mat-step>
 
   <mat-step label="Fill out your address">
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Address</mat-label>
       <input matInput>
     </mat-form-field>
@@ -202,7 +202,7 @@ <h3>Horizontal Stepper Demo with Templated Label</h3>
 <mat-horizontal-stepper>
   <mat-step *ngFor="let step of steps">
     <ng-template matStepLabel>{{step.label}}</ng-template>
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Answer</mat-label>
       <input matInput [(ngModel)]="step.content">
     </mat-form-field>
@@ -216,10 +216,9 @@ <h3>Horizontal Stepper Demo with Templated Label</h3>
 <h3>Stepper with autosize textarea</h3>
 <mat-horizontal-stepper>
   <mat-step label="Step 1">
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Autosize textarea</mat-label>
       <textarea matInput cdkTextareaAutosize>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/dev-app/toolbar/toolbar-demo.html b/src/dev-app/toolbar/toolbar-demo.html
index fb5f6a7517a4..487da6afba5e 100644
--- a/src/dev-app/toolbar/toolbar-demo.html
+++ b/src/dev-app/toolbar/toolbar-demo.html
@@ -91,7 +91,7 @@ <h3>Toolbar with form-fields</h3>
 
   <p>
     <mat-toolbar>
-      <mat-form-field>
+      <mat-form-field style="margin: 5px" appearance="outline">
         <mat-label>Select</mat-label>
         <mat-select>
           <mat-option value="1">One</mat-option>
@@ -99,7 +99,15 @@ <h3>Toolbar with form-fields</h3>
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field appearance="legacy">
+      <mat-form-field style="margin: 5px" appearance="fill">
+        <mat-label>Select</mat-label>
+        <mat-select>
+          <mat-option value="1">One</mat-option>
+          <mat-option value="2">Two</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field style="margin: 5px" appearance="fill" appearance="legacy">
         <mat-label>Input</mat-label>
         <input matInput>
       </mat-form-field>
@@ -108,7 +116,15 @@ <h3>Toolbar with form-fields</h3>
 
   <p>
     <mat-toolbar color="primary">
-      <mat-form-field>
+      <mat-form-field style="margin: 5px" appearance="outline">
+        <mat-label>Select</mat-label>
+        <mat-select>
+          <mat-option value="1">One</mat-option>
+          <mat-option value="2">Two</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field style="margin: 5px" appearance="fill">
         <mat-label>Select</mat-label>
         <mat-select>
           <mat-option value="1">One</mat-option>
@@ -116,7 +132,7 @@ <h3>Toolbar with form-fields</h3>
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field appearance="legacy">
+      <mat-form-field style="margin: 5px" appearance="fill" appearance="legacy">
         <mat-label>Input</mat-label>
         <input matInput>
       </mat-form-field>
diff --git a/src/dev-app/virtual-scroll/virtual-scroll-demo.html b/src/dev-app/virtual-scroll/virtual-scroll-demo.html
index 40792b7aab14..d0892112ba91 100644
--- a/src/dev-app/virtual-scroll/virtual-scroll-demo.html
+++ b/src/dev-app/virtual-scroll/virtual-scroll-demo.html
@@ -2,39 +2,35 @@ <h2>Autosize</h2>
 
 <h3>Uniform size</h3>
 <cdk-virtual-scroll-viewport class="demo-viewport" autosize>
-  <div *cdkVirtualFor="let size of fixedSizeData; let i = index" class="demo-item"
-       [style.height.px]="size">
+  <div *cdkVirtualFor="let size of fixedSizeData; let i = index" class="demo-item" [style.height.px]="size">
     Item #{{i}} - ({{size}}px)
   </div>
 </cdk-virtual-scroll-viewport>
 
 <h3>Increasing size</h3>
 <cdk-virtual-scroll-viewport class="demo-viewport" autosize>
-  <div *cdkVirtualFor="let size of increasingSizeData; let i = index" class="demo-item"
-       [style.height.px]="size">
+  <div *cdkVirtualFor="let size of increasingSizeData; let i = index" class="demo-item" [style.height.px]="size">
     Item #{{i}} - ({{size}}px)
   </div>
 </cdk-virtual-scroll-viewport>
 
 <h3>Decreasing size</h3>
 <cdk-virtual-scroll-viewport class="demo-viewport" autosize>
-  <div *cdkVirtualFor="let size of decreasingSizeData; let i = index" class="demo-item"
-       [style.height.px]="size">
+  <div *cdkVirtualFor="let size of decreasingSizeData; let i = index" class="demo-item" [style.height.px]="size">
     Item #{{i}} - ({{size}}px)
   </div>
 </cdk-virtual-scroll-viewport>
 
 <h3>Random size</h3>
 <cdk-virtual-scroll-viewport class="demo-viewport" autosize>
-  <div *cdkVirtualFor="let size of randomData; let i = index" class="demo-item"
-       [style.height.px]="size">
+  <div *cdkVirtualFor="let size of randomData; let i = index" class="demo-item" [style.height.px]="size">
     Item #{{i}} - ({{size}}px)
   </div>
 </cdk-virtual-scroll-viewport>
 
 <h2>Fixed size</h2>
 
-<mat-form-field>
+<mat-form-field appearance="outline">
   <mat-label>Behavior</mat-label>
   <mat-select [(ngModel)]="scrollToBehavior">
     <mat-option value="auto">Auto</mat-option>
@@ -42,7 +38,7 @@ <h2>Fixed size</h2>
     <mat-option value="smooth">Smooth</mat-option>
   </mat-select>
 </mat-form-field>
-<mat-form-field>
+<mat-form-field appearance="outline">
   <mat-label>Offset</mat-label>
   <input matInput type="number" [(ngModel)]="scrollToOffset">
 </mat-form-field>
@@ -50,7 +46,7 @@ <h2>Fixed size</h2>
                             viewport2.scrollToOffset(scrollToOffset, scrollToBehavior)">
   Go to offset
 </button>
-<mat-form-field>
+<mat-form-field appearance="outline">
   <mat-label>Index</mat-label>
   <input matInput type="number" [(ngModel)]="scrollToIndex">
 </mat-form-field>
@@ -62,10 +58,8 @@ <h2>Fixed size</h2>
   Currently scrolled to item: {{scrolledIndex.get(viewport1) || 0}}
 </p>
 
-<cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="50" #viewport1
-                             (scrolledIndexChange)="scrolled(viewport1, $event)">
-  <div *cdkVirtualFor="let size of fixedSizeData; let i = index" class="demo-item"
-       [style.height.px]="size">
+<cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="50" #viewport1 (scrolledIndexChange)="scrolled(viewport1, $event)">
+  <div *cdkVirtualFor="let size of fixedSizeData; let i = index" class="demo-item" [style.height.px]="size">
     Item #{{i}} - ({{size}}px)
   </div>
 </cdk-virtual-scroll-viewport>
@@ -74,11 +68,9 @@ <h2>Fixed size</h2>
   Currently scrolled to item: {{scrolledIndex.get(viewport2) || 0}}
 </p>
 
-<cdk-virtual-scroll-viewport class="demo-viewport demo-horizontal" [itemSize]="50" #viewport2
-                             (scrolledIndexChange)="scrolled(viewport2, $event)"
-                             orientation="horizontal">
-  <div *cdkVirtualFor="let size of fixedSizeData; let i = index" class="demo-item"
-       [style.width.px]="size">
+<cdk-virtual-scroll-viewport class="demo-viewport demo-horizontal" [itemSize]="50" #viewport2 (scrolledIndexChange)="scrolled(viewport2, $event)"
+  orientation="horizontal">
+  <div *cdkVirtualFor="let size of fixedSizeData; let i = index" class="demo-item" [style.width.px]="size">
     Item #{{i}} - ({{size}}px)
   </div>
 </cdk-virtual-scroll-viewport>
@@ -87,8 +79,7 @@ <h2>Observable data</h2>
 
 <button (click)="emitData()">Add item</button>
 <cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="50">
-  <div *cdkVirtualFor="let size of observableData | async; let i = index" class="demo-item"
-       [style.height.px]="size">
+  <div *cdkVirtualFor="let size of observableData | async; let i = index" class="demo-item" [style.height.px]="size">
     Item #{{i}} - ({{size}}px)
   </div>
 </cdk-virtual-scroll-viewport>
@@ -98,8 +89,7 @@ <h2>No trackBy</h2>
 <button (click)="sortBy('name')">Sort by state name</button>
 <button (click)="sortBy('capital')">Sort by state capital</button>
 <cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="60">
-  <div *cdkVirtualFor="let state of statesObservable | async"
-       class="demo-state-item">
+  <div *cdkVirtualFor="let state of statesObservable | async" class="demo-state-item">
     <div class="demo-state">{{state.name}}</div>
     <div class="demo-capital">{{state.capital}}</div>
   </div>
@@ -110,8 +100,7 @@ <h2>trackBy index</h2>
 <button (click)="sortBy('name')">Sort by state name</button>
 <button (click)="sortBy('capital')">Sort by state capital</button>
 <cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="60">
-  <div *cdkVirtualFor="let state of statesObservable | async; trackBy: indexTrackFn"
-       class="demo-state-item">
+  <div *cdkVirtualFor="let state of statesObservable | async; trackBy: indexTrackFn" class="demo-state-item">
     <div class="demo-state">{{state.name}}</div>
     <div class="demo-capital">{{state.capital}}</div>
   </div>
@@ -122,8 +111,7 @@ <h2>trackBy state name</h2>
 <button (click)="sortBy('name')">Sort by state name</button>
 <button (click)="sortBy('capital')">Sort by state capital</button>
 <cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="60">
-  <div *cdkVirtualFor="let state of statesObservable | async; trackBy: nameTrackFn"
-       class="demo-state-item">
+  <div *cdkVirtualFor="let state of statesObservable | async; trackBy: nameTrackFn" class="demo-state-item">
     <div class="demo-state">{{state.name}}</div>
     <div class="demo-capital">{{state.capital}}</div>
   </div>
diff --git a/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html b/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html
index 50dd982f68bb..aa487bf33271 100644
--- a/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html
+++ b/src/material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html
@@ -1,5 +1,6 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field appearance="outline" class="example-full-width">
+    <mat-label>Pick one</mat-label>
     <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
     <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
       <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
diff --git a/src/material-examples/autocomplete-display/autocomplete-display-example.html b/src/material-examples/autocomplete-display/autocomplete-display-example.html
index 5daac573cf8c..ab332b47fb18 100644
--- a/src/material-examples/autocomplete-display/autocomplete-display-example.html
+++ b/src/material-examples/autocomplete-display/autocomplete-display-example.html
@@ -1,6 +1,8 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
-    <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
+  <mat-form-field appearance="outline" class="example-full-width">
+    <mat-label>Assignee</mat-label>
+    <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl"
+      [matAutocomplete]="auto">
     <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
       <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
         {{option.name}}
diff --git a/src/material-examples/autocomplete-filter/autocomplete-filter-example.html b/src/material-examples/autocomplete-filter/autocomplete-filter-example.html
index 3a5aefad2ce2..2bd9d03d6ee9 100644
--- a/src/material-examples/autocomplete-filter/autocomplete-filter-example.html
+++ b/src/material-examples/autocomplete-filter/autocomplete-filter-example.html
@@ -1,5 +1,6 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field appearance="outline" class="example-full-width">
+    <mat-label>Pick one</mat-label>
     <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
     <mat-autocomplete #auto="matAutocomplete">
       <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
diff --git a/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.css b/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.css
index 7432308753e6..ae291c92146b 100644
--- a/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.css
+++ b/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+.example-full-width {
+    width: 100%;
+}
diff --git a/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html b/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html
index 0d9a4bf88c03..ed114f5c4acc 100644
--- a/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html
+++ b/src/material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html
@@ -1,11 +1,12 @@
 <form [formGroup]="stateForm">
-  <mat-form-field>
+  <mat-form-field appearance="outline">
+    <mat-label>States Group</mat-label>
     <input type="text" matInput placeholder="States Group" formControlName="stateGroup" required [matAutocomplete]="autoGroup">
-      <mat-autocomplete #autoGroup="matAutocomplete">
-        <mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.letter">
-          <mat-option *ngFor="let name of group.names" [value]="name">
-            {{name}}
-          </mat-option>
+    <mat-autocomplete #autoGroup="matAutocomplete">
+      <mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.letter">
+        <mat-option *ngFor="let name of group.names" [value]="name">
+          {{name}}
+        </mat-option>
       </mat-optgroup>
     </mat-autocomplete>
   </mat-form-field>
diff --git a/src/material-examples/autocomplete-overview/autocomplete-overview-example.html b/src/material-examples/autocomplete-overview/autocomplete-overview-example.html
index 09ab07facdd3..fe2b93eb688c 100644
--- a/src/material-examples/autocomplete-overview/autocomplete-overview-example.html
+++ b/src/material-examples/autocomplete-overview/autocomplete-overview-example.html
@@ -1,5 +1,7 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+
+  <mat-form-field class="example-full-width" appearance="outline">
+    <mat-label>State</mat-label>
     <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
     <mat-autocomplete #auto="matAutocomplete">
       <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
@@ -10,11 +12,21 @@
     </mat-autocomplete>
   </mat-form-field>
 
-  <br>
+  <mat-form-field class="example-full-width" appearance="fill">
+    <mat-label>State</mat-label>
+    <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
+    <mat-autocomplete #auto="matAutocomplete">
+      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
+        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
+        <span>{{state.name}}</span> |
+        <small>Population: {{state.population}}</small>
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
 
-  <mat-slide-toggle
-    [checked]="stateCtrl.disabled"
-    (change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
-    Disable Input?
-  </mat-slide-toggle>
+  <div class="example-full-width">
+    <mat-slide-toggle [checked]="stateCtrl.disabled" (change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
+      Disable Input?
+    </mat-slide-toggle>
+  </div>
 </form>
diff --git a/src/material-examples/autocomplete-simple/autocomplete-simple-example.html b/src/material-examples/autocomplete-simple/autocomplete-simple-example.html
index cfd6bdf223e8..da1ae24a6683 100644
--- a/src/material-examples/autocomplete-simple/autocomplete-simple-example.html
+++ b/src/material-examples/autocomplete-simple/autocomplete-simple-example.html
@@ -1,5 +1,6 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field appearance="outline" class="example-full-width">
+    <mat-label>Pick one</mat-label>
     <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
     <mat-autocomplete #auto="matAutocomplete">
       <mat-option *ngFor="let option of options" [value]="option">
diff --git a/src/material-examples/datepicker-api/datepicker-api-example.html b/src/material-examples/datepicker-api/datepicker-api-example.html
index 453fe29805a5..a50a9c8866d4 100644
--- a/src/material-examples/datepicker-api/datepicker-api-example.html
+++ b/src/material-examples/datepicker-api/datepicker-api-example.html
@@ -1,4 +1,5 @@
-<mat-form-field class="example-full-width">
+<mat-form-field class="example-full-width" appearance="outline">
+  <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker" placeholder="Choose a date">
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>
diff --git a/src/material-examples/datepicker-color/datepicker-color-example.css b/src/material-examples/datepicker-color/datepicker-color-example.css
index 7432308753e6..72e8f277570f 100644
--- a/src/material-examples/datepicker-color/datepicker-color-example.css
+++ b/src/material-examples/datepicker-color/datepicker-color-example.css
@@ -1 +1,4 @@
 /** No CSS for this example */
+.example-full-width {
+    width: 100%;
+}
diff --git a/src/material-examples/datepicker-color/datepicker-color-example.html b/src/material-examples/datepicker-color/datepicker-color-example.html
index c7e033273c8b..d739506429fa 100644
--- a/src/material-examples/datepicker-color/datepicker-color-example.html
+++ b/src/material-examples/datepicker-color/datepicker-color-example.html
@@ -1,13 +1,16 @@
-<mat-form-field color="accent">
-  <mat-label>Inherited calendar color</mat-label>
-  <input matInput [matDatepicker]="picker1">
-  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
-  <mat-datepicker #picker1></mat-datepicker>
-</mat-form-field>
-
-<mat-form-field color="accent">
-  <mat-label>Custom calendar color</mat-label>
-  <input matInput [matDatepicker]="picker2">
-  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
-  <mat-datepicker #picker2 color="primary"></mat-datepicker>
-</mat-form-field>
+<div class="example-full-width">
+  <mat-form-field appearance="outline" color="accent">
+    <mat-label>Inherited calendar color</mat-label>
+    <input matInput [matDatepicker]="picker1">
+    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+    <mat-datepicker #picker1></mat-datepicker>
+  </mat-form-field>
+</div>
+<div class="example-full-width">
+  <mat-form-field appearance="outline" color="accent">
+    <mat-label>Custom calendar color</mat-label>
+    <input matInput [matDatepicker]="picker2">
+    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
+    <mat-datepicker #picker2 color="primary"></mat-datepicker>
+  </mat-form-field>
+</div>
diff --git a/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.html b/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.html
index 1ab9bb32fe8d..9205bfc80a8f 100644
--- a/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.html
+++ b/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.html
@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="outline">
   <mat-label>Custom calendar header</mat-label>
   <input matInput [matDatepicker]="picker">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
diff --git a/src/material-examples/datepicker-custom-icon/datepicker-custom-icon-example.html b/src/material-examples/datepicker-custom-icon/datepicker-custom-icon-example.html
index a1b4e5d50744..990792be7bcc 100644
--- a/src/material-examples/datepicker-custom-icon/datepicker-custom-icon-example.html
+++ b/src/material-examples/datepicker-custom-icon/datepicker-custom-icon-example.html
@@ -1,4 +1,5 @@
-<mat-form-field class="example-full-width">
+<mat-form-field class="example-full-width" appearance="outline">
+  <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker" placeholder="Choose a date">
   <mat-datepicker-toggle matSuffix [for]="picker">
     <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
diff --git a/src/material-examples/datepicker-date-class/datepicker-date-class-example.html b/src/material-examples/datepicker-date-class/datepicker-date-class-example.html
index fbba9f6a1693..09ec4a6d3cbd 100644
--- a/src/material-examples/datepicker-date-class/datepicker-date-class-example.html
+++ b/src/material-examples/datepicker-date-class/datepicker-date-class-example.html
@@ -1,4 +1,5 @@
-<mat-form-field class="example-full-width">
+<mat-form-field appearance="outline" class="example-full-width">
+  <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker" placeholder="Choose a date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>
diff --git a/src/material-examples/datepicker-disabled/datepicker-disabled-example.css b/src/material-examples/datepicker-disabled/datepicker-disabled-example.css
index 7432308753e6..72e8f277570f 100644
--- a/src/material-examples/datepicker-disabled/datepicker-disabled-example.css
+++ b/src/material-examples/datepicker-disabled/datepicker-disabled-example.css
@@ -1 +1,4 @@
 /** No CSS for this example */
+.example-full-width {
+    width: 100%;
+}
diff --git a/src/material-examples/datepicker-disabled/datepicker-disabled-example.html b/src/material-examples/datepicker-disabled/datepicker-disabled-example.html
index ad3b0755167b..843edefbe196 100644
--- a/src/material-examples/datepicker-disabled/datepicker-disabled-example.html
+++ b/src/material-examples/datepicker-disabled/datepicker-disabled-example.html
@@ -1,23 +1,27 @@
-<p>
-  <mat-form-field>
+<div class="example-full-width">
+
+  <mat-form-field appearance="outline">
+    <mat-label>Completely disabled</mat-label>
     <input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
     <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
     <mat-datepicker #dp1></mat-datepicker>
   </mat-form-field>
-</p>
+</div>
 
-<p>
-  <mat-form-field>
+<div class="example-full-width">
+  <mat-form-field appearance="outline">
+    <mat-label>Popup disabled</mat-label>
     <input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
     <mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
     <mat-datepicker #dp2></mat-datepicker>
   </mat-form-field>
-</p>
+</div>
 
-<p>
-  <mat-form-field>
+<div class="example-full-width">
+  <mat-form-field appearance="outline">
+    <mat-label>Input disabled</mat-label>
     <input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
     <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
     <mat-datepicker #dp3 disabled="false"></mat-datepicker>
   </mat-form-field>
-</p>
+</div>
diff --git a/src/material-examples/datepicker-events/datepicker-events-example.html b/src/material-examples/datepicker-events/datepicker-events-example.html
index 1935c718218c..50473b77c8fb 100644
--- a/src/material-examples/datepicker-events/datepicker-events-example.html
+++ b/src/material-examples/datepicker-events/datepicker-events-example.html
@@ -1,6 +1,7 @@
-<mat-form-field>
-  <input matInput [matDatepicker]="picker" placeholder="Input & change events"
-         (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
+<mat-form-field appearance="outline">
+  <mat-label>Input & change events</mat-label>
+  <input matInput [matDatepicker]="picker" placeholder="Input & change events" (dateInput)="addEvent('input', $event)"
+    (dateChange)="addEvent('change', $event)">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>
diff --git a/src/material-examples/datepicker-filter/datepicker-filter-example.html b/src/material-examples/datepicker-filter/datepicker-filter-example.html
index 6a44973b048e..6d2c8947c130 100644
--- a/src/material-examples/datepicker-filter/datepicker-filter-example.html
+++ b/src/material-examples/datepicker-filter/datepicker-filter-example.html
@@ -1,4 +1,5 @@
-<mat-form-field class="example-full-width">
+<mat-form-field appearance="outline" class="example-full-width">
+  <mat-label>Choose a date</mat-label>
   <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker" placeholder="Choose a date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
diff --git a/src/material-examples/datepicker-formats/datepicker-formats-example.html b/src/material-examples/datepicker-formats/datepicker-formats-example.html
index 4868f2dc21ed..55e1b793d0e5 100644
--- a/src/material-examples/datepicker-formats/datepicker-formats-example.html
+++ b/src/material-examples/datepicker-formats/datepicker-formats-example.html
@@ -1,4 +1,5 @@
-<mat-form-field>
+<mat-form-field appearance="outline">
+  <mat-label>Verbose datepicker</mat-label>
   <input matInput [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date">
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp></mat-datepicker>
diff --git a/src/material-examples/datepicker-locale/datepicker-locale-example.html b/src/material-examples/datepicker-locale/datepicker-locale-example.html
index f92432a48237..e61afc1dda01 100644
--- a/src/material-examples/datepicker-locale/datepicker-locale-example.html
+++ b/src/material-examples/datepicker-locale/datepicker-locale-example.html
@@ -1,4 +1,5 @@
-<mat-form-field>
+<mat-form-field appearance="outline">
+  <mat-label>Different locale</mat-label>
   <input matInput [matDatepicker]="dp" placeholder="Different locale">
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp></mat-datepicker>
diff --git a/src/material-examples/datepicker-min-max/datepicker-min-max-example.html b/src/material-examples/datepicker-min-max/datepicker-min-max-example.html
index 4ee60cdfdd86..f630944cb724 100644
--- a/src/material-examples/datepicker-min-max/datepicker-min-max-example.html
+++ b/src/material-examples/datepicker-min-max/datepicker-min-max-example.html
@@ -1,4 +1,5 @@
-<mat-form-field class="example-full-width">
+<mat-form-field appearance="outline" class="example-full-width">
+  <mat-label>Choose a date</mat-label>
   <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
diff --git a/src/material-examples/datepicker-moment/datepicker-moment-example.html b/src/material-examples/datepicker-moment/datepicker-moment-example.html
index a6ae46cc7d2d..fefe6b568052 100644
--- a/src/material-examples/datepicker-moment/datepicker-moment-example.html
+++ b/src/material-examples/datepicker-moment/datepicker-moment-example.html
@@ -1,4 +1,5 @@
-<mat-form-field>
+<mat-form-field appearance="outline">
+  <mat-label>Moment.js datepicker</mat-label>
   <input matInput [matDatepicker]="dp" placeholder="Moment.js datepicker" [formControl]="date">
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker #dp></mat-datepicker>
diff --git a/src/material-examples/datepicker-overview/datepicker-overview-example.css b/src/material-examples/datepicker-overview/datepicker-overview-example.css
index 7432308753e6..72e8f277570f 100644
--- a/src/material-examples/datepicker-overview/datepicker-overview-example.css
+++ b/src/material-examples/datepicker-overview/datepicker-overview-example.css
@@ -1 +1,4 @@
 /** No CSS for this example */
+.example-full-width {
+    width: 100%;
+}
diff --git a/src/material-examples/datepicker-overview/datepicker-overview-example.html b/src/material-examples/datepicker-overview/datepicker-overview-example.html
index f82880547b24..0007b228f17a 100644
--- a/src/material-examples/datepicker-overview/datepicker-overview-example.html
+++ b/src/material-examples/datepicker-overview/datepicker-overview-example.html
@@ -1,5 +1,16 @@
-<mat-form-field>
-  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
-  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-  <mat-datepicker #picker></mat-datepicker>
-</mat-form-field>
+<div class="example-full-width">
+  <mat-form-field appearance="outline">
+    <mat-label>Choose a date</mat-label>
+    <input matInput [matDatepicker]="picker" placeholder="Choose a date">
+    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+    <mat-datepicker #picker></mat-datepicker>
+  </mat-form-field>
+</div>
+<div class="example-full-width">
+  <mat-form-field appearance="fill">
+    <mat-label>Choose a date</mat-label>
+    <input matInput [matDatepicker]="picker1" placeholder="Choose a date">
+    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+    <mat-datepicker #picker1></mat-datepicker>
+  </mat-form-field>
+</div>
diff --git a/src/material-examples/datepicker-start-view/datepicker-start-view-example.html b/src/material-examples/datepicker-start-view/datepicker-start-view-example.html
index e10afcab6d26..cce80dd5b5bd 100644
--- a/src/material-examples/datepicker-start-view/datepicker-start-view-example.html
+++ b/src/material-examples/datepicker-start-view/datepicker-start-view-example.html
@@ -1,4 +1,5 @@
-<mat-form-field>
+<mat-form-field appearance="outline">
+  <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker" placeholder="Choose a date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
diff --git a/src/material-examples/datepicker-touch/datepicker-touch-example.html b/src/material-examples/datepicker-touch/datepicker-touch-example.html
index 70a7e61e264b..5f1dde00c58c 100644
--- a/src/material-examples/datepicker-touch/datepicker-touch-example.html
+++ b/src/material-examples/datepicker-touch/datepicker-touch-example.html
@@ -1,4 +1,5 @@
-<mat-form-field class="example-full-width">
+<mat-form-field appearance="outline" class="example-full-width">
+  <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker" placeholder="Choose a date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker touchUi #picker></mat-datepicker>
diff --git a/src/material-examples/datepicker-value/datepicker-value-example.css b/src/material-examples/datepicker-value/datepicker-value-example.css
index 7432308753e6..ae291c92146b 100644
--- a/src/material-examples/datepicker-value/datepicker-value-example.css
+++ b/src/material-examples/datepicker-value/datepicker-value-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+.example-full-width {
+    width: 100%;
+}
diff --git a/src/material-examples/datepicker-value/datepicker-value-example.html b/src/material-examples/datepicker-value/datepicker-value-example.html
index fbd5f591d1f1..a4b5288bd035 100644
--- a/src/material-examples/datepicker-value/datepicker-value-example.html
+++ b/src/material-examples/datepicker-value/datepicker-value-example.html
@@ -1,18 +1,26 @@
-<mat-form-field>
-  <input matInput [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
-  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
-  <mat-datepicker #picker1></mat-datepicker>
-</mat-form-field>
+<div class="example-full-width">
+  <mat-form-field appearance="outline">
+    <mat-label>Angular forms</mat-label>
+    <input matInput [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
+    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+    <mat-datepicker #picker1></mat-datepicker>
+  </mat-form-field>
+</div>
 
-<mat-form-field>
-  <input matInput [matDatepicker]="picker2" placeholder="Angular forms (w/ deserialization)"
-         [formControl]="serializedDate">
-  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
-  <mat-datepicker #picker2></mat-datepicker>
-</mat-form-field>
+<div class="example-full-width">
+  <mat-form-field appearance="outline">
+    <mat-label>Angular forms (w/ deserialization)</mat-label>
+    <input matInput [matDatepicker]="picker2" placeholder="Angular forms (w/ deserialization)" [formControl]="serializedDate">
+    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
+    <mat-datepicker #picker2></mat-datepicker>
+  </mat-form-field>
+</div>
 
-<mat-form-field>
-  <input matInput [matDatepicker]="picker3" placeholder="Value binding" [value]="date.value">
-  <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
-  <mat-datepicker #picker3></mat-datepicker>
-</mat-form-field>
+<div class="example-full-width">
+  <mat-form-field appearance="outline">
+    <mat-label>Value binding</mat-label>
+    <input matInput [matDatepicker]="picker3" placeholder="Value binding" [value]="date.value">
+    <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
+    <mat-datepicker #picker3></mat-datepicker>
+  </mat-form-field>
+</div>
diff --git a/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.html b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.html
index 4e972fce9dd6..b86649b36224 100644
--- a/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.html
+++ b/src/material-examples/datepicker-views-selection/datepicker-views-selection-example.html
@@ -1,10 +1,8 @@
-<mat-form-field>
+<mat-form-field appearance="outline">
+  <mat-label>Month and Year</mat-label>
   <input matInput [matDatepicker]="dp" placeholder="Month and Year" [formControl]="date">
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
-  <mat-datepicker #dp
-                  startView="multi-year"
-                  (yearSelected)="chosenYearHandler($event)"
-                  (monthSelected)="chosenMonthHandler($event, dp)"
-                  panelClass="example-month-picker">
+  <mat-datepicker #dp startView="multi-year" (yearSelected)="chosenYearHandler($event)" (monthSelected)="chosenMonthHandler($event, dp)"
+    panelClass="example-month-picker">
   </mat-datepicker>
 </mat-form-field>
diff --git a/src/material-examples/form-field-custom-control/example-tel-input-example.css b/src/material-examples/form-field-custom-control/example-tel-input-example.css
index 3c1dbad8f58c..74ccbaeb9250 100644
--- a/src/material-examples/form-field-custom-control/example-tel-input-example.css
+++ b/src/material-examples/form-field-custom-control/example-tel-input-example.css
@@ -19,3 +19,7 @@
 :host.example-floating .example-tel-input-spacer {
   opacity: 1;
 }
+
+.example-full-width {
+  width: 100%;
+}
diff --git a/src/material-examples/form-field-custom-control/form-field-custom-control-example.html b/src/material-examples/form-field-custom-control/form-field-custom-control-example.html
index 26df09b44d4e..54da829a3b5c 100644
--- a/src/material-examples/form-field-custom-control/form-field-custom-control-example.html
+++ b/src/material-examples/form-field-custom-control/form-field-custom-control-example.html
@@ -1,5 +1,18 @@
-<mat-form-field>
-  <example-tel-input placeholder="Phone number" required></example-tel-input>
-  <mat-icon matSuffix>phone</mat-icon>
-  <mat-hint>Include area code</mat-hint>
-</mat-form-field>
+<div class="example-full-width">
+  <mat-form-field appearance="outline">
+    <mat-label>Phone Number</mat-label>
+    <example-tel-input placeholder="Phone number" required></example-tel-input>
+    <mat-icon matSuffix>phone</mat-icon>
+    <mat-hint>Include area code</mat-hint>
+  </mat-form-field>
+
+</div>
+
+<div class="example-full-width">
+  <mat-form-field appearance="fill">
+    <mat-label>Phone Number</mat-label>
+    <example-tel-input placeholder="Phone number" required></example-tel-input>
+    <mat-icon matSuffix>phone</mat-icon>
+    <mat-hint>Include area code</mat-hint>
+  </mat-form-field>
+</div>
diff --git a/src/material-examples/form-field-error/form-field-error-example.html b/src/material-examples/form-field-error/form-field-error-example.html
index 4b06c9b07b86..30d2edf65c45 100644
--- a/src/material-examples/form-field-error/form-field-error-example.html
+++ b/src/material-examples/form-field-error/form-field-error-example.html
@@ -1,5 +1,6 @@
 <div class="example-container">
-  <mat-form-field>
+  <mat-form-field appearance="outline">
+    <mat-label>Email</mat-label>
     <input matInput placeholder="Enter your email" [formControl]="email" required>
     <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
   </mat-form-field>
diff --git a/src/material-examples/form-field-hint/form-field-hint-example.html b/src/material-examples/form-field-hint/form-field-hint-example.html
index a402d988c0fa..20bf4bf3c094 100644
--- a/src/material-examples/form-field-hint/form-field-hint-example.html
+++ b/src/material-examples/form-field-hint/form-field-hint-example.html
@@ -1,11 +1,13 @@
 <div class="example-container">
-  <mat-form-field hintLabel="Max 10 characters">
+  <mat-form-field hintLabel="Max 10 characters" appearance="outline">
+    <mat-label>Input</mat-label>
     <input matInput #input maxlength="10" placeholder="Enter some input">
     <mat-hint align="end">{{input.value?.length || 0}}/10</mat-hint>
   </mat-form-field>
 
   <mat-form-field>
-    <mat-select placeholder="Select me">
+    <mat-label>Select</mat-label>
+    <mat-select placeholder="Select me" appearance="outline">
       <mat-option value="option">Option</mat-option>
     </mat-select>
     <mat-hint align="end">Here's the dropdown arrow ^</mat-hint>
diff --git a/src/material-examples/form-field-label/form-field-label-example.html b/src/material-examples/form-field-label/form-field-label-example.html
index 4d0b41243456..4cfabed0c1cc 100644
--- a/src/material-examples/form-field-label/form-field-label-example.html
+++ b/src/material-examples/form-field-label/form-field-label-example.html
@@ -9,26 +9,34 @@
         <mat-radio-button value="never">Never</mat-radio-button>
       </mat-radio-group>
     </div>
+    <div>
+      <label>Appearance Style: </label>
+      <mat-radio-group formControlName="appearance">
+        <mat-radio-button value="outline">Outline</mat-radio-button>
+        <mat-radio-button value="fill">Fill</mat-radio-button>
+      </mat-radio-group>
+    </div>
   </form>
 
-  <mat-form-field
-      [hideRequiredMarker]="options.value.hideRequired"
-      [floatLabel]="options.value.floatLabel">
-    <input matInput placeholder="Simple placeholder" required>
+  <mat-form-field [hideRequiredMarker]="options.value.hideRequired" [floatLabel]="options.value.floatLabel"
+    [appearance]="options.value.appearance">
+    <mat-label>Label only</mat-label>
+    <input matInput required>
   </mat-form-field>
 
-  <mat-form-field [floatLabel]="options.value.floatLabel">
+  <mat-form-field [floatLabel]="options.value.floatLabel" [appearance]="options.value.appearance">
     <mat-label>Both a label and a placeholder</mat-label>
     <input matInput placeholder="Simple placeholder">
   </mat-form-field>
 
-  <mat-form-field
-      [hideRequiredMarker]="options.value.hideRequired"
-      [floatLabel]="options.value.floatLabel">
+  <mat-form-field [hideRequiredMarker]="options.value.hideRequired" [floatLabel]="options.value.floatLabel"
+    [appearance]="options.value.appearance">
     <mat-select required>
       <mat-option>-- None --</mat-option>
       <mat-option value="option">Option</mat-option>
     </mat-select>
-    <mat-label><mat-icon>favorite</mat-icon> <b> Fancy</b> <i> label</i></mat-label>
+    <mat-label>
+      <mat-icon>favorite</mat-icon> <b> Fancy</b> <i> label</i>
+    </mat-label>
   </mat-form-field>
 </div>
diff --git a/src/material-examples/form-field-label/form-field-label-example.ts b/src/material-examples/form-field-label/form-field-label-example.ts
index ee03367d79bb..7066ea172df3 100644
--- a/src/material-examples/form-field-label/form-field-label-example.ts
+++ b/src/material-examples/form-field-label/form-field-label-example.ts
@@ -14,6 +14,7 @@ export class FormFieldLabelExample {
     this.options = fb.group({
       hideRequired: false,
       floatLabel: 'auto',
+      appearance: 'outline',
     });
   }
 }
diff --git a/src/material-examples/form-field-overview/form-field-overview-example.html b/src/material-examples/form-field-overview/form-field-overview-example.html
index 6427e7df313b..d009b8409618 100644
--- a/src/material-examples/form-field-overview/form-field-overview-example.html
+++ b/src/material-examples/form-field-overview/form-field-overview-example.html
@@ -1,13 +1,33 @@
 <div class="example-container">
-  <mat-form-field>
+  <mat-form-field appearance="outline">
+    <mat-label>Input with outline appearance</mat-label>
     <input matInput placeholder="Input">
   </mat-form-field>
 
-  <mat-form-field>
+  <mat-form-field appearance="fill">
+    <mat-label>Input with fill appearance</mat-label>
+    <input matInput placeholder="Input">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline">
+    <mat-label>Textarea with outline appearance</mat-label>
+    <textarea matInput placeholder="Textarea"></textarea>
+  </mat-form-field>
+
+  <mat-form-field appearance="fill">
+    <mat-label>Textarea with fill appearance</mat-label>
     <textarea matInput placeholder="Textarea"></textarea>
   </mat-form-field>
 
-  <mat-form-field>
+  <mat-form-field appearance="outline">
+    <mat-label>Select with outline appearance</mat-label>
+    <mat-select placeholder="Select">
+      <mat-option value="option">Option</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field appearance="fill">
+    <mat-label>Select with fill appearance</mat-label>
     <mat-select placeholder="Select">
       <mat-option value="option">Option</mat-option>
     </mat-select>
diff --git a/src/material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.html b/src/material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.html
index bc4ef1087ea4..4b0bd36ac6b5 100644
--- a/src/material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.html
+++ b/src/material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.html
@@ -1,10 +1,12 @@
 <div class="example-container">
-  <mat-form-field>
+  <mat-form-field appearance="outline">
+    <mat-label>Password</mat-label>
     <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
     <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
   </mat-form-field>
 
-  <mat-form-field>
+  <mat-form-field appearance="outline">
+    <mat-label>Amount</mat-label>
     <input matInput placeholder="Amount" type="number" class="example-right-align">
     <span matPrefix>$&nbsp;</span>
     <span matSuffix>.00</span>
diff --git a/src/material-examples/form-field-theming/form-field-theming-example.html b/src/material-examples/form-field-theming/form-field-theming-example.html
index 5c614184e1a1..9bf2899ef0ce 100644
--- a/src/material-examples/form-field-theming/form-field-theming-example.html
+++ b/src/material-examples/form-field-theming/form-field-theming-example.html
@@ -1,5 +1,6 @@
 <form class="example-container" [formGroup]="options" [style.fontSize.px]="getFontSize()">
-  <mat-form-field [color]="options.value.color">
+  <mat-form-field [color]="options.value.color" appearance="outline">
+    <mat-label>Color</mat-label>
     <mat-select placeholder="Color" formControlName="color">
       <mat-option value="primary">Primary</mat-option>
       <mat-option value="accent">Accent</mat-option>
@@ -7,7 +8,8 @@
     </mat-select>
   </mat-form-field>
 
-  <mat-form-field [color]="options.value.color">
+  <mat-form-field [color]="options.value.color" appearance="outline">
+    <mat-label>Font size (px)</mat-label>
     <input matInput type="number" placeholder="Font size (px)" formControlName="fontSize" min="10">
     <mat-error *ngIf="options.get('fontSize')?.invalid">Min size: 10px</mat-error>
   </mat-form-field>
diff --git a/src/material-examples/input-clearable/input-clearable-example.html b/src/material-examples/input-clearable/input-clearable-example.html
index 4a135e1d60ff..028c38817712 100644
--- a/src/material-examples/input-clearable/input-clearable-example.html
+++ b/src/material-examples/input-clearable/input-clearable-example.html
@@ -1,4 +1,5 @@
-<mat-form-field class="example-form-field">
+<mat-form-field class="example-form-field" appearance="outline">
+  <mat-label>Clearable input</mat-label>
   <input matInput type="text" placeholder="Clearable input" [(ngModel)]="value">
   <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
     <mat-icon>close</mat-icon>
diff --git a/src/material-examples/input-error-state-matcher/input-error-state-matcher-example.html b/src/material-examples/input-error-state-matcher/input-error-state-matcher-example.html
index a9a0244209dd..c8c24966628b 100644
--- a/src/material-examples/input-error-state-matcher/input-error-state-matcher-example.html
+++ b/src/material-examples/input-error-state-matcher/input-error-state-matcher-example.html
@@ -1,7 +1,7 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
-    <input matInput placeholder="Email" [formControl]="emailFormControl"
-           [errorStateMatcher]="matcher">
+  <mat-form-field class="example-full-width" appearance="outline">
+    <mat-label>Email</mat-label>
+    <input matInput placeholder="Email" [formControl]="emailFormControl" [errorStateMatcher]="matcher">
     <mat-hint>Errors appear instantly!</mat-hint>
     <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
       Please enter a valid email address
diff --git a/src/material-examples/input-errors/input-errors-example.html b/src/material-examples/input-errors/input-errors-example.html
index cf241eef4ffd..bccc03e97286 100644
--- a/src/material-examples/input-errors/input-errors-example.html
+++ b/src/material-examples/input-errors/input-errors-example.html
@@ -1,5 +1,6 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="outline">
+    <mat-label>Email</mat-label>
     <input matInput placeholder="Email" [formControl]="emailFormControl">
     <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
       Please enter a valid email address
diff --git a/src/material-examples/input-form/input-form-example.html b/src/material-examples/input-form/input-form-example.html
index 8cf31e056b62..1b66db1fda29 100644
--- a/src/material-examples/input-form/input-form-example.html
+++ b/src/material-examples/input-form/input-form-example.html
@@ -1,36 +1,58 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="outline">
+    <mat-label>Company</mat-label>
     <input matInput placeholder="Company (disabled)" 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-form-field></td>
-    <td><mat-form-field class="example-full-width">
-      <input matInput placeholder="Long Last Name That Will Be Truncated">
-    </mat-form-field></td>
-  </tr></table>
+  <table class="example-full-width" cellspacing="0">
+    <tr>
+      <td>
+        <mat-form-field class="example-full-width" appearance="fill">
+          <mat-label>First Name</mat-label>
+          <input matInput placeholder="First name">
+        </mat-form-field>
+      </td>
+      <td>
+        <mat-form-field class="example-full-width" appearance="fill">
+          <mat-label>Last Name</mat-label>
+          <input matInput placeholder="Long Last Name That Will Be Truncated">
+        </mat-form-field>
+      </td>
+    </tr>
+  </table>
 
   <p>
-    <mat-form-field class="example-full-width">
+    <mat-form-field class="example-full-width" appearance="outline">
+      <mat-label>Address</mat-label>
       <textarea matInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
     </mat-form-field>
-    <mat-form-field class="example-full-width">
+    <mat-form-field class="example-full-width" appearance="fill">
+      <mat-label>Address 2</mat-label>
       <textarea matInput placeholder="Address 2"></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-form-field></td>
-    <td><mat-form-field class="example-full-width">
-      <input matInput placeholder="State">
-    </mat-form-field></td>
-    <td><mat-form-field class="example-full-width">
-      <input matInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
-      <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
-    </mat-form-field></td>
-  </tr></table>
+  <table class="example-full-width" cellspacing="0">
+    <tr>
+      <td>
+        <mat-form-field class="example-full-width" appearance="outline">
+          <mat-label>City</mat-label>
+          <input matInput placeholder="City">
+        </mat-form-field>
+      </td>
+      <td>
+        <mat-form-field class="example-full-width" appearance="outline">
+          <mat-label>State</mat-label>
+          <input matInput placeholder="State">
+        </mat-form-field>
+      </td>
+      <td>
+        <mat-form-field class="example-full-width" appearance="outline">
+          <mat-label>Postal Code</mat-label>
+          <input matInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
+          <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
+        </mat-form-field>
+      </td>
+    </tr>
+  </table>
 </form>
diff --git a/src/material-examples/input-hint/input-hint-example.html b/src/material-examples/input-hint/input-hint-example.html
index b7595cfa636b..e00ae5cef44d 100644
--- a/src/material-examples/input-hint/input-hint-example.html
+++ b/src/material-examples/input-hint/input-hint-example.html
@@ -1,9 +1,10 @@
 <form class="example-form">
 
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="outline">
+    <mat-label>Message</mat-label>
     <input matInput #message maxlength="256" placeholder="Message">
     <mat-hint align="start"><strong>Don't disclose personal info</strong> </mat-hint>
     <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
   </mat-form-field>
-  
+
 </form>
diff --git a/src/material-examples/input-overview/input-overview-example.html b/src/material-examples/input-overview/input-overview-example.html
index 5f3a09ceebc4..4f67d5a12f6d 100644
--- a/src/material-examples/input-overview/input-overview-example.html
+++ b/src/material-examples/input-overview/input-overview-example.html
@@ -1,9 +1,21 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="outline">
+    <mat-label>Favorite Food (Outline appearance) </mat-label>
     <input matInput placeholder="Favorite food" value="Sushi">
   </mat-form-field>
 
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="fill">
+    <mat-label>Favorite Food (Fill appearance)</mat-label>
+    <input matInput placeholder="Favorite food" value="Sushi">
+  </mat-form-field>
+
+  <mat-form-field class="example-full-width" appearance="outline">
+    <mat-label>Leave a Comment (Outline appearance)</mat-label>
+    <textarea matInput placeholder="Leave a comment"></textarea>
+  </mat-form-field>
+
+  <mat-form-field class="example-full-width" appearance="fill">
+    <mat-label>Leave a Comment (Fill appearance)</mat-label>
     <textarea matInput placeholder="Leave a comment"></textarea>
   </mat-form-field>
 </form>
diff --git a/src/material-examples/input-prefix-suffix/input-prefix-suffix-example.html b/src/material-examples/input-prefix-suffix/input-prefix-suffix-example.html
index 7bff7e420fcd..e62e1166c519 100644
--- a/src/material-examples/input-prefix-suffix/input-prefix-suffix-example.html
+++ b/src/material-examples/input-prefix-suffix/input-prefix-suffix-example.html
@@ -1,9 +1,20 @@
 <form class="example-form">
 
-  <mat-form-field class="example-full-width">
-    <span matPrefix>+1 &nbsp;</span>
-    <input type="tel" matInput placeholder="Telephone">
-    <mat-icon matSuffix>mode_edit</mat-icon>
-  </mat-form-field>
-  
+  <form class="example-form">
+    <mat-form-field class="example-full-width" appearance="fill">
+      <mat-label>Telephone (Fill Appearance) </mat-label>
+      <span matPrefix>+1 &nbsp;</span>
+      <input type="tel" matInput placeholder="Telephone">
+      <mat-icon matSuffix>mode_edit</mat-icon>
+    </mat-form-field>
+
+    <mat-form-field class="example-full-width" appearance="outline">
+      <mat-label>Telephone (Outline Appearance) </mat-label>
+      <span matPrefix>+1 &nbsp;</span>
+      <input type="tel" matInput placeholder="Telephone">
+      <mat-icon matSuffix>mode_edit</mat-icon>
+    </mat-form-field>
+
+  </form>
+
 </form>
diff --git a/src/material-examples/select-custom-trigger/select-custom-trigger-example.html b/src/material-examples/select-custom-trigger/select-custom-trigger-example.html
index 9c6f8960bb31..bf6afa1cb107 100644
--- a/src/material-examples/select-custom-trigger/select-custom-trigger-example.html
+++ b/src/material-examples/select-custom-trigger/select-custom-trigger-example.html
@@ -1,4 +1,5 @@
-<mat-form-field>
+<mat-form-field appearance="outline">
+  <mat-label>Toppings</mat-label>
   <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
     <mat-select-trigger>
       {{toppings.value ? toppings.value[0] : ''}}
diff --git a/src/material-examples/select-disabled/select-disabled-example.html b/src/material-examples/select-disabled/select-disabled-example.html
index 26bbe8e0df11..3d1db697d98a 100644
--- a/src/material-examples/select-disabled/select-disabled-example.html
+++ b/src/material-examples/select-disabled/select-disabled-example.html
@@ -3,7 +3,8 @@
 </p>
 
 <h4>mat-select</h4>
-<mat-form-field>
+<mat-form-field appearance="outline">
+  <mat-label>Choose an option</mat-label>
   <mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
     <mat-option value="option1">Option 1</mat-option>
     <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
@@ -12,7 +13,8 @@ <h4>mat-select</h4>
 </mat-form-field>
 
 <h4>native html select</h4>
-<mat-form-field>
+<mat-form-field appearance="outline">
+  <mat-label>Choose an option</mat-label>
   <select matNativeControl placeholder="Choose an option" [disabled]="disableSelect.value">
     <option value="" selected></option>
     <option value="volvo">Volvo</option>
@@ -21,4 +23,3 @@ <h4>native html select</h4>
     <option value="audi">Audi</option>
   </select>
 </mat-form-field>
-
diff --git a/src/material-examples/select-error-state-matcher/select-error-state-matcher-example.html b/src/material-examples/select-error-state-matcher/select-error-state-matcher-example.html
index ab8fcbb94197..3079d8a9742a 100644
--- a/src/material-examples/select-error-state-matcher/select-error-state-matcher-example.html
+++ b/src/material-examples/select-error-state-matcher/select-error-state-matcher-example.html
@@ -1,5 +1,6 @@
 <h4>mat-select</h4>
-<mat-form-field>
+<mat-form-field appearance="outline">
+  <mat-label>Choose one</mat-label>
   <mat-select placeholder="Choose one" [formControl]="selected" [errorStateMatcher]="matcher">
     <mat-option>Clear</mat-option>
     <mat-option value="valid">Valid option</mat-option>
@@ -13,7 +14,8 @@ <h4>mat-select</h4>
 </mat-form-field>
 
 <h4>native html select</h4>
-<mat-form-field class="demo-full-width">
+<mat-form-field appearance="outline">
+  <mat-label>Choose one</mat-label>
   <select matNativeControl placeholder="Choose one" [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
     <option value=""></option>
     <option value="valid" selected>Valid option</option>
diff --git a/src/material-examples/select-form/select-form-example.html b/src/material-examples/select-form/select-form-example.html
index 233dd9f46c81..e9238d143ab2 100644
--- a/src/material-examples/select-form/select-form-example.html
+++ b/src/material-examples/select-form/select-form-example.html
@@ -1,6 +1,7 @@
 <form>
   <h4>mat-select</h4>
-  <mat-form-field>
+  <mat-form-field appearance="outline">
+    <mat-label>Favorite Food</mat-label>
     <mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
       <mat-option *ngFor="let food of foods" [value]="food.value">
         {{food.viewValue}}
@@ -9,7 +10,8 @@ <h4>mat-select</h4>
   </mat-form-field>
   <p> Selected food: {{selectedValue}} </p>
   <h4>native html select</h4>
-  <mat-form-field>
+  <mat-form-field appearance="outline">
+    <mat-label>Favorite car</mat-label>
     <select matNativeControl placeholder="Favorite car" [(ngModel)]="selectedCar" name="car">
       <option value="" selected></option>
       <option *ngFor="let car of cars" [value]="car.value">
diff --git a/src/material-examples/select-hint-error/select-hint-error-example.html b/src/material-examples/select-hint-error/select-hint-error-example.html
index d7c9653725c2..1ea3e209514c 100644
--- a/src/material-examples/select-hint-error/select-hint-error-example.html
+++ b/src/material-examples/select-hint-error/select-hint-error-example.html
@@ -1,5 +1,6 @@
 <h4>mat select</h4>
-<mat-form-field>
+<mat-form-field appearance="outline">
+  <mat-label>Favorite animal</mat-label>
   <mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
     <mat-option>--</mat-option>
     <mat-option *ngFor="let animal of animals" [value]="animal">
@@ -11,7 +12,7 @@ <h4>mat select</h4>
 </mat-form-field>
 
 <h4>native html select</h4>
-<mat-form-field>
+<mat-form-field appearance="outline">
   <mat-label>Select your car (required)</mat-label>
   <select matNativeControl required [formControl]="selectFormControl">
     <option label="--select something --"></option>
@@ -24,4 +25,3 @@ <h4>native html select</h4>
   </mat-error>
   <mat-hint>You can pick up your favorite car here</mat-hint>
 </mat-form-field>
-
diff --git a/src/material-examples/select-multiple/select-multiple-example.html b/src/material-examples/select-multiple/select-multiple-example.html
index 916ae396391a..d449d351a94b 100644
--- a/src/material-examples/select-multiple/select-multiple-example.html
+++ b/src/material-examples/select-multiple/select-multiple-example.html
@@ -1,4 +1,5 @@
-<mat-form-field>
+<mat-form-field appearance="outline">
+  <mat-label>Toppings</mat-label>
   <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
     <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
   </mat-select>
diff --git a/src/material-examples/select-no-ripple/select-no-ripple-example.html b/src/material-examples/select-no-ripple/select-no-ripple-example.html
index a0b0ad4db057..d32ad9e73c41 100644
--- a/src/material-examples/select-no-ripple/select-no-ripple-example.html
+++ b/src/material-examples/select-no-ripple/select-no-ripple-example.html
@@ -1,4 +1,5 @@
-<mat-form-field>
+<mat-form-field appearance="outline">
+  <mat-label>Select an option</mat-label>
   <mat-select placeholder="Select an option" disableRipple>
     <mat-option value="1">Option 1</mat-option>
     <mat-option value="2">Option 2</mat-option>
diff --git a/src/material-examples/select-optgroup/select-optgroup-example.html b/src/material-examples/select-optgroup/select-optgroup-example.html
index 74bb7cad8216..030d21556440 100644
--- a/src/material-examples/select-optgroup/select-optgroup-example.html
+++ b/src/material-examples/select-optgroup/select-optgroup-example.html
@@ -1,9 +1,9 @@
 <h4>mat-select</h4>
-<mat-form-field>
+<mat-form-field appearance="outline">
+  <mat-label>Pokemon</mat-label>
   <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
     <mat-option>-- None --</mat-option>
-    <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
-                  [disabled]="group.disabled">
+    <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name" [disabled]="group.disabled">
       <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
         {{pokemon.viewValue}}
       </mat-option>
@@ -12,7 +12,8 @@ <h4>mat-select</h4>
 </mat-form-field>
 
 <h4>native html select</h4>
-<mat-form-field>
+<mat-form-field appearance="outline">
+  <mat-label>Cars</mat-label>
   <select matNativeControl>
     <optgroup label="Swedish Cars">
       <option value="volvo">volvo</option>
diff --git a/src/material-examples/select-overview/select-overview-example.css b/src/material-examples/select-overview/select-overview-example.css
index 7432308753e6..7a2e501666cb 100644
--- a/src/material-examples/select-overview/select-overview-example.css
+++ b/src/material-examples/select-overview/select-overview-example.css
@@ -1 +1,9 @@
-/** No CSS for this example */
+.example-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+}
+
+.example-full-width {
+    width: 100%;
+}
diff --git a/src/material-examples/select-overview/select-overview-example.html b/src/material-examples/select-overview/select-overview-example.html
index 5e6f1387f49f..adc6b2eb870e 100644
--- a/src/material-examples/select-overview/select-overview-example.html
+++ b/src/material-examples/select-overview/select-overview-example.html
@@ -1,18 +1,41 @@
-<h4>Basic mat-select</h4>
-<mat-form-field>
-  <mat-select placeholder="Favorite food">
-    <mat-option *ngFor="let food of foods" [value]="food.value">
-      {{food.viewValue}}
-    </mat-option>
-  </mat-select>
-</mat-form-field>
+<div class="example-form">
+  <h4>Basic mat-select</h4>
+  <mat-form-field class="example-full-width" appearance="outline">
+    <mat-label>Favorite food (Outline appearance)</mat-label>
+    <mat-select placeholder="Favorite food">
+      <mat-option *ngFor="let food of foods" [value]="food.value">
+        {{food.viewValue}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
 
-<h4>Basic native select</h4>
-<mat-form-field>
-  <select matNativeControl required>
-    <option value="volvo">Volvo</option>
-    <option value="saab">Saab</option>
-    <option value="mercedes">Mercedes</option>
-    <option value="audi">Audi</option>
-  </select>
-</mat-form-field>
+  <mat-form-field class="example-full-width" appearance="fill">
+    <mat-label>Favorite food (Fill appearance)</mat-label>
+    <mat-select placeholder="Favorite food">
+      <mat-option *ngFor="let food of foods" [value]="food.value">
+        {{food.viewValue}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <h4>Basic native select</h4>
+  <mat-form-field class="example-full-width" appearance="outline">
+    <mat-label>Favorite car (Outline appearance)</mat-label>
+    <select matNativeControl required>
+      <option value="volvo">Volvo</option>
+      <option value="saab">Saab</option>
+      <option value="mercedes">Mercedes</option>
+      <option value="audi">Audi</option>
+    </select>
+  </mat-form-field>
+
+  <mat-form-field class="example-full-width" appearance="fill">
+    <mat-label>Favorite car (Fill appearance)</mat-label>
+    <select matNativeControl required>
+      <option value="volvo">Volvo</option>
+      <option value="saab">Saab</option>
+      <option value="mercedes">Mercedes</option>
+      <option value="audi">Audi</option>
+    </select>
+  </mat-form-field>
+</div>
diff --git a/src/material-examples/select-panel-class/select-panel-class-example.html b/src/material-examples/select-panel-class/select-panel-class-example.html
index c3e560aa2dfd..4dc923dd5fe9 100644
--- a/src/material-examples/select-panel-class/select-panel-class-example.html
+++ b/src/material-examples/select-panel-class/select-panel-class-example.html
@@ -1,6 +1,6 @@
-<mat-form-field>
-  <mat-select placeholder="Panel color" [formControl]="panelColor"
-              panelClass="example-panel-{{panelColor.value}}">
+<mat-form-field appearance="outline">
+  <mat-label>Panel color</mat-label>
+  <mat-select placeholder="Panel color" [formControl]="panelColor" panelClass="example-panel-{{panelColor.value}}">
     <mat-option value="red">Red</mat-option>
     <mat-option value="green">Green</mat-option>
     <mat-option value="blue">Blue</mat-option>
diff --git a/src/material-examples/select-reset/select-reset-example.html b/src/material-examples/select-reset/select-reset-example.html
index 235939f9a022..538cca54ae39 100644
--- a/src/material-examples/select-reset/select-reset-example.html
+++ b/src/material-examples/select-reset/select-reset-example.html
@@ -1,5 +1,6 @@
 <h4>mat-select</h4>
-<mat-form-field>
+<mat-form-field appearance="fill">
+  <mat-label>State</mat-label>
   <mat-select placeholder="State">
     <mat-option>None</mat-option>
     <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
@@ -7,7 +8,7 @@ <h4>mat-select</h4>
 </mat-form-field>
 
 <h4>native html select</h4>
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Select your car</mat-label>
   <select matNativeControl id="mySelectId">
     <option value="" disabled selected></option>
diff --git a/src/material-examples/select-value-binding/select-value-binding-example.html b/src/material-examples/select-value-binding/select-value-binding-example.html
index aa3e93b46e0f..5e65531ef0d8 100644
--- a/src/material-examples/select-value-binding/select-value-binding-example.html
+++ b/src/material-examples/select-value-binding/select-value-binding-example.html
@@ -1,4 +1,5 @@
-<mat-form-field>
+<mat-form-field appearance="outline">
+  <mat-label>Options</mat-label>
   <mat-select [(value)]="selected">
     <mat-option>None</mat-option>
     <mat-option value="option1">Option 1</mat-option>
diff --git a/src/material-examples/slider-configurable/slider-configurable-example.css b/src/material-examples/slider-configurable/slider-configurable-example.css
index 1f954ba8b48a..44bf631ee786 100644
--- a/src/material-examples/slider-configurable/slider-configurable-example.css
+++ b/src/material-examples/slider-configurable/slider-configurable-example.css
@@ -10,7 +10,8 @@
 }
 
 .example-margin {
-  margin: 10px;
+  margin: 3px;
+  width: 24%;
 }
 
 .mat-slider-horizontal {
diff --git a/src/material-examples/slider-configurable/slider-configurable-example.html b/src/material-examples/slider-configurable/slider-configurable-example.html
index 8f3544a43b1c..2339652cf91f 100644
--- a/src/material-examples/slider-configurable/slider-configurable-example.html
+++ b/src/material-examples/slider-configurable/slider-configurable-example.html
@@ -3,16 +3,21 @@
     <h2 class="example-h2">Slider configuration</h2>
 
     <section class="example-section">
-      <mat-form-field class="example-margin">
+      <mat-form-field class="example-margin" appearance="fill">
+        <mat-label>Value</mat-label>
         <input matInput type="number" placeholder="Value" [(ngModel)]="value">
       </mat-form-field>
-      <mat-form-field class="example-margin">
+      <mat-form-field class="example-margin" appearance="fill">
+        <mat-label>Min value</mat-label>
+
         <input matInput type="number" placeholder="Min value" [(ngModel)]="min">
       </mat-form-field>
-      <mat-form-field class="example-margin">
+      <mat-form-field class="example-margin" appearance="fill">
+        <mat-label>Max value</mat-label>
         <input matInput type="number" placeholder="Max value" [(ngModel)]="max">
       </mat-form-field>
-      <mat-form-field class="example-margin">
+      <mat-form-field class="example-margin" appearance="fill">
+        <mat-label>Step size</mat-label>
         <input matInput type="number" placeholder="Step size" [(ngModel)]="step">
       </mat-form-field>
     </section>
@@ -22,7 +27,8 @@ <h2 class="example-h2">Slider configuration</h2>
       <mat-checkbox class="example-margin" [(ngModel)]="autoTicks" *ngIf="showTicks">
         Auto ticks
       </mat-checkbox>
-      <mat-form-field class="example-margin" *ngIf="showTicks && !autoTicks">
+      <mat-form-field class="example-margin" appearance="fill" *ngIf="showTicks && !autoTicks">
+        <mat-label>Tick interval</mat-label>
         <input matInput type="number" placeholder="Tick interval" [(ngModel)]="tickInterval">
       </mat-form-field>
     </section>
@@ -47,17 +53,8 @@ <h2 class="example-h2">Slider configuration</h2>
   <mat-card-content>
     <h2 class="example-h2">Result</h2>
 
-    <mat-slider
-        class="example-margin"
-        [disabled]="disabled"
-        [invert]="invert"
-        [max]="max"
-        [min]="min"
-        [step]="step"
-        [thumbLabel]="thumbLabel"
-        [tickInterval]="tickInterval"
-        [(ngModel)]="value"
-        [vertical]="vertical">
+    <mat-slider class="example-margin" [disabled]="disabled" [invert]="invert" [max]="max" [min]="min" [step]="step"
+      [thumbLabel]="thumbLabel" [tickInterval]="tickInterval" [(ngModel)]="value" [vertical]="vertical">
     </mat-slider>
   </mat-card-content>
 </mat-card>