From 21d4c42571cd7151be0689312956abc64702edb5 Mon Sep 17 00:00:00 2001
From: Vivian Hu <vivianhu@google.com>
Date: Tue, 31 Jul 2018 16:28:48 -0700
Subject: [PATCH 1/3] update dependency

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 1bf2d290c08a..14c82982ccdc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,7 @@ node_modules
 # IDEs
 /.idea
 /.vscode
+/*.iml
 
 # misc
 .DS_Store

From 4c8448a39d975e44b0db0e6eaee9d30c211e18a3 Mon Sep 17 00:00:00 2001
From: Vivian Hu <vivianhu@google.com>
Date: Fri, 3 Aug 2018 15:43:11 -0700
Subject: [PATCH 2/3] feat(input): add native select to be form input.

---
 src/demo-app/select/select-demo.html          | 161 ++++++++++++++++++
 src/demo-app/select/select-demo.ts            |  16 +-
 src/lib/form-field/form-field.md              |   4 +-
 src/lib/input/input.scss                      |  27 +++
 src/lib/input/input.spec.ts                   | 132 ++++++++++++++
 src/lib/input/input.ts                        |  20 ++-
 src/lib/select/select.md                      |  25 ++-
 .../select-disabled-example.html              |  30 +++-
 .../select-error-state-matcher-example.html   |  14 ++
 .../select-error-state-matcher-example.ts     |  10 ++
 .../select-form/select-form-example.html      |  14 +-
 .../select-form/select-form-example.ts        |  12 ++
 .../select-hint-error-example.html            |  17 ++
 .../select-hint-error-example.ts              |   1 +
 .../select-optgroup-example.html              |  15 ++
 .../select-overview-example.html              |  11 ++
 .../select-reset/select-reset-example.html    |  13 ++
 17 files changed, 498 insertions(+), 24 deletions(-)

diff --git a/src/demo-app/select/select-demo.html b/src/demo-app/select/select-demo.html
index 2b2cf07d1e1c..6abd94afcbd9 100644
--- a/src/demo-app/select/select-demo.html
+++ b/src/demo-app/select/select-demo.html
@@ -1,3 +1,163 @@
+
+
+<mat-card class="demo-card demo-basic">
+  <mat-toolbar color="primary">Native Select</mat-toolbar>
+  <mat-card-content>
+    <form>
+      <h4>Basic</h4>
+      <mat-form-field class="demo-full-width">
+        <mat-label>Select your car</mat-label>
+        <select matControl id="mySelectId">
+          <option value="" disabled selected></option>
+          <option value="volvo">Volvo</option>
+          <option value="saab" disabled>Saab</option>
+          <option value="mercedes">Mercedes</option>
+          <option value="audi">Audi</option>
+        </select>
+      </mat-form-field>
+      <h4>Disabled and required</h4>
+      <mat-form-field class="demo-full-width">
+        <mat-label>Select your car (disabled)</mat-label>
+        <select matControl disabled 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>
+      <h4>Floating label</h4>
+      <mat-form-field>
+        <mat-label>Float with value</mat-label>
+        <select matControl>
+          <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>
+        <mat-label>Not float when empty</mat-label>
+        <select matControl>
+          <option value="" selected></option>
+          <option value="saab">Saab</option>
+          <option value="mercedes">Mercedes</option>
+          <option value="audi">Audi</option>
+        </select>
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Float with no value, but with label</mat-label>
+        <select matControl>
+          <option value="" selected label="--select one--"></option>
+          <option value="saab">Saab</option>
+          <option value="mercedes">Mercedes</option>
+          <option value="audi">Audi</option>
+        </select>
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Float with no value, but with html</mat-label>
+        <select matControl>
+          <option value="" selected>--select one--</option>
+          <option value="saab">Saab</option>
+          <option value="mercedes">Mercedes</option>
+          <option value="audi">Audi</option>
+        </select>
+      </mat-form-field>
+      <h4>Looks</h4>
+      <mat-form-field appearance="legacy">
+        <mat-label>Legacy</mat-label>
+        <select matControl 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 appearance="standard">
+        <mat-label>Standard</mat-label>
+        <select matControl 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 appearance="fill">
+        <mat-label>Fill</mat-label>
+        <select matControl 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 appearance="outline">
+        <mat-label>Outline</mat-label>
+        <select matControl>
+          <option value="volvo">volvo</option>
+          <option value="saab">Saab</option>
+          <option value="mercedes">Mercedes</option>
+          <option value="audi">Audi</option>
+        </select>
+      </mat-form-field>
+      <h4>Option group</h4>
+      <mat-form-field>
+        <select matControl>
+          <optgroup label="Swedish Cars">
+            <option value="volvo">volvo</option>
+            <option value="saab">Saab</option>
+          </optgroup>
+          <optgroup label="German Cars">
+            <option value="mercedes">Mercedes</option>
+            <option value="audi">Audi</option>
+          </optgroup>
+        </select>
+      </mat-form-field>
+      <h4>Place holder</h4>
+      <mat-form-field class="demo-full-width">
+        <select matControl placeholder="place holder">
+          <option value="" disabled selected></option>
+          <option value="volvo">Volvo</option>
+          <option value="saab" disabled>Saab</option>
+          <option value="mercedes">Mercedes</option>
+          <option value="audi">Audi</option>
+        </select>
+      </mat-form-field>
+      <h4>Error message, hint, form sumbit</h4>
+      <mat-form-field class="demo-full-width">
+        <mat-label>Select your car (required)</mat-label>
+        <select matControl required [formControl]="selectFormControl">
+          <option label="--select something --"></option>
+          <option value="saab">Saab</option>
+          <option value="mercedes">Mercedes</option>
+          <option value="audi">Audi</option>
+        </select>
+        <mat-error *ngIf="selectFormControl.hasError('required')">
+          This field is required
+        </mat-error>
+        <mat-hint>You can pick up your favorite car here</mat-hint>
+      </mat-form-field>
+
+      <h4>Error message with errorStateMatcher</h4>
+      <mat-form-field class="demo-full-width">
+        <mat-label>Select your car</mat-label>
+        <select matControl required [formControl]="selectFormControl" [errorStateMatcher]="matcher">
+          <option label="--select something --"></option>
+          <option value="saab">Saab</option>
+          <option value="mercedes">Mercedes</option>
+          <option value="audi">Audi</option>
+        </select>
+        <mat-error *ngIf="selectFormControl.hasError('required')">
+          This field is required
+        </mat-error>
+        <mat-hint>You can pick up your favorite car here</mat-hint>
+      </mat-form-field>
+      <button color="primary" mat-raised-button>Submit</button>
+    </form>
+  </mat-card-content>
+</mat-card>
+
+
+<mat-toolbar color="primary">mat-select</mat-toolbar>
 Space above cards: <input type="number" [formControl]="topHeightCtrl">
 <button mat-button (click)="showSelect=!showSelect">SHOW SELECT</button>
 <div [style.height.px]="topHeightCtrl.value"></div>
@@ -240,3 +400,4 @@
 
 </div>
 <div style="height: 500px">This div is for testing scrolled selects.</div>
+
diff --git a/src/demo-app/select/select-demo.ts b/src/demo-app/select/select-demo.ts
index 56f0305af7c5..dabde38fca54 100644
--- a/src/demo-app/select/select-demo.ts
+++ b/src/demo-app/select/select-demo.ts
@@ -7,9 +7,18 @@
  */
 
 import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
-import {MatSelectChange} from '@angular/material';
+import {FormControl, Validators} from '@angular/forms';
+import {ErrorStateMatcher, MatSelectChange} from '@angular/material';
 
+/** Error any time control is invalid */
+export class MyErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null): boolean {
+    if (control) {
+      return control.invalid;
+    }
+    return false;
+  }
+}
 
 @Component({
     moduleId: module.id,
@@ -37,6 +46,7 @@ export class SelectDemo {
   drinksTheme = 'primary';
   pokemonTheme = 'primary';
   compareByValue = true;
+  selectFormControl = new FormControl('', Validators.required);
 
   foods = [
     {value: null, viewValue: 'None'},
@@ -137,6 +147,8 @@ export class SelectDemo {
     return o1 === o2;
   }
 
+  matcher = new MyErrorStateMatcher();
+
   toggleSelected() {
     this.currentAppearanceValue = this.currentAppearanceValue ? null : this.digimon[0].value;
   }
diff --git a/src/lib/form-field/form-field.md b/src/lib/form-field/form-field.md
index e431374ed1ca..6a1d14396890 100644
--- a/src/lib/form-field/form-field.md
+++ b/src/lib/form-field/form-field.md
@@ -8,6 +8,7 @@ In this document, "form field" refers to the wrapper component `<mat-form-field>
 
 The following Angular Material components are designed to work inside a `<mat-form-field>`:
 * [`<input matInput>` &amp; `<textarea matInput>`](https://material.angular.io/components/input/overview)
+* [`<select matInput>`](https://material.angular.io/components/select/overview)
 * [`<mat-select>`](https://material.angular.io/components/select/overview)
 * [`<mat-chip-list>`](https://material.angular.io/components/chips/overview)
 
@@ -41,7 +42,8 @@ want a floating label, add a `<mat-label>` to the `mat-form-field`.
 ### Floating label
 
 The floating label is a text label displayed on top of the form field control when
-the control does not contain any text. By default, when text is present the floating label
+the control does not contain any text or when `<select matInput>` does not show any option text. 
+By default, when text is present the floating label
 floats above the form field control. The label for a form field can be specified by adding a
 `mat-label` element.
 
diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss
index 87d6581753f6..90d395c74a78 100644
--- a/src/lib/input/input.scss
+++ b/src/lib/input/input.scss
@@ -121,3 +121,30 @@ textarea.mat-input-element {
   padding: 2px 0;
   margin: -2px 0;
 }
+
+// Remove select button from IE11
+select.mat-input-element::-ms-expand {
+  display: none;
+}
+
+//encoded material design select arrow svg
+/* stylelint-disable max-line-length */
+$mat-native-select-arrow-svg: 'data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%225%22%20viewBox%3D%227%2010%2010%205%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%230%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22.54%22%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E';
+/* stylelint-enable */
+
+select.mat-input-element {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  background-color: transparent;
+  background-image: url($mat-native-select-arrow-svg);
+  background-repeat: no-repeat;
+  display: inline-flex;
+  box-sizing: border-box;
+  background-position: right center;
+
+  [dir='rtl'] & {
+    background-position: left center;
+  }
+}
+
diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts
index 56abcfb59d2e..e36f1c2f9177 100644
--- a/src/lib/input/input.spec.ts
+++ b/src/lib/input/input.spec.ts
@@ -443,6 +443,26 @@ describe('MatInput without forms', () => {
     expect(inputEl.disabled).toBe(true);
   }));
 
+  it('supports the disabled attribute as binding for select', fakeAsync(() => {
+    const fixture = createComponent(MatInputSelect);
+    fixture.detectChanges();
+
+    const formFieldEl =
+      fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
+    const inputEl = fixture.debugElement.query(By.css('select')).nativeElement;
+
+    expect(formFieldEl.classList.contains('mat-form-field-disabled'))
+      .toBe(false, `Expected form field not to start out disabled.`);
+    expect(inputEl.disabled).toBe(false);
+
+    fixture.componentInstance.disabled = true;
+    fixture.detectChanges();
+
+    expect(formFieldEl.classList.contains('mat-form-field-disabled'))
+      .toBe(true, `Expected form field to look disabled after property is set.`);
+    expect(inputEl.disabled).toBe(true);
+  }));
+
   it('supports the required attribute as binding', fakeAsync(() => {
     let fixture = createComponent(MatInputWithRequired);
     fixture.detectChanges();
@@ -457,6 +477,20 @@ describe('MatInput without forms', () => {
     expect(inputEl.required).toBe(true);
   }));
 
+  it('supports the required attribute as binding for select', fakeAsync(() => {
+    const fixture = createComponent(MatInputSelect);
+    fixture.detectChanges();
+
+    const inputEl = fixture.debugElement.query(By.css('select')).nativeElement;
+
+    expect(inputEl.required).toBe(false);
+
+    fixture.componentInstance.required = true;
+    fixture.detectChanges();
+
+    expect(inputEl.required).toBe(true);
+  }));
+
   it('supports the type attribute as binding', fakeAsync(() => {
     let fixture = createComponent(MatInputWithType);
     fixture.detectChanges();
@@ -479,6 +513,14 @@ describe('MatInput without forms', () => {
     expect(textarea).not.toBeNull();
   }));
 
+  it('supports select', fakeAsync(() => {
+    const fixture = createComponent(MatInputSelect);
+    fixture.detectChanges();
+
+    const nativeSelect: HTMLTextAreaElement = fixture.nativeElement.querySelector('select');
+    expect(nativeSelect).not.toBeNull();
+  }));
+
   it('sets the aria-describedby when a hintLabel is set', fakeAsync(() => {
     let fixture = createComponent(MatInputHintLabelTestController);
 
@@ -577,6 +619,41 @@ describe('MatInput without forms', () => {
     expect(formFieldEl.classList).toContain('mat-form-field-should-float');
   }));
 
+  it('should float labels when select has value', fakeAsync(() => {
+    const fixture = createComponent(MatInputSelect);
+    fixture.detectChanges();
+
+    const formFieldEl = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
+    expect(formFieldEl.classList).toContain('mat-form-field-should-float');
+  }));
+
+  it('should not float labels when select has no value, no option label, ' +
+      'no option innerHtml', fakeAsync(() => {
+    const fixture = createComponent(MatInputSelectWithNoLabelNoValue);
+    fixture.detectChanges();
+
+    const formFieldEl = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
+    expect(formFieldEl.classList).not.toContain('mat-form-field-should-float');
+  }));
+
+  it('should floating labels when select has no value but has option label',
+      fakeAsync(() => {
+    const fixture = createComponent(MatInputSelectWithLabel);
+    fixture.detectChanges();
+
+    const formFieldEl = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
+    expect(formFieldEl.classList).toContain('mat-form-field-should-float');
+  }));
+
+  it('should floating labels when select has no value but has option innerHTML',
+    fakeAsync(() => {
+      const fixture = createComponent(MatInputSelectWithInnerHtml);
+      fixture.detectChanges();
+
+      const formFieldEl = fixture.debugElement.query(By.css('.mat-form-field'))
+        .nativeElement;
+      expect(formFieldEl.classList).toContain('mat-form-field-should-float');
+    }));
 
   it('should never float the label when floatLabel is set to false', fakeAsync(() => {
     let fixture = createComponent(MatInputWithDynamicLabel);
@@ -1726,3 +1803,58 @@ class AutosizeTextareaInATab {}
   `
 })
 class AutosizeTextareaInAStep {}
+
+@Component({
+  template: `
+    <mat-form-field>
+      <select matInput id="test-id" [disabled]="disabled" [required]="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>`
+})
+class MatInputSelect {
+  disabled: boolean;
+  required: boolean;
+}
+
+@Component({
+  template: `
+    <mat-form-field>
+      <select matInput>
+        <option value="" disabled selected></option>
+        <option value="saab">Saab</option>
+        <option value="mercedes">Mercedes</option>
+        <option value="audi">Audi</option>
+      </select>
+    </mat-form-field>`
+})
+class MatInputSelectWithNoLabelNoValue {}
+
+@Component({
+  template: `
+    <mat-form-field>
+      <select matInput>
+        <option value="" label="select a car"></option>
+        <option value="saab">Saab</option>
+        <option value="mercedes">Mercedes</option>
+        <option value="audi">Audi</option>
+      </select>
+    </mat-form-field>`
+})
+class MatInputSelectWithLabel {}
+
+@Component({
+  template: `
+    <mat-form-field>
+      <select matInput>
+        <option value="">select a car</option>
+        <option value="saab">Saab</option>
+        <option value="mercedes">Mercedes</option>
+        <option value="audi">Audi</option>
+      </select>
+    </mat-form-field>`
+})
+class MatInputSelectWithInnerHtml {}
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index 1fd02d06631c..3af05a323129 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -58,7 +58,7 @@ export const _MatInputMixinBase = mixinErrorState(MatInputBase);
 
 /** Directive that allows a native input to work inside a `MatFormField`. */
 @Directive({
-  selector: `input[matInput], textarea[matInput]`,
+  selector: `input[matInput], textarea[matInput], select[matControl]`,
   exportAs: 'matInput',
   host: {
     /**
@@ -72,7 +72,6 @@ export const _MatInputMixinBase = mixinErrorState(MatInputBase);
     '[attr.placeholder]': 'placeholder',
     '[disabled]': 'disabled',
     '[required]': 'required',
-    '[readonly]': 'readonly',
     '[attr.aria-describedby]': '_ariaDescribedby || null',
     '[attr.aria-invalid]': 'errorState',
     '[attr.aria-required]': 'required.toString()',
@@ -93,6 +92,9 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
   /** Whether the component is being rendered on the server. */
   _isServer = false;
 
+  /** Whether the component is a native html select. */
+  _isNativeSelect = false;
+
   /**
    * Implemented as part of MatFormFieldControl.
    * @docs-private
@@ -251,6 +253,7 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
     }
 
     this._isServer = !this._platform.isBrowser;
+    this._isNativeSelect = this._elementRef.nativeElement.nodeName.toLowerCase() === 'select';
   }
 
   ngOnInit() {
@@ -356,7 +359,18 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
    * Implemented as part of MatFormFieldControl.
    * @docs-private
    */
-  get shouldLabelFloat(): boolean { return this.focused || !this.empty; }
+  get shouldLabelFloat(): boolean {
+    if (this._isNativeSelect) {
+      // For multi select, float mat input label
+      // If single select has value or has a option label or html, float mat input label to avoid
+      // mat input label to overlap with the select content.
+      const selectElement  = this._elementRef.nativeElement;
+      return selectElement.multiple || !this.empty || selectElement.options[0].label
+          || this.focused;
+    } else {
+      return this.focused || !this.empty;
+    }
+  }
 
   /**
    * Implemented as part of MatFormFieldControl.
diff --git a/src/lib/select/select.md b/src/lib/select/select.md
index 788f61ef2ab7..4eeaed793a25 100644
--- a/src/lib/select/select.md
+++ b/src/lib/select/select.md
@@ -8,6 +8,13 @@ To add options to the select, add `<mat-option>` elements to the `<mat-select>`.
 has a `value` property that can be used to set the value that will be selected if the user chooses
 this option. The content of the `<mat-option>` is what will be shown to the user.
 
+Angular Material also supports use of native `<select>` element inside of
+`<mat-form-field>`. The native control has several performance, accessibility,
+and usability advantages. See [the documentation for
+form-field](https://material.angular.io/components/form-field) for more information.
+
+To use native select inside `<mat-form-field>`, add `matInput` as an attribute to native html select. 
+
 <!-- example(select-overview) -->
 
 ### Getting and setting the select value
@@ -17,7 +24,7 @@ forms.
 
 <!-- example(select-value-binding) -->
 
-The `<mat-select>` also supports all of the form directives from the core `FormsModule` (`NgModel`) and
+Both`<mat-select>` and `<select>` support all of the form directives from the core `FormsModule` (`NgModel`) and
 `ReactiveFormsModule` (`FormControl`, `FormGroup`, etc.) As with native `<select>`, `<mat-select>`
 also supports a `compareWith` function. (Additional information about using a custom `compareWith`
 function can be found in the
@@ -27,7 +34,7 @@ function can be found in the
 
 ### Form field features
 
-There are a number of `<mat-form-field>` features that can be used with any `<mat-select>`. These
+There are a number of `<mat-form-field>` features that can be used with both `<select>` and `<mat-select>`. These
 include error messages, hint text, prefix & suffix, and theming. For additional information about
 these features, see the
 [form field documentation](https://material.angular.io/components/form-field/overview).
@@ -45,7 +52,7 @@ In some cases that `<mat-form-field>` may use the placeholder as the label (see
 ### Disabling the select or individual options
 
 It is possible to disable the entire select or individual options in the select by using the
-disabled property on the `<mat-select>` and the `<mat-option>` components respectively.
+disabled property on the `<select>` or `<mat-select>` and the `<option>` or <mat-option>` components respectively.
 
 <!-- example(select-disabled) -->
 
@@ -71,11 +78,13 @@ by setting the `multiple` property. This will allow the user to select multiple
 using the `<mat-select>` in multiple selection mode, its value will be a sorted list of all selected
 values rather than a single value.
 
+Multiple select with `<select multiple>` is not recommended.
+
 <!-- example(select-multiple) -->
 
 ### Customizing the trigger label
 
-If you want to display a custom trigger label inside a select, you can use the
+If you want to display a custom trigger label inside a `<mat-select>`, you can use the
 `<mat-select-trigger>` element.
 
 <!-- example(select-custom-trigger) -->
@@ -98,7 +107,7 @@ which can be used to apply additional CSS classes to the dropdown panel.
 
 The `<mat-form-field>` allows you to
 [associate error messages](https://material.angular.io/components/form-field/overview#error-messages)
-with your `<mat-select>`. By default, these error messages are shown when the control is invalid and
+with your `<select>` or `<mat-select>`. By default, these error messages are shown when the control is invalid and
 either the user has interacted with (touched) the element or the parent form has been submitted. If
 you wish to override this behavior (e.g. to show the error as soon as the invalid control is dirty
 or when a parent form group is invalid), you can use the `errorStateMatcher` property of the
@@ -130,10 +139,12 @@ globally cause input errors to show when the input is dirty and invalid.
 
 ### Accessibility
 
-The select component without text or label should be given a meaningful label via
+The `<mat-select>` component without text or label should be given a meaningful label via
 `aria-label` or `aria-labelledby`.
 
-The select component has `role="listbox"` and options inside select have `role="option"`.
+The `<mat-select>` component has `role="listbox"` and options inside select have `role="option"`.
+
+The `<select>` offers better accessibility by supporting all the native html accessibility capability.
 
 ### Troubleshooting
 
diff --git a/src/material-examples/select-disabled/select-disabled-example.html b/src/material-examples/select-disabled/select-disabled-example.html
index 683781d3c9e8..51f9ae6919e0 100644
--- a/src/material-examples/select-disabled/select-disabled-example.html
+++ b/src/material-examples/select-disabled/select-disabled-example.html
@@ -1,12 +1,24 @@
 <p>
   <mat-checkbox [formControl]="disableSelect">Disable select</mat-checkbox>
 </p>
-<p>
-  <mat-form-field>
-    <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>
-      <mat-option value="option3">Option 3</mat-option>
-    </mat-select>
-  </mat-form-field>
-</p>
+
+<h4>mat-select</h4>
+<mat-form-field>
+  <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>
+    <mat-option value="option3">Option 3</mat-option>
+  </mat-select>
+</mat-form-field>
+
+<h4>native html select</h4>
+<mat-form-field>
+  <select matControl placeholder="Choose an option" [disabled]="disableSelect.value">
+    <option value="" disabled selected></option>
+    <option value="volvo">Volvo</option>
+    <option value="saab" disabled>Saab</option>
+    <option value="mercedes">Mercedes</option>
+    <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 f6689b670019..a4e304d459f7 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,3 +1,4 @@
+<h4>mat-select</h4>
 <mat-form-field>
   <mat-select placeholder="Choose one" [formControl]="selected" [errorStateMatcher]="matcher">
     <mat-option>Clear</mat-option>
@@ -10,3 +11,16 @@
     Your selection is invalid
   </mat-error>
 </mat-form-field>
+
+<h4>native html select</h4>
+<mat-form-field class="demo-full-width">
+  <select matControl placeholder="Choose one" [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
+    <option value=""></option>
+    <option value="valid" selected>Valid option</option>
+    <option value="invalid">Invalid option</option>
+  </select>
+  <mat-error *ngIf="nativeSelectFormControl.hasError('required')">You must make a selection</mat-error>
+  <mat-error *ngIf="nativeSelectFormControl.hasError('pattern') && !nativeSelectFormControl.hasError('required')">
+    Your selection is invalid
+  </mat-error>
+</mat-form-field>
diff --git a/src/material-examples/select-error-state-matcher/select-error-state-matcher-example.ts b/src/material-examples/select-error-state-matcher/select-error-state-matcher-example.ts
index 5341d8523114..945b3634ca7c 100644
--- a/src/material-examples/select-error-state-matcher/select-error-state-matcher-example.ts
+++ b/src/material-examples/select-error-state-matcher/select-error-state-matcher-example.ts
@@ -22,5 +22,15 @@ export class SelectErrorStateMatcherExample {
     Validators.pattern('valid'),
   ]);
 
+  selectFormControl = new FormControl('valid', [
+    Validators.required,
+    Validators.pattern('valid'),
+  ]);
+
+  nativeSelectFormControl = new FormControl('valid', [
+    Validators.required,
+    Validators.pattern('valid'),
+  ]);
+
   matcher = new MyErrorStateMatcher();
 }
diff --git a/src/material-examples/select-form/select-form-example.html b/src/material-examples/select-form/select-form-example.html
index 484c7282bc44..d5e4ef2e1a44 100644
--- a/src/material-examples/select-form/select-form-example.html
+++ b/src/material-examples/select-form/select-form-example.html
@@ -1,4 +1,5 @@
 <form>
+  <h4>mat-select</h4>
   <mat-form-field>
     <mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
       <mat-option *ngFor="let food of foods" [value]="food.value">
@@ -6,6 +7,15 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-
-  <p> Selected value: {{selectedValue}} </p>
+  <p> Selected food: {{selectedValue}} </p>
+  <h4>native html select</h4>
+  <mat-form-field>
+    <select matControl placeholder="Favorite car" [(ngModel)]="selectedCar" name="car">
+      <option value="" disabled selected></option>
+      <option *ngFor="let car of cars" [value]="car.value">
+        {{car.viewValue}}
+      </option>
+    </select>
+  </mat-form-field>
+  <p> Selected car: {{selectedCar}} </p>
 </form>
diff --git a/src/material-examples/select-form/select-form-example.ts b/src/material-examples/select-form/select-form-example.ts
index aedf96732899..b72b6581f9ea 100644
--- a/src/material-examples/select-form/select-form-example.ts
+++ b/src/material-examples/select-form/select-form-example.ts
@@ -5,6 +5,11 @@ export interface Food {
   viewValue: string;
 }
 
+export interface Car {
+  value: string;
+  viewValue: string;
+}
+
 /**
  * @title Select in a form
  */
@@ -15,10 +20,17 @@ export interface Food {
 })
 export class SelectFormExample {
   selectedValue: string;
+  selectedCar: string;
 
   foods: Food[] = [
     {value: 'steak-0', viewValue: 'Steak'},
     {value: 'pizza-1', viewValue: 'Pizza'},
     {value: 'tacos-2', viewValue: 'Tacos'}
   ];
+
+  cars: Car[] = [
+    {value: 'volvo', viewValue: 'Volvo'},
+    {value: 'saab', viewValue: 'Saab'},
+    {value: 'mercedes', viewValue: 'Mercedes'}
+  ];
 }
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 fc7f443075ce..c3486882706f 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,3 +1,4 @@
+<h4>mat select</h4>
 <mat-form-field>
   <mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
     <mat-option>--</mat-option>
@@ -8,3 +9,19 @@
   <mat-error *ngIf="animalControl.hasError('required')">Please choose an animal</mat-error>
   <mat-hint>{{animalControl.value?.sound}}</mat-hint>
 </mat-form-field>
+
+<h4>native html select</h4>
+<mat-form-field>
+  <mat-label>Select your car (required)</mat-label>
+  <select matControl required [formControl]="selectFormControl">
+    <option label="--select something --"></option>
+    <option value="saab">Saab</option>
+    <option value="mercedes">Mercedes</option>
+    <option value="audi">Audi</option>
+  </select>
+  <mat-error *ngIf="selectFormControl.hasError('required')">
+    This field is required
+  </mat-error>
+  <mat-hint>You can pick up your favorite car here</mat-hint>
+</mat-form-field>
+
diff --git a/src/material-examples/select-hint-error/select-hint-error-example.ts b/src/material-examples/select-hint-error/select-hint-error-example.ts
index f40d09b3d9fb..b5ac67592419 100644
--- a/src/material-examples/select-hint-error/select-hint-error-example.ts
+++ b/src/material-examples/select-hint-error/select-hint-error-example.ts
@@ -14,6 +14,7 @@ export interface Animal {
 })
 export class SelectHintErrorExample {
   animalControl = new FormControl('', [Validators.required]);
+  selectFormControl = new FormControl('', Validators.required);
   animals: Animal[] = [
     {name: 'Dog', sound: 'Woof!'},
     {name: 'Cat', sound: 'Meow!'},
diff --git a/src/material-examples/select-optgroup/select-optgroup-example.html b/src/material-examples/select-optgroup/select-optgroup-example.html
index 2467483619cb..d316a8e2771d 100644
--- a/src/material-examples/select-optgroup/select-optgroup-example.html
+++ b/src/material-examples/select-optgroup/select-optgroup-example.html
@@ -1,3 +1,4 @@
+<h4>mat-select</h4>
 <mat-form-field>
   <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
     <mat-option>-- None --</mat-option>
@@ -9,3 +10,17 @@
     </mat-optgroup>
   </mat-select>
 </mat-form-field>
+
+<h4>native html select</h4>
+<mat-form-field>
+  <select matControl>
+    <optgroup label="Swedish Cars">
+      <option value="volvo">volvo</option>
+      <option value="saab">Saab</option>
+    </optgroup>
+    <optgroup label="German Cars">
+      <option value="mercedes">Mercedes</option>
+      <option value="audi">Audi</option>
+    </optgroup>
+  </select>
+</mat-form-field>
diff --git a/src/material-examples/select-overview/select-overview-example.html b/src/material-examples/select-overview/select-overview-example.html
index 954592675993..7912bed4fc08 100644
--- a/src/material-examples/select-overview/select-overview-example.html
+++ b/src/material-examples/select-overview/select-overview-example.html
@@ -1,3 +1,4 @@
+<h4>Basic mat-select</h4>
 <mat-form-field>
   <mat-select placeholder="Favorite food">
     <mat-option *ngFor="let food of foods" [value]="food.value">
@@ -5,3 +6,13 @@
     </mat-option>
   </mat-select>
 </mat-form-field>
+
+<h4>Basic native select</h4>
+<mat-form-field>
+  <select matControl 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>
diff --git a/src/material-examples/select-reset/select-reset-example.html b/src/material-examples/select-reset/select-reset-example.html
index 9d8e2c0ffd81..af1505e324e7 100644
--- a/src/material-examples/select-reset/select-reset-example.html
+++ b/src/material-examples/select-reset/select-reset-example.html
@@ -1,6 +1,19 @@
+<h4>mat-select</h4>
 <mat-form-field>
   <mat-select placeholder="State">
     <mat-option>None</mat-option>
     <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
   </mat-select>
 </mat-form-field>
+
+<h4>native html select</h4>
+<mat-form-field>
+  <mat-label>Select your car</mat-label>
+  <select matControl id="mySelectId">
+    <option value="" disabled selected></option>
+    <option value="volvo">Volvo</option>
+    <option value="saab">Saab</option>
+    <option value="mercedes">Mercedes</option>
+    <option value="audi">Audi</option>
+  </select>
+</mat-form-field>

From 371a373fb23c31352ca771ca8c7e1ea5de727aeb Mon Sep 17 00:00:00 2001
From: Vivian Hu <vivianhu@google.com>
Date: Mon, 20 Aug 2018 11:48:35 -0700
Subject: [PATCH 3/3] feat(input): add native select to be form input

---
 .gitignore                                    |  1 +
 src/demo-app/input/input-demo.html            |  4 +-
 src/demo-app/select/select-demo.html          | 28 ++++++------
 src/lib/form-field/form-field.md              |  6 +--
 src/lib/input/input.scss                      | 11 +++--
 src/lib/input/input.spec.ts                   | 43 ++++++++++---------
 src/lib/input/input.ts                        | 16 ++++---
 src/lib/select/select.md                      | 13 +++---
 .../select-disabled-example.html              |  2 +-
 .../select-error-state-matcher-example.html   |  2 +-
 .../select-form/select-form-example.html      |  2 +-
 .../select-hint-error-example.html            |  2 +-
 .../select-optgroup-example.html              |  2 +-
 .../select-overview-example.html              |  2 +-
 .../select-reset/select-reset-example.html    |  2 +-
 15 files changed, 71 insertions(+), 65 deletions(-)

diff --git a/.gitignore b/.gitignore
index 14c82982ccdc..66b8148a1362 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,6 +39,7 @@ npm-debug.log
 testem.log
 /.chrome
 /.git
+/.firebase
 
 # schematics
 /src/lib/schematics/**/*.js
diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index 30f0bdcbdad9..d5cd364c7cc2 100644
--- a/src/demo-app/input/input-demo.html
+++ b/src/demo-app/input/input-demo.html
@@ -4,7 +4,7 @@
     <form>
       <mat-form-field class="demo-full-width">
         <mat-label>Company (disabled)</mat-label>
-        <input matInput disabled value="Google">
+        <input matNativeControl disabled value="Google">
       </mat-form-field>
 
       <table style="width: 100%" cellspacing="0"><tr>
@@ -28,7 +28,7 @@
         </mat-form-field>
         <mat-form-field class="demo-full-width">
           <mat-label>Address 2</mat-label>
-          <textarea matInput></textarea>
+          <textarea matNativeControl></textarea>
         </mat-form-field>
       </p>
       <table style="width: 100%" cellspacing="0"><tr>
diff --git a/src/demo-app/select/select-demo.html b/src/demo-app/select/select-demo.html
index 6abd94afcbd9..b92727f38e8b 100644
--- a/src/demo-app/select/select-demo.html
+++ b/src/demo-app/select/select-demo.html
@@ -7,7 +7,7 @@
       <h4>Basic</h4>
       <mat-form-field class="demo-full-width">
         <mat-label>Select your car</mat-label>
-        <select matControl id="mySelectId">
+        <select matNativeControl id="mySelectId">
           <option value="" disabled selected></option>
           <option value="volvo">Volvo</option>
           <option value="saab" disabled>Saab</option>
@@ -18,7 +18,7 @@ <h4>Basic</h4>
       <h4>Disabled and required</h4>
       <mat-form-field class="demo-full-width">
         <mat-label>Select your car (disabled)</mat-label>
-        <select matControl disabled required>
+        <select matNativeControl disabled required>
           <option value="volvo">Volvo</option>
           <option value="saab">Saab</option>
           <option value="mercedes">Mercedes</option>
@@ -28,7 +28,7 @@ <h4>Disabled and required</h4>
       <h4>Floating label</h4>
       <mat-form-field>
         <mat-label>Float with value</mat-label>
-        <select matControl>
+        <select matNativeControl>
           <option value="volvo">Volvo</option>
           <option value="saab">Saab</option>
           <option value="mercedes">Mercedes</option>
@@ -37,7 +37,7 @@ <h4>Floating label</h4>
       </mat-form-field>
       <mat-form-field>
         <mat-label>Not float when empty</mat-label>
-        <select matControl>
+        <select matNativeControl>
           <option value="" selected></option>
           <option value="saab">Saab</option>
           <option value="mercedes">Mercedes</option>
@@ -46,7 +46,7 @@ <h4>Floating label</h4>
       </mat-form-field>
       <mat-form-field>
         <mat-label>Float with no value, but with label</mat-label>
-        <select matControl>
+        <select matNativeControl>
           <option value="" selected label="--select one--"></option>
           <option value="saab">Saab</option>
           <option value="mercedes">Mercedes</option>
@@ -55,7 +55,7 @@ <h4>Floating label</h4>
       </mat-form-field>
       <mat-form-field>
         <mat-label>Float with no value, but with html</mat-label>
-        <select matControl>
+        <select matNativeControl>
           <option value="" selected>--select one--</option>
           <option value="saab">Saab</option>
           <option value="mercedes">Mercedes</option>
@@ -65,7 +65,7 @@ <h4>Floating label</h4>
       <h4>Looks</h4>
       <mat-form-field appearance="legacy">
         <mat-label>Legacy</mat-label>
-        <select matControl required>
+        <select matNativeControl required>
           <option value="volvo">Volvo</option>
           <option value="saab">Saab</option>
           <option value="mercedes">Mercedes</option>
@@ -74,7 +74,7 @@ <h4>Looks</h4>
       </mat-form-field>
       <mat-form-field appearance="standard">
         <mat-label>Standard</mat-label>
-        <select matControl required>
+        <select matNativeControl required>
           <option value="volvo">Volvo</option>
           <option value="saab">Saab</option>
           <option value="mercedes">Mercedes</option>
@@ -83,7 +83,7 @@ <h4>Looks</h4>
       </mat-form-field>
       <mat-form-field appearance="fill">
         <mat-label>Fill</mat-label>
-        <select matControl required>
+        <select matNativeControl required>
           <option value="volvo">Volvo</option>
           <option value="saab">Saab</option>
           <option value="mercedes">Mercedes</option>
@@ -92,7 +92,7 @@ <h4>Looks</h4>
       </mat-form-field>
       <mat-form-field appearance="outline">
         <mat-label>Outline</mat-label>
-        <select matControl>
+        <select matNativeControl>
           <option value="volvo">volvo</option>
           <option value="saab">Saab</option>
           <option value="mercedes">Mercedes</option>
@@ -101,7 +101,7 @@ <h4>Looks</h4>
       </mat-form-field>
       <h4>Option group</h4>
       <mat-form-field>
-        <select matControl>
+        <select matNativeControl>
           <optgroup label="Swedish Cars">
             <option value="volvo">volvo</option>
             <option value="saab">Saab</option>
@@ -114,7 +114,7 @@ <h4>Option group</h4>
       </mat-form-field>
       <h4>Place holder</h4>
       <mat-form-field class="demo-full-width">
-        <select matControl placeholder="place holder">
+        <select matNativeControl placeholder="place holder">
           <option value="" disabled selected></option>
           <option value="volvo">Volvo</option>
           <option value="saab" disabled>Saab</option>
@@ -125,7 +125,7 @@ <h4>Place holder</h4>
       <h4>Error message, hint, form sumbit</h4>
       <mat-form-field class="demo-full-width">
         <mat-label>Select your car (required)</mat-label>
-        <select matControl required [formControl]="selectFormControl">
+        <select matNativeControl required [formControl]="selectFormControl">
           <option label="--select something --"></option>
           <option value="saab">Saab</option>
           <option value="mercedes">Mercedes</option>
@@ -140,7 +140,7 @@ <h4>Error message, hint, form sumbit</h4>
       <h4>Error message with errorStateMatcher</h4>
       <mat-form-field class="demo-full-width">
         <mat-label>Select your car</mat-label>
-        <select matControl required [formControl]="selectFormControl" [errorStateMatcher]="matcher">
+        <select matNativeControl required [formControl]="selectFormControl" [errorStateMatcher]="matcher">
           <option label="--select something --"></option>
           <option value="saab">Saab</option>
           <option value="mercedes">Mercedes</option>
diff --git a/src/lib/form-field/form-field.md b/src/lib/form-field/form-field.md
index 6a1d14396890..a26fadb3ddc0 100644
--- a/src/lib/form-field/form-field.md
+++ b/src/lib/form-field/form-field.md
@@ -7,8 +7,8 @@ In this document, "form field" refers to the wrapper component `<mat-form-field>
 (e.g. the input, textarea, select, etc.)
 
 The following Angular Material components are designed to work inside a `<mat-form-field>`:
-* [`<input matInput>` &amp; `<textarea matInput>`](https://material.angular.io/components/input/overview)
-* [`<select matInput>`](https://material.angular.io/components/select/overview)
+* [`<input matNativeControl>` &amp; `<textarea matNativeControl>`](https://material.angular.io/components/input/overview)
+* [`<select matNativeControl>`](https://material.angular.io/components/select/overview)
 * [`<mat-select>`](https://material.angular.io/components/select/overview)
 * [`<mat-chip-list>`](https://material.angular.io/components/chips/overview)
 
@@ -42,7 +42,7 @@ want a floating label, add a `<mat-label>` to the `mat-form-field`.
 ### Floating label
 
 The floating label is a text label displayed on top of the form field control when
-the control does not contain any text or when `<select matInput>` does not show any option text. 
+the control does not contain any text or when `<select matNativeControl>` does not show any option text. 
 By default, when text is present the floating label
 floats above the form field control. The label for a form field can be specified by adding a
 `mat-label` element.
diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss
index 90d395c74a78..9946fc9584eb 100644
--- a/src/lib/input/input.scss
+++ b/src/lib/input/input.scss
@@ -122,17 +122,16 @@ textarea.mat-input-element {
   margin: -2px 0;
 }
 
-// Remove select button from IE11
-select.mat-input-element::-ms-expand {
-  display: none;
-}
-
-//encoded material design select arrow svg
+// Encoded material design select arrow svg
 /* stylelint-disable max-line-length */
 $mat-native-select-arrow-svg: 'data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%225%22%20viewBox%3D%227%2010%2010%205%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%230%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22.54%22%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E';
 /* stylelint-enable */
 
+// Remove the native select down arrow and replace it with material design arrow
 select.mat-input-element {
+  &::-ms-expand {
+    display: none;
+  }
   -moz-appearance: none;
   -webkit-appearance: none;
   position: relative;
diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts
index e36f1c2f9177..1031e39c5270 100644
--- a/src/lib/input/input.spec.ts
+++ b/src/lib/input/input.spec.ts
@@ -448,19 +448,19 @@ describe('MatInput without forms', () => {
     fixture.detectChanges();
 
     const formFieldEl =
-      fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
-    const inputEl = fixture.debugElement.query(By.css('select')).nativeElement;
+        fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
+    const selectEl = fixture.debugElement.query(By.css('select')).nativeElement;
 
     expect(formFieldEl.classList.contains('mat-form-field-disabled'))
-      .toBe(false, `Expected form field not to start out disabled.`);
-    expect(inputEl.disabled).toBe(false);
+        .toBe(false, `Expected form field not to start out disabled.`);
+    expect(selectEl.disabled).toBe(false);
 
     fixture.componentInstance.disabled = true;
     fixture.detectChanges();
 
     expect(formFieldEl.classList.contains('mat-form-field-disabled'))
-      .toBe(true, `Expected form field to look disabled after property is set.`);
-    expect(inputEl.disabled).toBe(true);
+        .toBe(true, `Expected form field to look disabled after property is set.`);
+    expect(selectEl.disabled).toBe(true);
   }));
 
   it('supports the required attribute as binding', fakeAsync(() => {
@@ -481,14 +481,14 @@ describe('MatInput without forms', () => {
     const fixture = createComponent(MatInputSelect);
     fixture.detectChanges();
 
-    const inputEl = fixture.debugElement.query(By.css('select')).nativeElement;
+    const selectEl = fixture.debugElement.query(By.css('select')).nativeElement;
 
-    expect(inputEl.required).toBe(false);
+    expect(selectEl.required).toBe(false);
 
     fixture.componentInstance.required = true;
     fixture.detectChanges();
 
-    expect(inputEl.required).toBe(true);
+    expect(selectEl.required).toBe(true);
   }));
 
   it('supports the type attribute as binding', fakeAsync(() => {
@@ -646,14 +646,14 @@ describe('MatInput without forms', () => {
   }));
 
   it('should floating labels when select has no value but has option innerHTML',
-    fakeAsync(() => {
-      const fixture = createComponent(MatInputSelectWithInnerHtml);
-      fixture.detectChanges();
+      fakeAsync(() => {
+    const fixture = createComponent(MatInputSelectWithInnerHtml);
+    fixture.detectChanges();
 
-      const formFieldEl = fixture.debugElement.query(By.css('.mat-form-field'))
+    const formFieldEl = fixture.debugElement.query(By.css('.mat-form-field'))
         .nativeElement;
-      expect(formFieldEl.classList).toContain('mat-form-field-should-float');
-    }));
+    expect(formFieldEl.classList).toContain('mat-form-field-should-float');
+  }));
 
   it('should never float the label when floatLabel is set to false', fakeAsync(() => {
     let fixture = createComponent(MatInputWithDynamicLabel);
@@ -1373,7 +1373,7 @@ function createComponent<T>(component: Type<T>,
 @Component({
   template: `
     <mat-form-field>
-      <input matInput id="test-id" placeholder="test">
+      <input matNativeControl id="test-id" placeholder="test">
     </mat-form-field>`
 })
 class MatInputWithId {}
@@ -1580,7 +1580,8 @@ class MatInputWithDynamicLabel {
 @Component({
   template: `
     <mat-form-field>
-      <textarea matInput [rows]="rows" [cols]="cols" [wrap]="wrap" placeholder="Snacks"></textarea>
+      <textarea matNativeControl [rows]="rows" [cols]="cols" [wrap]="wrap" placeholder="Snacks">
+      </textarea>
     </mat-form-field>`
 })
 class MatInputTextareaWithBindings {
@@ -1807,7 +1808,7 @@ class AutosizeTextareaInAStep {}
 @Component({
   template: `
     <mat-form-field>
-      <select matInput id="test-id" [disabled]="disabled" [required]="required">
+      <select matNativeControl id="test-id" [disabled]="disabled" [required]="required">
         <option value="volvo">Volvo</option>
         <option value="saab">Saab</option>
         <option value="mercedes">Mercedes</option>
@@ -1823,7 +1824,7 @@ class MatInputSelect {
 @Component({
   template: `
     <mat-form-field>
-      <select matInput>
+      <select matNativeControl>
         <option value="" disabled selected></option>
         <option value="saab">Saab</option>
         <option value="mercedes">Mercedes</option>
@@ -1836,7 +1837,7 @@ class MatInputSelectWithNoLabelNoValue {}
 @Component({
   template: `
     <mat-form-field>
-      <select matInput>
+      <select matNativeControl>
         <option value="" label="select a car"></option>
         <option value="saab">Saab</option>
         <option value="mercedes">Mercedes</option>
@@ -1849,7 +1850,7 @@ class MatInputSelectWithLabel {}
 @Component({
   template: `
     <mat-form-field>
-      <select matInput>
+      <select matNativeControl>
         <option value="">select a car</option>
         <option value="saab">Saab</option>
         <option value="mercedes">Mercedes</option>
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index 3af05a323129..13419d519219 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -58,7 +58,8 @@ export const _MatInputMixinBase = mixinErrorState(MatInputBase);
 
 /** Directive that allows a native input to work inside a `MatFormField`. */
 @Directive({
-  selector: `input[matInput], textarea[matInput], select[matControl]`,
+  selector: `input[matInput], textarea[matInput], select[matNativeControl],
+      input[matNativeControl], textarea[matNativeControl]`,
   exportAs: 'matInput',
   host: {
     /**
@@ -72,6 +73,7 @@ export const _MatInputMixinBase = mixinErrorState(MatInputBase);
     '[attr.placeholder]': 'placeholder',
     '[disabled]': 'disabled',
     '[required]': 'required',
+    '[attr.readonly]': 'readonly && !_isNativeSelect || null',
     '[attr.aria-describedby]': '_ariaDescribedby || null',
     '[attr.aria-invalid]': 'errorState',
     '[attr.aria-required]': 'required.toString()',
@@ -361,12 +363,12 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
    */
   get shouldLabelFloat(): boolean {
     if (this._isNativeSelect) {
-      // For multi select, float mat input label
-      // If single select has value or has a option label or html, float mat input label to avoid
-      // mat input label to overlap with the select content.
-      const selectElement  = this._elementRef.nativeElement;
-      return selectElement.multiple || !this.empty || selectElement.options[0].label
-          || this.focused;
+      // For a single-selection `<select>`, the label should float when the selected option has
+      // a non-empty display value. For a `<select multiple>`, the label *always* floats to avoid
+      // overlapping the label with the options.
+      const selectElement = this._elementRef.nativeElement;
+      return selectElement.multiple || !this.empty || selectElement.options[0].label ||
+          this.focused;
     } else {
       return this.focused || !this.empty;
     }
diff --git a/src/lib/select/select.md b/src/lib/select/select.md
index 4eeaed793a25..2fa6fc8f5f90 100644
--- a/src/lib/select/select.md
+++ b/src/lib/select/select.md
@@ -8,12 +8,13 @@ To add options to the select, add `<mat-option>` elements to the `<mat-select>`.
 has a `value` property that can be used to set the value that will be selected if the user chooses
 this option. The content of the `<mat-option>` is what will be shown to the user.
 
-Angular Material also supports use of native `<select>` element inside of
+Angular Material also supports use of the native `<select>` element inside of
 `<mat-form-field>`. The native control has several performance, accessibility,
 and usability advantages. See [the documentation for
 form-field](https://material.angular.io/components/form-field) for more information.
 
-To use native select inside `<mat-form-field>`, add `matInput` as an attribute to native html select. 
+To use a native select inside `<mat-form-field>`, add  the `matNativeControl` attribute
+to the `<select>` element. 
 
 <!-- example(select-overview) -->
 
@@ -52,7 +53,7 @@ In some cases that `<mat-form-field>` may use the placeholder as the label (see
 ### Disabling the select or individual options
 
 It is possible to disable the entire select or individual options in the select by using the
-disabled property on the `<select>` or `<mat-select>` and the `<option>` or <mat-option>` components respectively.
+disabled property on the `<select>` or `<mat-select>` and the `<option>` or <mat-option>` elements respectively.
 
 <!-- example(select-disabled) -->
 
@@ -78,7 +79,9 @@ by setting the `multiple` property. This will allow the user to select multiple
 using the `<mat-select>` in multiple selection mode, its value will be a sorted list of all selected
 values rather than a single value.
 
-Multiple select with `<select multiple>` is not recommended.
+Using multiple selection with a native select element (`<select multiple>`) is discouraged
+inside `<mat-form-field>`, as the inline listbox appearance is inconsistent with other
+Material Design components.
 
 <!-- example(select-multiple) -->
 
@@ -144,7 +147,7 @@ The `<mat-select>` component without text or label should be given a meaningful
 
 The `<mat-select>` component has `role="listbox"` and options inside select have `role="option"`.
 
-The `<select>` offers better accessibility by supporting all the native html accessibility capability.
+The native `<select>` offers the best accessibility because it is supported directly by screen-readers.
 
 ### Troubleshooting
 
diff --git a/src/material-examples/select-disabled/select-disabled-example.html b/src/material-examples/select-disabled/select-disabled-example.html
index 51f9ae6919e0..774f878de60e 100644
--- a/src/material-examples/select-disabled/select-disabled-example.html
+++ b/src/material-examples/select-disabled/select-disabled-example.html
@@ -13,7 +13,7 @@ <h4>mat-select</h4>
 
 <h4>native html select</h4>
 <mat-form-field>
-  <select matControl placeholder="Choose an option" [disabled]="disableSelect.value">
+  <select matNativeControl placeholder="Choose an option" [disabled]="disableSelect.value">
     <option value="" disabled selected></option>
     <option value="volvo">Volvo</option>
     <option value="saab" disabled>Saab</option>
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 a4e304d459f7..ab8fcbb94197 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
@@ -14,7 +14,7 @@ <h4>mat-select</h4>
 
 <h4>native html select</h4>
 <mat-form-field class="demo-full-width">
-  <select matControl placeholder="Choose one" [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
+  <select matNativeControl placeholder="Choose one" [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
     <option value=""></option>
     <option value="valid" selected>Valid option</option>
     <option value="invalid">Invalid 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 d5e4ef2e1a44..7f04d1f7cd4a 100644
--- a/src/material-examples/select-form/select-form-example.html
+++ b/src/material-examples/select-form/select-form-example.html
@@ -10,7 +10,7 @@ <h4>mat-select</h4>
   <p> Selected food: {{selectedValue}} </p>
   <h4>native html select</h4>
   <mat-form-field>
-    <select matControl placeholder="Favorite car" [(ngModel)]="selectedCar" name="car">
+    <select matNativeControl placeholder="Favorite car" [(ngModel)]="selectedCar" name="car">
       <option value="" disabled selected></option>
       <option *ngFor="let car of cars" [value]="car.value">
         {{car.viewValue}}
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 c3486882706f..d7c9653725c2 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
@@ -13,7 +13,7 @@ <h4>mat select</h4>
 <h4>native html select</h4>
 <mat-form-field>
   <mat-label>Select your car (required)</mat-label>
-  <select matControl required [formControl]="selectFormControl">
+  <select matNativeControl required [formControl]="selectFormControl">
     <option label="--select something --"></option>
     <option value="saab">Saab</option>
     <option value="mercedes">Mercedes</option>
diff --git a/src/material-examples/select-optgroup/select-optgroup-example.html b/src/material-examples/select-optgroup/select-optgroup-example.html
index d316a8e2771d..74bb7cad8216 100644
--- a/src/material-examples/select-optgroup/select-optgroup-example.html
+++ b/src/material-examples/select-optgroup/select-optgroup-example.html
@@ -13,7 +13,7 @@ <h4>mat-select</h4>
 
 <h4>native html select</h4>
 <mat-form-field>
-  <select matControl>
+  <select matNativeControl>
     <optgroup label="Swedish Cars">
       <option value="volvo">volvo</option>
       <option value="saab">Saab</option>
diff --git a/src/material-examples/select-overview/select-overview-example.html b/src/material-examples/select-overview/select-overview-example.html
index 7912bed4fc08..5e6f1387f49f 100644
--- a/src/material-examples/select-overview/select-overview-example.html
+++ b/src/material-examples/select-overview/select-overview-example.html
@@ -9,7 +9,7 @@ <h4>Basic mat-select</h4>
 
 <h4>Basic native select</h4>
 <mat-form-field>
-  <select matControl required>
+  <select matNativeControl required>
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
     <option value="mercedes">Mercedes</option>
diff --git a/src/material-examples/select-reset/select-reset-example.html b/src/material-examples/select-reset/select-reset-example.html
index af1505e324e7..235939f9a022 100644
--- a/src/material-examples/select-reset/select-reset-example.html
+++ b/src/material-examples/select-reset/select-reset-example.html
@@ -9,7 +9,7 @@ <h4>mat-select</h4>
 <h4>native html select</h4>
 <mat-form-field>
   <mat-label>Select your car</mat-label>
-  <select matControl id="mySelectId">
+  <select matNativeControl id="mySelectId">
     <option value="" disabled selected></option>
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>