docs: explicitly set form field appearance

src/components-examples/cdk/a11y/focus-monitor-focus-via/focus-monitor-focus-via-example.html

@@ -3,7 +3,7 @@
   <button #unmonitored>2. Not Monitored</button>
 </div>
 
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Simulated focus origin</mat-label>
   <mat-select #simulatedOrigin value="mouse">
     <mat-option value="mouse">Mouse</mat-option>

src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.html

@@ -1,10 +1,10 @@
 <form (submit)="$event.preventDefault()">
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>First name</mat-label>
     <input matInput (cdkAutofill)="firstNameAutofilled = $event.isAutofilled">
     <mat-hint *ngIf="firstNameAutofilled">Autofilled!</mat-hint>
   </mat-form-field>
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>Last name</mat-label>
     <input matInput (cdkAutofill)="lastNameAutofilled = $event.isAutofilled">
     <mat-hint *ngIf="lastNameAutofilled">Autofilled!</mat-hint>

src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.html

@@ -1,10 +1,10 @@
 <form (submit)="$event.preventDefault()">
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>First name</mat-label>
     <input matInput #first>
     <mat-hint *ngIf="firstNameAutofilled">Autofilled!</mat-hint>
   </mat-form-field>
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>Last name</mat-label>
     <input matInput #last>
     <mat-hint *ngIf="lastNameAutofilled">Autofilled!</mat-hint>

src/components-examples/cdk/text-field/text-field-autosize-textarea/text-field-autosize-textarea-example.html

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Font size</mat-label>
   <mat-select #fontSize value="16px" (selectionChange)="triggerResize()">
     <mat-option value="10px">10px</mat-option>
@@ -10,7 +10,7 @@
   </mat-select>
 </mat-form-field>
 
-<mat-form-field [style.fontSize]="fontSize.value">
+<mat-form-field [style.fontSize]="fontSize.value" appearance="fill">
   <mat-label>Autosize textarea</mat-label>
   <textarea matInput
             cdkTextareaAutosize

src/components-examples/material-experimental/mdc-form-field/mdc-form-field-custom-control/form-field-custom-control-example.html

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="fill">
   <mat-label>Phone number</mat-label>
   <example-tel-input required></example-tel-input>
   <mat-icon matSuffix>phone</mat-icon>

src/components-examples/material-experimental/popover-edit/popover-edit-cell-span-mat-table/popover-edit-cell-span-mat-table-example.html

@@ -7,15 +7,15 @@
           [matEditLensPreservedFormValue]="preservedValues.get(ctx.person)"
           (matEditLensPreservedFormValueChange)="preservedValues.set(ctx.person, $event)">
         <div mat-edit-content class="example-input-container">
-          <mat-form-field>
+          <mat-form-field appearance="fill">
             <input matInput [ngModel]="ctx.person.firstName" name="firstName" required
                 [attr.cdkFocusInitial]="ctx.focus === 'firstName' || null">
           </mat-form-field>
-          <mat-form-field>
+          <mat-form-field appearance="fill">
             <input matInput [ngModel]="ctx.person.middleName" name="middleName"
                 [attr.cdkFocusInitial]="ctx.focus === 'middleName' || null">
           </mat-form-field>
-          <mat-form-field>
+          <mat-form-field appearance="fill">
             <input matInput [ngModel]="ctx.person.lastName" name="lastName" required
                 [attr.cdkFocusInitial]="ctx.focus === 'lastName' || null">
           </mat-form-field>

src/components-examples/material-experimental/popover-edit/popover-edit-mat-table-flex/popover-edit-mat-table-flex-example.html

@@ -11,7 +11,7 @@
           [matEditLensPreservedFormValue]="preservedWeightValues.get(element)"
           (matEditLensPreservedFormValueChange)="preservedWeightValues.set(element, $event)">
         <div mat-edit-content>
-          <mat-form-field>
+          <mat-form-field appearance="fill">
             <input matInput type="number" [ngModel]="element.weight" name="weight" required>
           </mat-form-field>
         </div>
@@ -31,7 +31,7 @@
     <mat-cell *matCellDef="let element"
         [matPopoverEdit]="nameEdit">
       {{element.name}}
-      
+
       <!-- This edit is defined in the cell and can implicitly access element -->
       <ng-template #nameEdit>
         <div>
@@ -42,7 +42,7 @@
               (matEditLensPreservedFormValueChange)="preservedNameValues.set(element, $event)">
             <h2 mat-edit-title>Name</h2>
             <div mat-edit-content>
-              <mat-form-field>
+              <mat-form-field appearance="fill">
                 <input matInput [ngModel]="element.name" name="name" required>
               </mat-form-field>
             </div>
@@ -67,7 +67,7 @@ <h2 mat-edit-title>Name</h2>
     <mat-cell *matCellDef="let element"
         [matPopoverEdit]="weightEdit" [matPopoverEditContext]="element">
       {{element.weight}}
-      
+
       <span *matRowHoverContent>
         <button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
       </span>

src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.html

@@ -10,7 +10,7 @@
           (ngSubmit)="onSubmitWeight(element, f)"
           [(matEditLensPreservedFormValue)]="weightValues.for(element).value">
         <div mat-edit-content>
-          <mat-form-field>
+          <mat-form-field appearance="fill">
             <input matInput type="number" [ngModel]="element.weight" name="weight" required>
           </mat-form-field>
         </div>
@@ -47,7 +47,7 @@
         [matPopoverEdit]="nameEdit"
         [matPopoverEditDisabled]="!nameEditEnabled">
       {{element.name}}
-      
+
       <!-- This edit is defined in the cell and can implicitly access element -->
       <ng-template #nameEdit>
         <div>
@@ -57,7 +57,7 @@
               [(matEditLensPreservedFormValue)]="nameValues.for(element).value">
             <h2 mat-edit-title>Name</h2>
             <div mat-edit-content>
-              <mat-form-field>
+              <mat-form-field appearance="fill">
                 <input matInput [ngModel]="element.name" name="name" required>
               </mat-form-field>
             </div>
@@ -121,7 +121,7 @@ <h2 mat-edit-title>Name</h2>
     <td mat-cell *matCellDef="let element"
         [matPopoverEdit]="weightEdit" [matPopoverEditContext]="element">
       {{element.weight}}
-      
+
       <span *matRowHoverContent>
         <button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
       </span>

src/components-examples/material-experimental/popover-edit/popover-edit-tab-out-mat-table/popover-edit-tab-out-mat-table-example.html

@@ -12,7 +12,7 @@
           [matEditLensPreservedFormValue]="preservedWeightValues.get(element)"
           (matEditLensPreservedFormValueChange)="preservedWeightValues.set(element, $event)">
         <div mat-edit-content>
-          <mat-form-field>
+          <mat-form-field appearance="fill">
             <input matInput type="number" [ngModel]="element.weight" name="weight" required>
           </mat-form-field>
         </div>
@@ -33,7 +33,7 @@
         [matPopoverEdit]="nameEdit" matPopoverEditTabOut
         matEditOpen>
       {{element.name}}
-      
+
       <!-- This edit is defined in the cell and can implicitly access element -->
       <ng-template #nameEdit>
         <div>
@@ -44,7 +44,7 @@
               [matEditLensPreservedFormValue]="preservedNameValues.get(element)"
               (matEditLensPreservedFormValueChange)="preservedNameValues.set(element, $event)">
             <div mat-edit-content>
-              <mat-form-field>
+              <mat-form-field appearance="fill">
                 <input matInput [ngModel]="element.name" name="name" required>
               </mat-form-field>
             </div>
@@ -66,7 +66,7 @@
         [matPopoverEditContext]="element"
         matEditOpen>
       {{element.weight}}
-      
+
       <span *matRowHoverContent>
         <mat-icon>edit</mat-icon>
       </span>

src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>Number</mat-label>
     <input type="text"
            placeholder="Pick one"

src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.html

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>Assignee</mat-label>
     <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
     <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">

src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.html

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>Number</mat-label>
     <input type="text"
            placeholder="Pick one"

src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.html

@@ -1,5 +1,5 @@
 <form [formGroup]="stateForm">
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>States Group</mat-label>
     <input type="text"
            matInput

src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.html

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>State</mat-label>
     <input matInput
            aria-label="State"

src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.html

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>Number</mat-label>
 <!-- #docregion input -->
     <input type="text"

src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html

@@ -1,4 +1,4 @@
-<mat-form-field class="example-chip-list">
+<mat-form-field class="example-chip-list" appearance="fill">
   <mat-label>Favorite Fruits</mat-label>
   <mat-chip-list #chipList aria-label="Fruit selection">
     <mat-chip

src/components-examples/material/chips/chips-form-control/chips-form-control-example.html

@@ -7,7 +7,7 @@
   Selected keywords: {{formControl.value}}
 </p>
 
-<mat-form-field class="example-chip-list">
+<mat-form-field class="example-chip-list" appearance="fill">
   <mat-label>Video keywords</mat-label>
   <mat-chip-list #chipList aria-label="Video keywords" multiple [formControl]="formControl">
     <mat-chip

src/components-examples/material/chips/chips-input/chips-input-example.html

@@ -1,4 +1,4 @@
-<mat-form-field class="example-chip-list">
+<mat-form-field class="example-chip-list" appearance="fill">
   <mat-label>Favorite Fruits</mat-label>
   <mat-chip-list #chipList aria-label="Fruit selection">
     <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"

src/components-examples/material/core/ripple-overview/ripple-overview-example.html

@@ -2,10 +2,10 @@
 <mat-checkbox [(ngModel)]="disabled" class="example-ripple-checkbox">Disabled</mat-checkbox>
 <mat-checkbox [(ngModel)]="unbounded" class="example-ripple-checkbox">Unbounded</mat-checkbox>
 
-<mat-form-field class="example-ripple-form-field">
+<mat-form-field class="example-ripple-form-field" appearance="fill">
   <input matInput [(ngModel)]="radius" type="number" placeholder="Radius">
 </mat-form-field>
-<mat-form-field class="example-ripple-form-field">
+<mat-form-field class="example-ripple-form-field" appearance="fill">
   <input matInput [(ngModel)]="color" type="text" placeholder="Color">
 </mat-form-field>
 

src/components-examples/material/dialog/dialog-overview/dialog-overview-example-dialog.html

@@ -1,7 +1,7 @@
 <h1 mat-dialog-title>Hi {{data.name}}</h1>
 <div mat-dialog-content>
   <p>What's your favorite animal?</p>
-  <mat-form-field>
+  <mat-form-field appearance="fill">
     <mat-label>Favorite Animal</mat-label>
     <input matInput [(ngModel)]="data.animal">
   </mat-form-field>

src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html

@@ -1,6 +1,6 @@
 <ol>
   <li>
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>What's your name?</mat-label>
       <input matInput [(ngModel)]="name">
     </mat-form-field>

src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html

@@ -16,12 +16,12 @@
       </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>First name</mat-label>
       <input matInput>
     </mat-form-field>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>Age</mat-label>
       <input matInput type="number" min="1">
     </mat-form-field>
@@ -40,7 +40,7 @@
       </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>Country</mat-label>
       <input matInput>
     </mat-form-field>
@@ -57,7 +57,7 @@
       </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>Date</mat-label>
       <input matInput [matDatepicker]="picker" (focus)="picker.open()" readonly>
     </mat-form-field>

src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html

@@ -10,12 +10,12 @@
       </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>First name</mat-label>
       <input matInput>
     </mat-form-field>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>Age</mat-label>
       <input matInput type="number" min="1">
     </mat-form-field>
@@ -37,7 +37,7 @@
       </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>Country</mat-label>
       <input matInput>
     </mat-form-field>
@@ -59,7 +59,7 @@
       </mat-panel-description>
     </mat-expansion-panel-header>
 
-    <mat-form-field>
+    <mat-form-field appearance="fill">
       <mat-label>Date</mat-label>
       <input matInput [matDatepicker]="picker" (focus)="picker.open()" readonly>
     </mat-form-field>

src/components-examples/material/input/input-clearable/input-clearable-example.html

@@ -1,4 +1,4 @@
-<mat-form-field class="example-form-field">
+<mat-form-field class="example-form-field" appearance="fill">
   <mat-label>Clearable input</mat-label>
   <input matInput type="text" [(ngModel)]="value">
   <button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">

src/components-examples/material/input/input-error-state-matcher/input-error-state-matcher-example.html

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>Email</mat-label>
     <input type="email" matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher"
            placeholder="Ex. [email protected]">

src/components-examples/material/input/input-errors/input-errors-example.html

@@ -1,5 +1,5 @@
 <form class="example-form">
-  <mat-form-field class="example-full-width">
+  <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>Email</mat-label>
     <input type="email" matInput [formControl]="emailFormControl" placeholder="Ex. [email protected]">
     <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">