diff --git a/src/material-examples/autocomplete-plain-input/autocomplete-plain-input-example.css b/src/material-examples/autocomplete-plain-input/autocomplete-plain-input-example.css
new file mode 100644
index 00000000000..08fa67536b1
--- /dev/null
+++ b/src/material-examples/autocomplete-plain-input/autocomplete-plain-input-example.css
@@ -0,0 +1,9 @@
+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}
diff --git a/src/material-examples/autocomplete-plain-input/autocomplete-plain-input-example.html b/src/material-examples/autocomplete-plain-input/autocomplete-plain-input-example.html
new file mode 100644
index 00000000000..731b6f21f80
--- /dev/null
+++ b/src/material-examples/autocomplete-plain-input/autocomplete-plain-input-example.html
@@ -0,0 +1,8 @@
+<form class="example-form">
+  <input type="text" placeholder="Search for a street" [formControl]="control" [matAutocomplete]="auto">
+  <mat-autocomplete #auto="matAutocomplete">
+    <mat-option *ngFor="let street of filteredStreets | async" [value]="street">
+      {{street}}
+    </mat-option>
+  </mat-autocomplete>
+</form>
diff --git a/src/material-examples/autocomplete-plain-input/autocomplete-plain-input-example.ts b/src/material-examples/autocomplete-plain-input/autocomplete-plain-input-example.ts
new file mode 100644
index 00000000000..e0355903175
--- /dev/null
+++ b/src/material-examples/autocomplete-plain-input/autocomplete-plain-input-example.ts
@@ -0,0 +1,34 @@
+import {Component, OnInit} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {Observable} from 'rxjs';
+import {startWith, map} from 'rxjs/operators';
+
+/**
+ * @title Plain input autocomplete
+ */
+@Component({
+  selector: 'autocomplete-plain-input-example',
+  templateUrl: 'autocomplete-plain-input-example.html',
+  styleUrls: ['autocomplete-plain-input-example.css'],
+})
+export class PlainInputAutocompleteExample implements OnInit {
+  control = new FormControl();
+  streets: string[] = ['Champs-Élysées', 'Lombard Street', 'Abbey Road', 'Fifth Avenue'];
+  filteredStreets: Observable<string[]>;
+
+  ngOnInit() {
+    this.filteredStreets = this.control.valueChanges.pipe(
+      startWith(''),
+      map(value => this._filter(value))
+    );
+  }
+
+  private _filter(value: string): string[] {
+    const filterValue = this._normalizeValue(value);
+    return this.streets.filter(street => this._normalizeValue(street).includes(filterValue));
+  }
+
+  private _normalizeValue(value: string): string {
+    return value.toLowerCase().replace(/\s/g, '');
+  }
+}
diff --git a/src/material/autocomplete/autocomplete.md b/src/material/autocomplete/autocomplete.md
index 16a0949a501..67058f3560b 100644
--- a/src/material/autocomplete/autocomplete.md
+++ b/src/material/autocomplete/autocomplete.md
@@ -90,6 +90,14 @@ injection token.
 
 <!-- example(autocomplete-auto-active-first-option) -->
 
+### Autocomplete on a custom input element
+
+While `mat-autocomplete` supports attaching itself to a `mat-form-field`, you can also set it on
+any other `input` element using the `matAutocomplete` attribute. This allows you to customize what
+the input looks like without having to bring in the extra functionality from `mat-form-field`.
+
+<!-- example(autocomplete-plain-input) -->
+
 ### Attaching the autocomplete panel to a different element
 
 By default the autocomplete panel will be attached to your input element, however in some cases you