diff --git a/package.json b/package.json
index 094aadfce..9b04b53ea 100644
--- a/package.json
+++ b/package.json
@@ -154,6 +154,7 @@
         "server-dev": "webpack-dev-server --config tools/webpack/webpack.config.js",
         "server-dev:all": "npm run server-dev -- --env.component all",
         "server-dev:alert": "npm run server-dev -- --env.component alert",
+        "server-dev:autocomplete": "npm run server-dev -- --env.component autocomplete",
         "server-dev:badge": "npm run server-dev -- --env.component badge",
         "server-dev:button": "npm run server-dev -- --env.component button",
         "server-dev:button-toggle": "npm run server-dev -- --env.component button-toggle",
@@ -180,7 +181,7 @@
         "server-dev:sidepanel": "npm run server-dev -- --env.component sidepanel",
         "server-dev:splitter": "npm run server-dev -- --env.component splitter",
         "server-dev:tabs": "npm run server-dev -- --env.component tabs",
-        "server-dev:tag": "npm run server-dev -- --env.component tag",
+        "server-dev:tags": "npm run server-dev -- --env.component tags",
         "server-dev:textarea": "npm run server-dev -- --env.component textarea",
         "server-dev:toggle": "npm run server-dev -- --env.component toggle",
         "server-dev:theme-picker": "npm run server-dev -- --env.component theme-picker",
diff --git a/src/cdk/keycodes/keycodes.ts b/src/cdk/keycodes/keycodes.ts
index 04d8f70b2..a9a413307 100644
--- a/src/cdk/keycodes/keycodes.ts
+++ b/src/cdk/keycodes/keycodes.ts
@@ -118,3 +118,13 @@ export const BACKSLASH = 220;
 export const CLOSE_SQUARE_BRACKET = 221;
 export const SINGLE_QUOTE = 222;
 export const MAC_META = 224;
+
+type ModifierKey = 'altKey' | 'shiftKey' | 'ctrlKey' | 'metaKey';
+
+export function hasModifierKey(event: KeyboardEvent, ...modifiers: ModifierKey[]): boolean {
+    if (modifiers.length) {
+        return modifiers.some((modifier) => event[modifier]);
+    }
+
+    return event.altKey || event.shiftKey || event.ctrlKey || event.metaKey;
+}
diff --git a/src/cdk/scrolling/virtual-scroll-viewport.ts b/src/cdk/scrolling/virtual-scroll-viewport.ts
index 5143901d2..628e30c31 100644
--- a/src/cdk/scrolling/virtual-scroll-viewport.ts
+++ b/src/cdk/scrolling/virtual-scroll-viewport.ts
@@ -260,7 +260,7 @@ export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, O
         if (to === 'to-end') {
             transform += ` translate${axis}(-100%)`;
             // The viewport should rewrite this as a `to-start` offset on the next render cycle. Otherwise
-            // elements will appear to expand in the wrong direction (e.g. `mat-expansion-panel` would
+            // elements will appear to expand in the wrong direction (e.g. `mc-expansion-panel` would
             // expand upward).
             this._renderedContentOffsetNeedsRewrite = true;
         }
diff --git a/src/cdk/testing/dispatch-events.ts b/src/cdk/testing/dispatch-events.ts
index 044eadc88..8f5b6c98c 100644
--- a/src/cdk/testing/dispatch-events.ts
+++ b/src/cdk/testing/dispatch-events.ts
@@ -1,3 +1,5 @@
+// tslint:disable:no-reserved-keywords
+
 import {
     createFakeEvent,
     createKeyboardEvent,
@@ -20,19 +22,15 @@ export function dispatchFakeEvent(node: Node | Window, type: string, canBubble?:
 }
 
 /** Shorthand to dispatch a keyboard event with a specified key code. */
-// tslint:disable-next-line:no-reserved-keywords
-export function dispatchKeyboardEvent(node: Node, type: string, keyCode: number, target?: Element,
-                                      shiftKey = false, ctrlKey = false, altKey = false):
+export function dispatchKeyboardEvent(node: Node, type: string, keyCode: number, target?: Element):
     KeyboardEvent {
-    const event = createKeyboardEvent(type, keyCode, target, undefined, shiftKey, ctrlKey, altKey);
-
-    return dispatchEvent(node, event) as KeyboardEvent;
+    return dispatchEvent(node, createKeyboardEvent(type, keyCode, target)) as KeyboardEvent;
 }
 
 /** Shorthand to dispatch a mouse event on the specified coordinates. */
-// tslint:disable-next-line:no-reserved-keywords
-export function dispatchMouseEvent(node: Node, type: string, x = 0, y = 0,
-                                   event = createMouseEvent(type, x, y)): MouseEvent {
+export function dispatchMouseEvent(
+node: Node, type: string, x = 0, y = 0, event = createMouseEvent(type, x, y)
+): MouseEvent {
     return dispatchEvent(node, event) as MouseEvent;
 }
 
diff --git a/src/cdk/testing/event-objects.ts b/src/cdk/testing/event-objects.ts
index 9d74e2be5..f1568418a 100644
--- a/src/cdk/testing/event-objects.ts
+++ b/src/cdk/testing/event-objects.ts
@@ -43,29 +43,28 @@ export function createTouchEvent(type: string, pageX = 0, pageY = 0) {
 
 /** Dispatches a keydown event from an element. */
 // tslint:disable-next-line:no-reserved-keywords
-export function createKeyboardEvent(type: string, keyCode: number, target?: Element, key?: string,
-                                    shiftKey = false, ctrlKey = false, altKey = false) {
+export function createKeyboardEvent(type: string, keyCode: number, target?: Element, key?: string) {
     const event = document.createEvent('KeyboardEvent') as any;
-    // Firefox does not support `initKeyboardEvent`, but supports `initKeyEvent`.
-    const initEventFn = (event.initKeyEvent || event.initKeyboardEvent).bind(event);
     const originalPreventDefault = event.preventDefault;
 
-    initEventFn(type, true, true, window, 0, 0, 0, 0, 0, keyCode);
+    // Firefox does not support `initKeyboardEvent`, but supports `initKeyEvent`.
+    if (event.initKeyEvent) {
+        event.initKeyEvent(type, true, true, window, 0, 0, 0, 0, 0, keyCode);
+    } else {
+        event.initKeyboardEvent(type, true, true, window, 0, key, 0, '', false);
+    }
 
     // Webkit Browsers don't set the keyCode when calling the init function.
     // See related bug https://bugs.webkit.org/show_bug.cgi?id=16735
     Object.defineProperties(event, {
         keyCode: { get: () => keyCode },
         key: { get: () => key },
-        target: { get: () => target },
-        shiftKey: { get: () => shiftKey },
-        ctrlKey: { get: () => ctrlKey },
-        altKey: { get: () => altKey }
+        target: { get: () => target }
     });
 
     // IE won't set `defaultPrevented` on synthetic events so we need to do it manually.
     event.preventDefault = function() {
-        Object.defineProperty(event, 'defaultPrevented', {get: () => true});
+        Object.defineProperty(event, 'defaultPrevented', { get: () => true });
 
         return originalPreventDefault.apply(this, arguments);
     };
diff --git a/src/cdk/testing/public-api.ts b/src/cdk/testing/public-api.ts
index 85e7fcb7a..06501cc12 100644
--- a/src/cdk/testing/public-api.ts
+++ b/src/cdk/testing/public-api.ts
@@ -1,5 +1,6 @@
 export * from './dispatch-events';
 export * from './event-objects';
+export * from './type-in-element';
 export * from './element-focus';
 export * from './mock-ng-zone';
 export * from './wrapped-error-message';
diff --git a/src/cdk/testing/type-in-element.ts b/src/cdk/testing/type-in-element.ts
new file mode 100644
index 000000000..0e34e708c
--- /dev/null
+++ b/src/cdk/testing/type-in-element.ts
@@ -0,0 +1,13 @@
+import { dispatchFakeEvent } from './dispatch-events';
+
+/**
+ * Focuses an input, sets its value and dispatches
+ * the `input` event, simulating the user typing.
+ * @param value Value to be set on the input.
+ * @param element Element onto which to set the value.
+ */
+export function typeInElement(value: string, element: HTMLInputElement) {
+    element.focus();
+    element.value = value;
+    dispatchFakeEvent(element, 'input');
+}
diff --git a/src/dev-app/system-config.ts b/src/dev-app/system-config.ts
index cb9429636..46fa0ec5c 100644
--- a/src/dev-app/system-config.ts
+++ b/src/dev-app/system-config.ts
@@ -80,7 +80,7 @@ System.config({
         '@ptsecurity/mosaic/form-field': 'dist/packages/mosaic/form-field/index.js',
         '@ptsecurity/mosaic/tree': 'dist/packages/mosaic/tree/index.js',
         '@ptsecurity/mosaic/modal': 'dist/packages/mosaic/modal/index.js',
-        '@ptsecurity/mosaic/tag': 'dist/packages/mosaic/tag/index.js',
+        '@ptsecurity/mosaic/tags': 'dist/packages/mosaic/tags/index.js',
         '@ptsecurity/mosaic/tabs': 'dist/packages/mosaic/tabs/index.js',
         '@ptsecurity/mosaic/select': 'dist/packages/mosaic/select/index.js',
         '@ptsecurity/mosaic/sidepanel': 'dist/packages/mosaic/sidepanel/index.js',
diff --git a/src/lib-dev/all/module.ts b/src/lib-dev/all/module.ts
index 92cb2c90a..5192688b3 100644
--- a/src/lib-dev/all/module.ts
+++ b/src/lib-dev/all/module.ts
@@ -26,7 +26,7 @@ import { McProgressSpinnerModule } from '@ptsecurity/mosaic/progress-spinner';
 import { McRadioModule } from '@ptsecurity/mosaic/radio';
 import { McSelectModule } from '@ptsecurity/mosaic/select';
 import { McSplitterModule } from '@ptsecurity/mosaic/splitter';
-import { McTagModule } from '@ptsecurity/mosaic/tag';
+import { McTagsModule } from '@ptsecurity/mosaic/tags';
 import { McTextareaModule } from '@ptsecurity/mosaic/textarea';
 import { McTimepickerModule } from '@ptsecurity/mosaic/timepicker';
 import { McToggleModule } from '@ptsecurity/mosaic/toggle';
@@ -213,7 +213,7 @@ export class DemoComponent {
         McRadioModule,
         McSelectModule,
         McSplitterModule,
-        McTagModule,
+        McTagsModule,
         McTextareaModule,
         McTimepickerModule,
         McToggleModule,
diff --git a/src/lib-dev/autocomplete/module.ts b/src/lib-dev/autocomplete/module.ts
new file mode 100644
index 000000000..7c902d690
--- /dev/null
+++ b/src/lib-dev/autocomplete/module.ts
@@ -0,0 +1,75 @@
+import { Component, NgModule, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { McAutocompleteModule, McAutocompleteSelectedEvent } from '@ptsecurity/mosaic/autocomplete';
+import { McButtonModule } from '@ptsecurity/mosaic/button';
+import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
+import { McIconModule } from '@ptsecurity/mosaic/icon';
+import { McInputModule } from '@ptsecurity/mosaic/input';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+
+
+@Component({
+    selector: 'app',
+    template: require('./template.html'),
+    styleUrls: ['./styles.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class DemoComponent implements OnInit {
+    options = [
+        'One', 'Two', 'Three', 'Four', 'Five', 'Longest text (0123456789 qwertyuiopasdfghjklzxcvbnm)', 'Волгоград',
+        'Воронеж', 'Ейск', 'Екабпилс', 'Екатеринбург', 'Екатериновка', 'Екатеринославка', 'Екаша', 'Екибастуз',
+        'Екпинди', 'Елань', 'Елец', 'Казань', 'Краснодар', 'Красноярск', 'Москва', 'Нижний Новгород', 'Новосибирск',
+        'Омск', 'Пермь', 'Ростов-на-Дону',  'Самара', 'Санкт-Петербург', 'Уфа', 'Челябинск'
+    ];
+
+    filteredOptions: Observable<string[]>;
+
+    formControl = new FormControl('', Validators.required);
+
+    onSelectionChange($event: McAutocompleteSelectedEvent) {
+        console.log(`onSelectionChange: ${$event}`);
+    }
+
+    ngOnInit(): void {
+        this.filteredOptions = this.formControl.valueChanges
+            .pipe(
+                startWith(''),
+                map((value) => this.filter(value))
+            );
+    }
+
+    private filter(value: string): string[] {
+        const filterValue = value.toLowerCase();
+
+        return this.options.filter((option) => option.toLowerCase().includes(filterValue));
+    }
+
+}
+
+
+@NgModule({
+    declarations: [DemoComponent],
+    imports: [
+        BrowserAnimationsModule,
+        BrowserModule,
+        FormsModule,
+        McAutocompleteModule,
+
+        McInputModule,
+        McButtonModule,
+        McFormFieldModule,
+        McIconModule,
+        ReactiveFormsModule
+    ],
+    bootstrap: [DemoComponent]
+})
+export class DemoModule {}
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    .catch((error) => console.error(error));
+
diff --git a/src/lib-dev/autocomplete/styles.scss b/src/lib-dev/autocomplete/styles.scss
new file mode 100644
index 000000000..1ca253a92
--- /dev/null
+++ b/src/lib-dev/autocomplete/styles.scss
@@ -0,0 +1,13 @@
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+
+@import '../../lib/core/theming/prebuilt/default-theme';
+//@import '../../lib/core/theming/prebuilt/dark-theme';
+
+
+.dev-container {
+    width: 300px;
+
+    border: 1px solid red;
+
+    padding: 24px;
+}
diff --git a/src/lib-dev/autocomplete/template.html b/src/lib-dev/autocomplete/template.html
new file mode 100644
index 000000000..2ecdaa2ed
--- /dev/null
+++ b/src/lib-dev/autocomplete/template.html
@@ -0,0 +1,12 @@
+<br><br><br><br><br><br><br>
+
+<div style="height: 20px">{{ formControl.value }}</div>
+
+<div class="dev-container">
+    <mc-form-field>
+        <input type="text" mcInput [mcAutocomplete]="auto" [formControl]="formControl"/>
+        <mc-autocomplete #auto="mcAutocomplete">
+            <mc-option *ngFor="let option of filteredOptions | async" [value]="option">{{ option }}</mc-option>
+        </mc-autocomplete>
+    </mc-form-field>
+</div>
diff --git a/src/lib-dev/tag/module.ts b/src/lib-dev/tag/module.ts
deleted file mode 100644
index c2aa10128..000000000
--- a/src/lib-dev/tag/module.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Component, NgModule, ViewEncapsulation } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { McIconModule } from '@ptsecurity/mosaic/icon';
-import { McTagModule } from '@ptsecurity/mosaic/tag';
-
-
-@Component({
-    selector: 'app',
-    template: require('./template.html'),
-    styleUrls: ['./styles.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class DemoComponent {}
-
-
-@NgModule({
-    declarations: [
-        DemoComponent
-    ],
-    imports: [
-        BrowserAnimationsModule,
-        BrowserModule,
-        FormsModule,
-        McTagModule,
-        McIconModule
-    ],
-    bootstrap: [
-        DemoComponent
-    ]
-})
-export class DemoModule {}
-
-platformBrowserDynamic()
-    .bootstrapModule(DemoModule)
-    .catch((error) => console.error(error));
-
diff --git a/src/lib-dev/tag/template.html b/src/lib-dev/tag/template.html
deleted file mode 100644
index 5e8f7aa20..000000000
--- a/src/lib-dev/tag/template.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<br><br><br><br><br><br><br>
-
-<mc-tag>Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag class="mc-hovered">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag class="mc-focused">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag [disabled]="true">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
-
-<br><br><br>
-
-<mc-tag color="primary">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="primary" class="mc-hovered">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="primary" class="mc-focused">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="primary" [disabled]="true">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
-
-<br><br><br>
-
-<mc-tag color="error">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="error" class="mc-hovered">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="error" class="mc-focused">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="error" [disabled]="true">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
-
-
-
-<br><br><br><br><br><br><br>
-
-mono<br>
-<mc-tag class="mc-tag_mono">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag class="mc-hovered mc-tag_mono">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag class="mc-focused mc-tag_mono">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag [disabled]="true" class="mc-tag_mono">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
-
-<br><br><br>
-
-<mc-tag color="primary" class="mc-tag_mono">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="primary" class="mc-tag_mono mc-hovered">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="primary" class="mc-tag_mono mc-focused">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="primary" [disabled]="true" class="mc-tag_mono">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
-
-<br><br><br>
-
-<mc-tag color="error" class="mc-tag_mono">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="error" class="mc-tag_mono mc-hovered">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="error" class="mc-tag_mono mc-focused">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="error" [disabled]="true" class="mc-tag_mono">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
-
-
-
-<br><br><br><br><br><br><br>
-
-CAPS<br>
-<mc-tag class="mc-tag_caps">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag class="mc-hovered mc-tag_caps">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag class="mc-focused mc-tag_caps">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag [disabled]="true" class="mc-tag_caps">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
-
-<br><br><br>
-
-<mc-tag color="primary" class="mc-tag_caps">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="primary" class="mc-hovered mc-tag_caps">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="primary" class="mc-focused mc-tag_caps">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="primary" [disabled]="true" class="mc-tag_caps">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
-
-<br><br><br>
-
-<mc-tag color="error" class="mc-tag_caps">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="error" class="mc-hovered mc-tag_caps">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="error" class="mc-focused mc-tag_caps">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
-<mc-tag color="error" [disabled]="true" class="mc-tag_caps">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
diff --git a/src/lib-dev/tags/module.ts b/src/lib-dev/tags/module.ts
new file mode 100644
index 000000000..ccc7451b2
--- /dev/null
+++ b/src/lib-dev/tags/module.ts
@@ -0,0 +1,161 @@
+import {
+    Component,
+    ElementRef,
+    NgModule, OnInit,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { COMMA, ENTER } from '@ptsecurity/cdk/keycodes';
+import { McAutocompleteModule, McAutocompleteSelectedEvent } from '@ptsecurity/mosaic/autocomplete';
+import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
+import { McIconModule } from '@ptsecurity/mosaic/icon';
+import { McTagList, McTagsModule } from '@ptsecurity/mosaic/tags';
+import { McTagInputEvent } from '@ptsecurity/mosaic/tags/tag-input';
+import { merge } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+
+@Component({
+    selector: 'app',
+    template: require('./template.html'),
+    styleUrls: ['./styles.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class DemoComponent implements OnInit {
+    visible = true;
+    tagCtrl = new FormControl();
+
+    simpleTags = ['tag', 'tag1', 'tag2', 'tag3', 'tag4'];
+
+    inputTags = ['tag', 'tag1', 'tag2', 'tag3', 'tag4'];
+
+    autocompleteAllTags: string[] = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6', 'tag7', 'tag8', 'tag9', 'tag10'];
+    autocompleteSelectedTags: string[] = ['tag1'];
+    autocompleteFilteredTagsByInput: string[] = [];
+    autocompleteFilteredTags: any;
+
+    readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+
+    @ViewChild('inputTagInput') inputTagInput: ElementRef<HTMLInputElement>;
+    @ViewChild('inputTagList') inputTagList: McTagList;
+
+    @ViewChild('autocompleteTagInput') autocompleteTagInput: ElementRef<HTMLInputElement>;
+    @ViewChild('autocompleteTagList') autocompleteTagList: McTagList;
+
+    ngOnInit(): void {
+        this.autocompleteFilteredTags = merge(
+            this.autocompleteTagList.tagChanges.asObservable()
+                .pipe(map((selectedTags) => {
+                    const values = selectedTags.map((tag) => tag.value);
+
+                    return this.autocompleteAllTags.filter((tag) => !values.includes(tag));
+                })),
+            this.tagCtrl.valueChanges
+                .pipe(map((value) => {
+                    const typedText = (value && value.new) ? value.value : value;
+
+                    this.autocompleteFilteredTagsByInput = typedText ?
+                        this.filter(typedText) : this.autocompleteAllTags.slice();
+
+                    return this.autocompleteFilteredTagsByInput.filter(
+                        // @ts-ignore
+                        (tag) => !this.autocompleteSelectedTags.includes(tag)
+                    );
+                }))
+        );
+    }
+
+    autocompleteOnCreate(event: McTagInputEvent): void {
+        const input = event.input;
+        const value = event.value;
+
+        if ((value || '').trim()) {
+            this.autocompleteSelectedTags.push(value.trim());
+        }
+
+        if (input) {
+            input.value = '';
+        }
+    }
+
+    inputOnCreate(event: McTagInputEvent): void {
+        const input = event.input;
+        const value = event.value;
+
+        if ((value || '').trim()) {
+            this.inputTags.push(value.trim());
+        }
+
+        if (input) {
+            input.value = '';
+        }
+    }
+
+    autocompleteOnSelect(event: McAutocompleteSelectedEvent): void {
+        if (event.option.value.new) {
+            this.autocompleteSelectedTags.push(event.option.value.value);
+        } else {
+            this.autocompleteSelectedTags.push(event.option.value);
+        }
+        this.autocompleteTagInput.nativeElement.value = '';
+        this.tagCtrl.setValue(null);
+    }
+
+    autocompleteOnRemove(fruit: any): void {
+        const index = this.autocompleteSelectedTags.indexOf(fruit);
+
+        if (index >= 0) {
+            this.autocompleteSelectedTags.splice(index, 1);
+        }
+    }
+
+    onRemoveTag(tag: string): void {
+        const index = this.simpleTags.indexOf(tag);
+
+        if (index >= 0) {
+            this.simpleTags.splice(index, 1);
+        }
+    }
+
+    inputOnRemoveTag(tag: string): void {
+        const index = this.inputTags.indexOf(tag);
+
+        if (index >= 0) {
+            this.inputTags.splice(index, 1);
+        }
+    }
+
+    private filter(value: string): string[] {
+        const filterValue = value.toLowerCase();
+
+        // todo добавить фильтрацию
+        return this.autocompleteAllTags.filter((tag) => tag.toLowerCase().indexOf(filterValue) === 0);
+    }
+}
+
+
+@NgModule({
+    declarations: [DemoComponent],
+    imports: [
+        BrowserAnimationsModule,
+        BrowserModule,
+        FormsModule,
+        McFormFieldModule,
+        ReactiveFormsModule,
+
+        McAutocompleteModule,
+        McTagsModule,
+        McIconModule
+    ],
+    bootstrap: [DemoComponent]
+})
+export class DemoModule {}
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    .catch((error) => console.error(error));
+
diff --git a/src/lib-dev/tag/styles.scss b/src/lib-dev/tags/styles.scss
similarity index 83%
rename from src/lib-dev/tag/styles.scss
rename to src/lib-dev/tags/styles.scss
index 9d31fe1f2..d5270ba99 100644
--- a/src/lib-dev/tag/styles.scss
+++ b/src/lib-dev/tags/styles.scss
@@ -7,3 +7,7 @@
 .mc-tag {
     margin-right: 4px;
 }
+
+.example-container {
+    width: 50%;
+}
diff --git a/src/lib-dev/tags/template.html b/src/lib-dev/tags/template.html
new file mode 100644
index 000000000..1901f4282
--- /dev/null
+++ b/src/lib-dev/tags/template.html
@@ -0,0 +1,121 @@
+<div class="example-container">
+    <br><br><br>
+
+    <h4 class="mc-title">Tags list</h4>
+        <mc-tag-list>
+            <mc-tag *ngFor="let tag of simpleTags" [value]="tag" (removed)="onRemoveTag(tag)">
+                {{ tag }}
+                <i mc-icon="mc-close-S_16" mcTagRemove></i>
+            </mc-tag>
+        </mc-tag-list>
+
+    <br><br><br>
+
+    <h4 class="mc-title">Tags with input</h4>
+    <mc-form-field class="example-chip-list">
+        <mc-tag-list #inputTagList>
+            <mc-tag *ngFor="let tag of inputTags" [value]="tag" (removed)="inputOnRemoveTag(tag)">
+                {{ tag }}
+                <i mc-icon="mc-close-S_16" mcTagRemove></i>
+            </mc-tag>
+            <input placeholder="New tag..."
+                   #inputTagInput
+                   [formControl]="tagCtrl"
+                   [mcTagInputFor]="inputTagList"
+                   [mcTagInputSeparatorKeyCodes]="separatorKeysCodes"
+                   (mcTagInputTokenEnd)="inputOnCreate($event)">
+        </mc-tag-list>
+    </mc-form-field>
+
+    <br><br><br>
+
+    <h4 class="mc-title">Tags with autocomplete</h4>
+    <mc-form-field class="example-chip-list">
+        <mc-tag-list #autocompleteTagList>
+            <mc-tag *ngFor="let tag of autocompleteSelectedTags" [value]="tag" (removed)="autocompleteOnRemove(tag)">
+                {{ tag }}
+                <i mc-icon="mc-close-S_16" mcTagRemove></i>
+            </mc-tag>
+            <input placeholder="New tag..."
+                   #autocompleteTagInput
+                   [formControl]="tagCtrl"
+                   [mcAutocomplete]="autocomplete"
+                   [mcTagInputFor]="autocompleteTagList"
+                   (mcTagInputTokenEnd)="autocompleteOnCreate($event)">
+        </mc-tag-list>
+        <mc-autocomplete #autocomplete (optionSelected)="autocompleteOnSelect($event)">
+            <mc-option *ngIf="autocompleteTagInput.value" [value]="{ new: true, value: autocompleteTagInput.value }">
+                Создать: {{ autocompleteTagInput.value }}
+            </mc-option>
+            <mc-option *ngFor="let tag of autocompleteFilteredTags | async" [value]="tag">{{ tag }}</mc-option>
+        </mc-autocomplete>
+    </mc-form-field>
+
+    <br><br><br>
+
+    <h4 class="mc-title">simple Tags</h4>
+    <br>
+
+    <mc-tag>Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag class="mc-hovered">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag class="mc-focused">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag [disabled]="true">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+
+    <br>
+
+    <mc-tag color="primary">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="primary" class="mc-hovered">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="primary" class="mc-focused">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="primary" [disabled]="true">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+
+    <br>
+
+    <mc-tag color="error">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="error" class="mc-hovered">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="error" class="mc-focused">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="error" [disabled]="true">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+
+    <br><br><br>
+
+    mono<br>
+    <mc-tag class="mc-tag_mono">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag class="mc-hovered mc-tag_mono">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag class="mc-focused mc-tag_mono">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag [disabled]="true" class="mc-tag_mono">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+
+    <br>
+
+    <mc-tag color="primary" class="mc-tag_mono">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="primary" class="mc-tag_mono mc-hovered">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="primary" class="mc-tag_mono mc-focused">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="primary" [disabled]="true" class="mc-tag_mono">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+
+    <br>
+
+    <mc-tag color="error" class="mc-tag_mono">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="error" class="mc-tag_mono mc-hovered">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="error" class="mc-tag_mono mc-focused">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="error" [disabled]="true" class="mc-tag_mono">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+
+    <br><br><br>
+
+    CAPS<br>
+    <mc-tag class="mc-tag_caps">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag class="mc-hovered mc-tag_caps">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag class="mc-focused mc-tag_caps">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag [disabled]="true" class="mc-tag_caps">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+
+    <br>
+
+    <mc-tag color="primary" class="mc-tag_caps">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="primary" class="mc-hovered mc-tag_caps">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="primary" class="mc-focused mc-tag_caps">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="primary" [disabled]="true" class="mc-tag_caps">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+
+    <br>
+
+    <mc-tag color="error" class="mc-tag_caps">Normal <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="error" class="mc-hovered mc-tag_caps">Hovered <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="error" class="mc-focused mc-tag_caps">Focused <i mc-icon="mc-close-S_16"></i></mc-tag>
+    <mc-tag color="error" [disabled]="true" class="mc-tag_caps">Disabled <i mc-icon="mc-close-S_16"></i></mc-tag>
+</div>
diff --git a/src/lib/tag/README.md b/src/lib/autocomplete/README.md
similarity index 100%
rename from src/lib/tag/README.md
rename to src/lib/autocomplete/README.md
diff --git a/src/lib/autocomplete/_autocomplete-theme.scss b/src/lib/autocomplete/_autocomplete-theme.scss
new file mode 100644
index 000000000..ada875565
--- /dev/null
+++ b/src/lib/autocomplete/_autocomplete-theme.scss
@@ -0,0 +1,27 @@
+@import '../core/theming/theming';
+
+@mixin mc-autocomplete-theme($theme) {
+    $second: map-get($theme, second);
+
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
+
+    $is-dark: map-get($theme, is-dark);
+
+    .mc-autocomplete-panel {
+        color: mc-color($foreground, text);
+
+        background-color: if($is-dark, map-get($second, 700), map-get($background, background));
+
+        border-color: mc-color($second);
+
+        box-shadow: 0 3px 3px 0 mc-color($second, A200);
+
+        .mc-selected {
+            background-color: if($is-dark, map-get($second, 700), map-get($background, background));
+        }
+    }
+}
+
+@mixin mc-autocomplete-typography($config) {
+}
diff --git a/src/lib/autocomplete/autocomplete-origin.directive.ts b/src/lib/autocomplete/autocomplete-origin.directive.ts
new file mode 100644
index 000000000..0fad3478a
--- /dev/null
+++ b/src/lib/autocomplete/autocomplete-origin.directive.ts
@@ -0,0 +1,14 @@
+import { Directive, ElementRef } from '@angular/core';
+
+
+/**
+ * Directive applied to an element to make it usable
+ * as a connection point for an autocomplete panel.
+ */
+@Directive({
+    selector: '[mcAutocompleteOrigin]',
+    exportAs: 'mcAutocompleteOrigin'
+})
+export class McAutocompleteOrigin {
+    constructor(public elementRef: ElementRef<HTMLElement>) {}
+}
diff --git a/src/lib/autocomplete/autocomplete-trigger.directive.ts b/src/lib/autocomplete/autocomplete-trigger.directive.ts
new file mode 100644
index 000000000..5252c3cde
--- /dev/null
+++ b/src/lib/autocomplete/autocomplete-trigger.directive.ts
@@ -0,0 +1,659 @@
+import { DOCUMENT } from '@angular/common';
+import {
+    ChangeDetectorRef,
+    Directive,
+    ElementRef,
+    forwardRef,
+    Host,
+    Inject,
+    InjectionToken,
+    Input,
+    NgZone,
+    OnDestroy,
+    Optional,
+    ViewContainerRef
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Directionality } from '@ptsecurity/cdk/bidi';
+import { coerceBooleanProperty } from '@ptsecurity/cdk/coercion';
+import { DOWN_ARROW, ENTER, ESCAPE, TAB, UP_ARROW } from '@ptsecurity/cdk/keycodes';
+import {
+    FlexibleConnectedPositionStrategy,
+    Overlay,
+    OverlayConfig,
+    OverlayRef,
+    IPositionStrategy,
+    IScrollStrategy, IConnectedPosition
+} from '@ptsecurity/cdk/overlay';
+import { TemplatePortal } from '@ptsecurity/cdk/portal';
+import { ViewportRuler } from '@ptsecurity/cdk/scrolling';
+import {
+    countGroupLabelsBeforeOption,
+    getOptionScrollPosition,
+    McOption,
+    McOptionSelectionChange
+} from '@ptsecurity/mosaic/core';
+import { McFormField } from '@ptsecurity/mosaic/form-field';
+import { Subscription, defer, fromEvent, merge, of as observableOf, Subject, Observable } from 'rxjs';
+import { filter, take, switchMap, delay, tap, map } from 'rxjs/operators';
+
+import { McAutocompleteOrigin } from './autocomplete-origin.directive';
+import { McAutocomplete } from './autocomplete.component';
+
+
+/**
+ * The following style constants are necessary to save here in order
+ * to properly calculate the scrollTop of the panel. Because we are not
+ * actually focusing the active item, scroll must be handled manually.
+ */
+
+/** The height of each autocomplete option. */
+export const AUTOCOMPLETE_OPTION_HEIGHT = 32;
+
+/** The total height of the autocomplete panel. */
+export const AUTOCOMPLETE_PANEL_HEIGHT = 256;
+
+export const AUTOCOMPLETE_BORDER_WIDTH: number = 2;
+
+/** Injection token that determines the scroll handling while the autocomplete panel is open. */
+export const MC_AUTOCOMPLETE_SCROLL_STRATEGY =
+    new InjectionToken<() => IScrollStrategy>('mc-autocomplete-scroll-strategy');
+
+// tslint:disable-next-line naming-convention
+export function MC_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => IScrollStrategy {
+    return () => overlay.scrollStrategies.reposition();
+}
+
+export const MC_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = {
+    provide: MC_AUTOCOMPLETE_SCROLL_STRATEGY,
+    deps: [Overlay],
+    useFactory: MC_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY
+};
+
+/**
+ * Provider that allows the autocomplete to register as a ControlValueAccessor.
+ * @docs-private
+ */
+export const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => McAutocompleteTrigger),
+    multi: true
+};
+
+/**
+ * Creates an error to be thrown when attempting to use an autocomplete trigger without a panel.
+ * @docs-private
+ */
+export function getMcAutocompleteMissingPanelError(): Error {
+    return Error('Attempting to open an undefined instance of `mc-autocomplete`. ' +
+        'Make sure that the id passed to the `mcAutocomplete` is correct and that ' +
+        'you\'re attempting to open it after the ngAfterContentInit hook.');
+}
+
+
+@Directive({
+    selector: `input[mcAutocomplete], textarea[mcAutocomplete]`,
+    host: {
+        class: 'mc-autocomplete-trigger',
+        '[attr.autocomplete]': 'autocompleteAttribute',
+        // Note: we use `focusin`, as opposed to `focus`, in order to open the panel
+        // a little earlier. This avoids issues where IE delays the focusing of the input.
+        '(focusin)': 'handleFocus()',
+        '(blur)': 'onTouched()',
+        '(input)': 'handleInput($event)',
+        '(keydown)': 'handleKeydown($event)',
+        '(click)': 'handleClick($event)'
+    },
+    exportAs: 'mcAutocompleteTrigger',
+    providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR]
+})
+export class McAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
+    // @ts-ignore
+    readonly optionSelections: Observable<McOptionSelectionChange> = defer(() => {
+        if (this.autocomplete && this.autocomplete.options) {
+            return merge(...this.autocomplete.options.map((option) => option.onSelectionChange));
+        }
+
+        // If there are any subscribers before `ngAfterViewInit`, the `autocomplete` will be undefined.
+        // Return a stream that we'll replace with the real one once everything is in place.
+        return this.zone.onStable
+            .asObservable()
+            .pipe(take(1), switchMap(() => this.optionSelections));
+    });
+
+    /** The currently active option, coerced to MatOption type. */
+    get activeOption(): McOption | null {
+        if (this.autocomplete && this.autocomplete.keyManager) {
+            return this.autocomplete.keyManager.activeItem;
+        }
+
+        return null;
+    }
+
+    get panelOpen(): boolean {
+        return this.overlayAttached && this.autocomplete.showPanel;
+    }
+
+    /** The autocomplete panel to be attached to this trigger. */
+    @Input('mcAutocomplete') autocomplete: McAutocomplete;
+
+    /**
+     * Reference relative to which to position the autocomplete panel.
+     * Defaults to the autocomplete trigger element.
+     */
+    @Input('mcAutocompleteConnectedTo') connectedTo: McAutocompleteOrigin;
+
+    /**
+     * `autocomplete` attribute to be set on the input element.
+     * @docs-private
+     */
+    @Input('autocomplete') autocompleteAttribute: string = 'off';
+
+    /**
+     * Whether the autocomplete is disabled. When disabled, the element will
+     * act as a regular input and the user won't be able to open the panel.
+     */
+    @Input('mcAutocompleteDisabled')
+    get autocompleteDisabled(): boolean {
+        return this._autocompleteDisabled;
+    }
+
+    set autocompleteDisabled(value: boolean) {
+        this._autocompleteDisabled = coerceBooleanProperty(value);
+    }
+
+    private _autocompleteDisabled = false;
+
+    private overlayAttached: boolean = false;
+
+    private overlayRef: OverlayRef | null;
+
+    private portal: TemplatePortal;
+
+    private componentDestroyed = false;
+
+    private scrollStrategy: () => IScrollStrategy;
+
+    /** Old value of the native input. Used to work around issues with the `input` event on IE. */
+    private previousValue: string | number | null;
+
+    /** Strategy that is used to position the panel. */
+    private positionStrategy: FlexibleConnectedPositionStrategy;
+
+    /** The subscription for closing actions (some are bound to document). */
+    private closingActionsSubscription: Subscription;
+
+    /** Subscription to viewport size changes. */
+    private viewportSubscription = Subscription.EMPTY;
+
+    /**
+     * Whether the autocomplete can open the next time it is focused. Used to prevent a focused,
+     * closed autocomplete from being reopened if the user switches to another browser tab and then
+     * comes back.
+     */
+    private canOpenOnNextFocus = true;
+
+    /** Stream of keyboard events that can close the panel. */
+    private readonly closeKeyEventStream = new Subject<void>();
+
+    constructor(
+        private elementRef: ElementRef<HTMLInputElement>,
+        private viewContainerRef: ViewContainerRef,
+        private changeDetectorRef: ChangeDetectorRef,
+        private overlay: Overlay,
+        private zone: NgZone,
+        @Inject(MC_AUTOCOMPLETE_SCROLL_STRATEGY) scrollStrategy: any,
+        @Optional() private dir: Directionality,
+        @Optional() @Host() private formField: McFormField,
+        @Optional() @Inject(DOCUMENT) private document: any,
+        // @breaking-change 8.0.0 Make `_viewportRuler` required.
+        private viewportRuler?: ViewportRuler
+    ) {
+        // tslint:disable-next-line no-typeof-undefined
+        if (typeof window !== 'undefined') {
+            zone.runOutsideAngular(() => {
+                window.addEventListener('blur', this.windowBlurHandler);
+            });
+        }
+
+        this.scrollStrategy = scrollStrategy;
+    }
+
+    ngOnDestroy() {
+        // tslint:disable-next-line no-typeof-undefined
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('blur', this.windowBlurHandler);
+        }
+
+        this.viewportSubscription.unsubscribe();
+        this.componentDestroyed = true;
+        this.destroyPanel();
+        this.closeKeyEventStream.complete();
+    }
+
+    /** `View -> model callback called when value changes` */
+    // tslint:disable-next-line no-empty
+    onChange: (value: any) => void = () => {};
+
+    /** `View -> model callback called when autocomplete has been touched` */
+    // tslint:disable-next-line no-empty
+    onTouched: () => void = () => {};
+
+    /** Opens the autocomplete suggestion panel. */
+    openPanel(): void {
+        this.attachOverlay();
+    }
+
+    closePanel(): void {
+        if (!this.overlayAttached) { return; }
+
+        if (this.panelOpen) {
+            this.autocomplete.closed.emit();
+        }
+
+        this.autocomplete.isOpen = this.overlayAttached = false;
+
+        if (this.overlayRef && this.overlayRef.hasAttached()) {
+            this.overlayRef.detach();
+            this.closingActionsSubscription.unsubscribe();
+        }
+
+        // Note that in some cases this can end up being called after the component is destroyed.
+        // Add a check to ensure that we don't try to run change detection on a destroyed view.
+        if (!this.componentDestroyed) {
+            // We need to trigger change detection manually, because
+            // `fromEvent` doesn't seem to do it at the proper time.
+            // This ensures that the label is reset when the
+            // user clicks outside.
+            this.changeDetectorRef.detectChanges();
+        }
+    }
+
+    /**
+     * Updates the position of the autocomplete suggestion panel to ensure that it fits all options
+     * within the viewport.
+     */
+    updatePosition(): void {
+        if (this.overlayAttached) {
+            this.overlayRef!.updatePosition();
+        }
+    }
+
+    /**
+     * A stream of actions that should close the autocomplete panel, including
+     * when an option is selected, on blur, and when TAB is pressed.
+     */
+    get panelClosingActions(): Observable<McOptionSelectionChange | null> {
+        return merge(
+            this.optionSelections,
+            this.autocomplete.keyManager.tabOut.pipe(filter(() => this.overlayAttached)),
+            this.closeKeyEventStream,
+            this.getOutsideClickStream(),
+            this.overlayRef ?
+                this.overlayRef.detachments().pipe(filter(() => this.overlayAttached)) :
+                observableOf()
+        ).pipe(
+            // Normalize the output so we return a consistent type.
+            map((event) => event instanceof McOptionSelectionChange ? event : null)
+        );
+    }
+
+    // Implemented as part of ControlValueAccessor.
+    writeValue(value: any): void {
+        Promise.resolve(null).then(() => this.setTriggerValue(value));
+    }
+
+    // Implemented as part of ControlValueAccessor.
+    registerOnChange(fn: (value: any) => {}): void {
+        this.onChange = fn;
+    }
+
+    // Implemented as part of ControlValueAccessor.
+    registerOnTouched(fn: () => {}) {
+        this.onTouched = fn;
+    }
+
+    // Implemented as part of ControlValueAccessor.
+    setDisabledState(isDisabled: boolean) {
+        this.elementRef.nativeElement.disabled = isDisabled;
+    }
+
+    handleKeydown(event: KeyboardEvent): void {
+        // tslint:disable-next-line deprecation
+        const keyCode = event.keyCode;
+
+        // Prevent the default action on all escape key presses. This is here primarily to bring IE
+        // in line with other browsers. By default, pressing escape on IE will cause it to revert
+        // the input value to the one that it had on focus, however it won't dispatch any events
+        // which means that the model value will be out of sync with the view.
+        if (keyCode === ESCAPE) {
+            event.preventDefault();
+        }
+
+        if (this.activeOption && keyCode === ENTER && this.panelOpen) {
+            this.activeOption.selectViaInteraction();
+            this.resetActiveItem();
+            event.preventDefault();
+        } else if (this.autocomplete) {
+            const prevActiveItem = this.autocomplete.keyManager.activeItem;
+
+            if (this.panelOpen || keyCode === TAB) {
+                this.autocomplete.onKeydown(event);
+            } else if (keyCode === DOWN_ARROW && this.canOpen()) {
+                this.openPanel();
+            }
+
+            const isArrowKey = keyCode === UP_ARROW || keyCode === DOWN_ARROW;
+
+            if (isArrowKey || this.autocomplete.keyManager.activeItem !== prevActiveItem) {
+                this.scrollToOption();
+            }
+        }
+    }
+
+    handleInput(event: KeyboardEvent): void {
+        const target = event.target as HTMLInputElement;
+        let value: number | string | null = target.value;
+
+        // Based on `NumberValueAccessor` from forms.
+        if (target.type === 'number') {
+            value = value === '' ? null : parseFloat(value);
+        }
+
+        // If the input has a placeholder, IE will fire the `input` event on page load,
+        // focus and blur, in addition to when the user actually changed the value. To
+        // filter out all of the extra events, we save the value on focus and between
+        // `input` events, and we check whether it changed.
+        // See: https://connect.microsoft.com/IE/feedback/details/885747/
+        if (this.previousValue !== value) {
+            this.previousValue = value;
+            this.onChange(value);
+
+            if (this.canOpen() && this.document.activeElement === event.target) {
+                this.openPanel();
+            }
+        }
+    }
+
+    handleFocus(): void {
+        if (!this.canOpenOnNextFocus) {
+            this.canOpenOnNextFocus = true;
+        } else if (this.canOpen()) {
+            this.previousValue = this.elementRef.nativeElement.value;
+            this.attachOverlay();
+        }
+    }
+
+    handleClick($event: MouseEvent) {
+        if (this.canOpen() && this.document.activeElement === $event.target) {
+            this.openPanel();
+        }
+    }
+
+    /** Stream of clicks outside of the autocomplete panel. */
+    private getOutsideClickStream(): Observable<any> {
+        if (!this.document) { return observableOf(null); }
+
+        return fromEvent<MouseEvent>(this.document, 'click')
+            .pipe(filter((event) => {
+                const clickTarget = event.target as HTMLElement;
+                const formField = this.formField ?
+                    this.formField._elementRef.nativeElement : null;
+
+                return this.overlayAttached &&
+                    clickTarget !== this.elementRef.nativeElement &&
+                    (!formField || !formField.contains(clickTarget)) &&
+                    (!!this.overlayRef && !this.overlayRef.overlayElement.contains(clickTarget));
+            }));
+    }
+
+    /**
+     * Event handler for when the window is blurred. Needs to be an
+     * arrow function in order to preserve the context.
+     */
+    private windowBlurHandler = () => {
+        // If the user blurred the window while the autocomplete is focused, it means that it'll be
+        // refocused when they come back. In this case we want to skip the first focus event, if the
+        // pane was closed, in order to avoid reopening it unintentionally.
+        this.canOpenOnNextFocus = this.document.activeElement !== this.elementRef.nativeElement || this.panelOpen;
+    }
+
+    /**
+     * Given that we are not actually focusing active options, we must manually adjust scroll
+     * to reveal options below the fold. First, we find the offset of the option from the top
+     * of the panel. If that offset is below the fold, the new scrollTop will be the offset -
+     * the panel height + the option height, so the active option will be just visible at the
+     * bottom of the panel. If that offset is above the top of the visible panel, the new scrollTop
+     * will become the offset. If that offset is visible within the panel already, the scrollTop is
+     * not adjusted.
+     */
+    private scrollToOption(): void {
+        const index = this.autocomplete.keyManager.activeItemIndex || 0;
+        const labelCount = countGroupLabelsBeforeOption(index,
+            this.autocomplete.options, this.autocomplete.optionGroups);
+
+        const newScrollPosition = getOptionScrollPosition(
+            index + labelCount,
+            AUTOCOMPLETE_OPTION_HEIGHT,
+            this.autocomplete.getScrollTop(),
+            AUTOCOMPLETE_PANEL_HEIGHT
+        );
+
+        this.autocomplete.setScrollTop(newScrollPosition);
+    }
+
+    /**
+     * This method listens to a stream of panel closing actions and resets the
+     * stream every time the option list changes.
+     */
+    private subscribeToClosingActions(): Subscription {
+        const firstStable = this.zone.onStable.asObservable()
+            .pipe(take(1));
+        const optionChanges = this.autocomplete.options.changes
+            .pipe(
+                tap(() => this.positionStrategy.reapplyLastPosition()),
+                // Defer emitting to the stream until the next tick, because changing
+                // bindings in here will cause "changed after checked" errors.
+                delay(0)
+            );
+
+        // When the zone is stable initially, and when the option list changes...
+        return merge(firstStable, optionChanges)
+            .pipe(
+                // create a new stream of panelClosingActions, replacing any previous streams
+                // that were created, and flatten it so our stream only emits closing events...
+                switchMap(() => {
+                    this.resetActiveItem();
+                    this.autocomplete.setVisibility();
+
+                    if (this.panelOpen) {
+                        this.overlayRef!.updatePosition();
+                    }
+
+                    return this.panelClosingActions;
+                }),
+                // when the first closing event occurs...
+                take(1)
+            )
+            // set the value, close the panel, and complete.
+            .subscribe((event) => this.setValueAndClose(event));
+    }
+
+    /** Destroys the autocomplete suggestion panel. */
+    private destroyPanel(): void {
+        if (this.overlayRef) {
+            this.closePanel();
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+
+    private setTriggerValue(value: any): void {
+        const toDisplay = this.autocomplete && this.autocomplete.displayWith ?
+            this.autocomplete.displayWith(value) :
+            value;
+
+        // Simply falling back to an empty string if the display value is falsy does not work properly.
+        // The display value can also be the number zero and shouldn't fall back to an empty string.
+        const inputValue = toDisplay != null ? toDisplay : '';
+
+        // If it's used within a `MatFormField`, we should set it through the property so it can go
+        // through change detection.
+        if (this.formField) {
+            this.formField._control.value = inputValue;
+        } else {
+            this.elementRef.nativeElement.value = inputValue;
+        }
+
+        this.previousValue = inputValue;
+    }
+
+    /** This method closes the panel, and if a value is specified, also sets the associated
+     * control to that value. It will also mark the control as dirty if this interaction
+     * stemmed from the user.
+     */
+    private setValueAndClose(event: McOptionSelectionChange | null): void {
+        if (event && event.source) {
+            this.clearPreviousSelectedOption(event.source);
+            this.setTriggerValue(event.source.value);
+            this.onChange(event.source.value);
+            this.elementRef.nativeElement.focus();
+
+            this.autocomplete.emitSelectEvent(event.source);
+        }
+
+        this.closePanel();
+    }
+
+    /** Clear any previous selected option and emit a selection change event for this option */
+    private clearPreviousSelectedOption(skip: McOption) {
+        this.autocomplete.options.forEach((option) => {
+            if (option !== skip && option.selected) {
+                option.deselect();
+            }
+        });
+    }
+
+    private attachOverlay(): void {
+        if (!this.autocomplete) {
+            throw getMcAutocompleteMissingPanelError();
+        }
+
+        let overlayRef = this.overlayRef;
+
+        if (!overlayRef) {
+            this.portal = new TemplatePortal(this.autocomplete.template, this.viewContainerRef);
+            overlayRef = this.overlay.create(this.getOverlayConfig());
+            this.overlayRef = overlayRef;
+
+            // Use the `keydownEvents` in order to take advantage of
+            // the overlay event targeting provided by the CDK overlay.
+            overlayRef.keydownEvents().subscribe((event) => {
+                // Close when pressing ESCAPE or ALT + UP_ARROW, based on the a11y guidelines.
+                // See: https://www.w3.org/TR/wai-aria-practices-1.1/#textbox-keyboard-interaction
+                // tslint:disable-next-line deprecation
+                if (event.keyCode === ESCAPE || (event.keyCode === UP_ARROW && event.altKey)) {
+                    this.resetActiveItem();
+                    this.closeKeyEventStream.next();
+                }
+            });
+
+            if (this.viewportRuler) {
+                this.viewportSubscription = this.viewportRuler.change().subscribe(() => {
+                    if (this.panelOpen && overlayRef) {
+                        overlayRef.updateSize({ width: this.getPanelWidth() });
+                    }
+                });
+            }
+        } else {
+            const position = overlayRef.getConfig().positionStrategy as FlexibleConnectedPositionStrategy;
+
+            // Update the trigger, panel width and direction, in case anything has changed.
+            position.setOrigin(this.getConnectedElement());
+            overlayRef.updateSize({ width: this.getPanelWidth() });
+        }
+
+        if (overlayRef && !overlayRef.hasAttached()) {
+            overlayRef.attach(this.portal);
+            this.closingActionsSubscription = this.subscribeToClosingActions();
+        }
+
+        const wasOpen = this.panelOpen;
+
+        this.autocomplete.setVisibility();
+        this.autocomplete.isOpen = this.overlayAttached = true;
+
+        // We need to do an extra `panelOpen` check in here, because the
+        // autocomplete won't be shown if there are no options.
+        if (this.panelOpen && wasOpen !== this.panelOpen) {
+            this.autocomplete.opened.emit();
+        }
+    }
+
+    private getOverlayConfig(): OverlayConfig {
+        return new OverlayConfig({
+            positionStrategy: this.getOverlayPosition(),
+            scrollStrategy: this.scrollStrategy(),
+            width: this.getPanelWidth(),
+            direction: this.dir
+        });
+    }
+
+    private getOverlayPosition(): IPositionStrategy {
+        this.positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(this.getConnectedElement())
+            .withFlexibleDimensions(false)
+            .withPush(false)
+            .withPositions([
+                {
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'top'
+                },
+                {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'bottom',
+
+                    // The overlay edge connected to the trigger should have squared corners, while
+                    // the opposite end has rounded corners. We apply a CSS class to swap the
+                    // border-radius based on the overlay position.
+                    panelClass: 'mc-autocomplete-panel-above'
+                }
+            ] as IConnectedPosition[]);
+
+        return this.positionStrategy;
+    }
+
+    private getConnectedElement(): ElementRef {
+        if (this.connectedTo) {
+            return this.connectedTo.elementRef;
+        }
+
+        return this.formField ? this.formField.getConnectedOverlayOrigin() : this.elementRef;
+    }
+
+    private getPanelWidth(): number | string {
+        return this.autocomplete.panelWidth || this.getHostWidth() - AUTOCOMPLETE_BORDER_WIDTH;
+    }
+
+    private getHostWidth(): number {
+        return this.getConnectedElement().nativeElement.getBoundingClientRect().width;
+    }
+
+    /**
+     * Resets the active item to -1 so arrow events will activate the
+     * correct options, or to 0 if the consumer opted into it.
+     */
+    private resetActiveItem(): void {
+        this.autocomplete.keyManager.setActiveItem(this.autocomplete.autoActiveFirstOption ? 0 : -1);
+    }
+
+    private canOpen(): boolean {
+        const element = this.elementRef.nativeElement;
+
+        return !element.readOnly && !element.disabled && !this._autocompleteDisabled;
+    }
+}
diff --git a/src/lib/autocomplete/autocomplete.component.ts b/src/lib/autocomplete/autocomplete.component.ts
new file mode 100644
index 000000000..dd4ba316e
--- /dev/null
+++ b/src/lib/autocomplete/autocomplete.component.ts
@@ -0,0 +1,187 @@
+import {
+    AfterContentInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ContentChildren,
+    ElementRef,
+    EventEmitter,
+    Inject,
+    InjectionToken,
+    Input,
+    Output,
+    QueryList,
+    TemplateRef,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
+import { ActiveDescendantKeyManager } from '@ptsecurity/cdk/a11y';
+import { coerceBooleanProperty } from '@ptsecurity/cdk/coercion';
+import { MC_OPTION_PARENT_COMPONENT, McOptgroup, McOption } from '@ptsecurity/mosaic/core';
+
+
+/**
+ * Autocomplete IDs need to be unique across components, so this counter exists outside of
+ * the component definition.
+ */
+let uniqueAutocompleteIdCounter = 0;
+
+export class McAutocompleteSelectedEvent {
+    constructor(public source: McAutocomplete, public option: McOption) {}
+}
+
+/** Default `mc-autocomplete` options that can be overridden. */
+// tslint:disable-next-line naming-convention
+export interface McAutocompleteDefaultOptions {
+    /** Whether the first option should be highlighted when an autocomplete panel is opened. */
+    autoActiveFirstOption?: boolean;
+}
+
+/** Injection token to be used to override the default options for `mc-autocomplete`. */
+export const MC_AUTOCOMPLETE_DEFAULT_OPTIONS =
+    new InjectionToken<McAutocompleteDefaultOptions>('mc-autocomplete-default-options', {
+        providedIn: 'root',
+        factory: MC_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY
+    });
+
+// tslint:disable-next-line naming-convention
+export function MC_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): McAutocompleteDefaultOptions {
+    return { autoActiveFirstOption: true };
+}
+
+@Component({
+    selector: 'mc-autocomplete',
+    exportAs: 'mcAutocomplete',
+    templateUrl: 'autocomplete.html',
+    styleUrls: ['autocomplete.css'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { class: 'mc-autocomplete' },
+    providers: [
+        { provide: MC_OPTION_PARENT_COMPONENT, useExisting: McAutocomplete }
+    ]
+})
+export class McAutocomplete implements AfterContentInit {
+    /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
+    id: string = `mc-autocomplete-${uniqueAutocompleteIdCounter++}`;
+
+    /** Manages active item in option list based on key events. */
+    keyManager: ActiveDescendantKeyManager<McOption>;
+
+    /** Whether the autocomplete panel should be visible, depending on option length. */
+    showPanel: boolean = false;
+
+    @ViewChild(TemplateRef) template: TemplateRef<any>;
+
+    @ViewChild('panel') panel: ElementRef;
+
+    @ContentChildren(McOption, { descendants: true }) options: QueryList<McOption>;
+
+    @ContentChildren(McOptgroup) optionGroups: QueryList<McOptgroup>;
+
+    /** Function that maps an option's control value to its display value in the trigger. */
+    @Input() displayWith: ((value: any) => string) | null = null;
+
+    /**
+     * Specify the width of the autocomplete panel.  Can be any CSS sizing value, otherwise it will
+     * match the width of its host.
+     */
+    @Input() panelWidth: string | number;
+
+    /** Event that is emitted whenever an option from the list is selected. */
+    @Output() readonly optionSelected: EventEmitter<McAutocompleteSelectedEvent> =
+        new EventEmitter<McAutocompleteSelectedEvent>();
+
+    /** Event that is emitted when the autocomplete panel is opened. */
+    @Output() readonly opened: EventEmitter<void> = new EventEmitter<void>();
+
+    /** Event that is emitted when the autocomplete panel is closed. */
+    @Output() readonly closed: EventEmitter<void> = new EventEmitter<void>();
+
+    /**
+     * Takes classes set on the host mc-autocomplete element and applies them to the panel
+     * inside the overlay container to allow for easy styling.
+     */
+    get classList() {
+        return this._classList;
+    }
+
+    @Input('class')
+    set classList(value: string) {
+        if (value && value.length) {
+            value.split(' ')
+                .forEach((className) => this._classList[className.trim()] = true);
+
+            this.elementRef.nativeElement.className = '';
+        }
+    }
+
+    private _classList: any = {};
+
+    /**
+     * Whether the first option should be highlighted when the autocomplete panel is opened.
+     * Can be configured globally through the `MC_AUTOCOMPLETE_DEFAULT_OPTIONS` token.
+     */
+    @Input()
+    get autoActiveFirstOption(): boolean {
+        return this._autoActiveFirstOption;
+    }
+
+    set autoActiveFirstOption(value: boolean) {
+        this._autoActiveFirstOption = coerceBooleanProperty(value);
+    }
+
+    private _autoActiveFirstOption: boolean;
+
+    get isOpen(): boolean {
+        return this._isOpen && this.showPanel;
+    }
+
+    set isOpen(value: boolean) {
+        this._isOpen = value;
+    }
+
+    private _isOpen: boolean = false;
+
+    constructor(
+        private changeDetectorRef: ChangeDetectorRef,
+        private elementRef: ElementRef<HTMLElement>,
+        @Inject(MC_AUTOCOMPLETE_DEFAULT_OPTIONS) defaults: McAutocompleteDefaultOptions
+    ) {
+        this._autoActiveFirstOption = !!defaults.autoActiveFirstOption;
+    }
+
+    ngAfterContentInit() {
+        this.keyManager = new ActiveDescendantKeyManager<McOption>(this.options);
+        this.setVisibility();
+    }
+
+    setScrollTop(scrollTop: number): void {
+        if (this.panel) {
+            this.panel.nativeElement.scrollTop = scrollTop;
+        }
+    }
+
+    getScrollTop(): number {
+        return this.panel ? this.panel.nativeElement.scrollTop : 0;
+    }
+
+    setVisibility() {
+        this.showPanel = !!this.options.length;
+        this._classList['mc-autocomplete_visible'] = this.showPanel;
+        this._classList['mc-autocomplete_hidden'] = !this.showPanel;
+
+        this.changeDetectorRef.markForCheck();
+    }
+
+    emitSelectEvent(option: McOption): void {
+        const event = new McAutocompleteSelectedEvent(this, option);
+
+        this.optionSelected.emit(event);
+    }
+
+    onKeydown(event: KeyboardEvent): any {
+        this.keyManager.onKeydown(event);
+    }
+}
+
diff --git a/src/lib/autocomplete/autocomplete.html b/src/lib/autocomplete/autocomplete.html
new file mode 100644
index 000000000..ad742bf0c
--- /dev/null
+++ b/src/lib/autocomplete/autocomplete.html
@@ -0,0 +1,5 @@
+<ng-template>
+    <div class="mc-autocomplete-panel" role="listbox" [id]="id" [ngClass]="classList" #panel>
+        <ng-content></ng-content>
+    </div>
+</ng-template>
diff --git a/src/lib/tag/tag.component.spec.ts b/src/lib/autocomplete/autocomplete.md
similarity index 100%
rename from src/lib/tag/tag.component.spec.ts
rename to src/lib/autocomplete/autocomplete.md
diff --git a/src/lib/autocomplete/autocomplete.module.ts b/src/lib/autocomplete/autocomplete.module.ts
new file mode 100644
index 000000000..c4eeacb8c
--- /dev/null
+++ b/src/lib/autocomplete/autocomplete.module.ts
@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { OverlayModule } from '@ptsecurity/cdk/overlay';
+import { McOptionModule, McCommonModule } from '@ptsecurity/mosaic/core';
+
+import { McAutocompleteOrigin } from './autocomplete-origin.directive';
+import {
+    McAutocompleteTrigger,
+    MC_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER
+} from './autocomplete-trigger.directive';
+import { McAutocomplete } from './autocomplete.component';
+
+
+@NgModule({
+    imports: [McOptionModule, OverlayModule, McCommonModule, CommonModule],
+    exports: [
+        McAutocomplete,
+        McOptionModule,
+        McAutocompleteTrigger,
+        McAutocompleteOrigin,
+        McCommonModule
+    ],
+    declarations: [McAutocomplete, McAutocompleteTrigger, McAutocompleteOrigin],
+    providers: [MC_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER]
+})
+export class McAutocompleteModule {}
diff --git a/src/lib/autocomplete/autocomplete.scss b/src/lib/autocomplete/autocomplete.scss
new file mode 100644
index 000000000..5feb2d2f0
--- /dev/null
+++ b/src/lib/autocomplete/autocomplete.scss
@@ -0,0 +1,63 @@
+@import '../../cdk/a11y/a11y';
+
+/**
+ * The max-height of the panel, currently matching mc-select value.
+ */
+$mc-autocomplete-panel-max-height: 256px !default;
+$mc-autocomplete-panel-border-radius: 3px !default;
+
+.mc-autocomplete-trigger {
+    text-overflow: ellipsis;
+}
+
+.mc-autocomplete-panel {
+    visibility: hidden;
+
+    position: relative;
+
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
+
+    margin-top: -1px;
+
+    min-width: 100%;
+    width: 100%;
+    max-width: none;
+
+    max-height: $mc-autocomplete-panel-max-height;
+
+    border: {
+        width: 1px;
+        style: solid;
+    }
+
+    border-bottom-left-radius: $mc-autocomplete-panel-border-radius;
+    border-bottom-right-radius: $mc-autocomplete-panel-border-radius;
+
+    padding: 4px 0;
+
+    &.mc-autocomplete_visible {
+        visibility: visible;
+    }
+
+    &.mc-autocomplete_hidden {
+        visibility: hidden;
+    }
+
+    .mc-autocomplete-panel-above & {
+        border-radius: 0;
+        border-top-left-radius: $mc-autocomplete-panel-border-radius;
+        border-top-right-radius: $mc-autocomplete-panel-border-radius;
+    }
+
+    // We need to offset horizontal dividers by their height, because
+    // they throw off the keyboard navigation inside the panel.
+    .mc-divider-horizontal {
+        margin-top: -1px;
+    }
+
+    @include cdk-high-contrast {
+        outline: solid 1px;
+    }
+}
+
diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
new file mode 100644
index 000000000..ec6202227
--- /dev/null
+++ b/src/lib/autocomplete/autocomplete.spec.ts
@@ -0,0 +1,2583 @@
+// tslint:disable:no-magic-numbers
+// tslint:disable:no-unbound-method
+// tslint:disable:mocha-no-side-effect-code
+// tslint:disable:max-func-body-length
+// tslint:disable:no-inferred-empty-object-type
+// tslint:disable:chai-vague-errors
+import {
+    ChangeDetectionStrategy,
+    Component,
+    NgZone,
+    OnDestroy,
+    OnInit,
+    Provider,
+    QueryList,
+    ViewChild,
+    ViewChildren,
+    Type
+} from '@angular/core';
+import {
+    async,
+    ComponentFixture,
+    fakeAsync,
+    flush,
+    inject,
+    TestBed,
+    tick
+} from '@angular/core/testing';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Directionality } from '@ptsecurity/cdk/bidi';
+import { DOWN_ARROW, ENTER, ESCAPE, SPACE, TAB, UP_ARROW } from '@ptsecurity/cdk/keycodes';
+import { Overlay, OverlayContainer } from '@ptsecurity/cdk/overlay';
+import { ScrollDispatcher } from '@ptsecurity/cdk/scrolling';
+import {
+    createKeyboardEvent,
+    dispatchFakeEvent,
+    dispatchKeyboardEvent,
+    MockNgZone,
+    typeInElement,
+    dispatchEvent
+} from '@ptsecurity/cdk/testing';
+import { McOption, McOptionSelectionChange } from '@ptsecurity/mosaic/core';
+import { McFormField, McFormFieldModule } from '@ptsecurity/mosaic/form-field';
+import { Observable, Subject, Subscription, EMPTY } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+
+import { McInputModule } from '../input/index';
+
+import {
+    getMcAutocompleteMissingPanelError,
+    MC_AUTOCOMPLETE_DEFAULT_OPTIONS,
+    MC_AUTOCOMPLETE_SCROLL_STRATEGY,
+    McAutocomplete,
+    McAutocompleteModule,
+    McAutocompleteSelectedEvent,
+    McAutocompleteTrigger,
+    McAutocompleteOrigin
+} from './index';
+
+
+describe('McAutocomplete', () => {
+    let overlayContainer: OverlayContainer;
+    let overlayContainerElement: HTMLElement;
+    let zone: MockNgZone;
+
+    // Creates a test component fixture.
+    function createComponent<T>(component: Type<T>, providers: Provider[] = []) {
+        TestBed.configureTestingModule({
+            imports: [
+                McAutocompleteModule,
+                McFormFieldModule,
+                McInputModule,
+                FormsModule,
+                ReactiveFormsModule,
+                NoopAnimationsModule
+            ],
+            declarations: [component],
+            providers: [
+                { provide: NgZone, useFactory: () => zone = new MockNgZone() },
+                { provide: MC_AUTOCOMPLETE_DEFAULT_OPTIONS, useFactory: () => ({ autoActiveFirstOption: false }) },
+                ...providers
+            ]
+        });
+
+        TestBed.compileComponents();
+
+        inject([OverlayContainer], (oc: OverlayContainer) => {
+            overlayContainer = oc;
+            overlayContainerElement = oc.getContainerElement();
+        })();
+
+        return TestBed.createComponent<T>(component);
+    }
+
+    afterEach(inject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
+        // Since we're resetting the testing module in some of the tests,
+        // we can potentially have multiple overlay containers.
+        currentOverlayContainer.ngOnDestroy();
+        overlayContainer.ngOnDestroy();
+    }));
+
+    describe('panel toggling', () => {
+        let fixture: ComponentFixture<SimpleAutocomplete>;
+        let input: HTMLInputElement;
+
+        beforeEach(() => {
+            fixture = createComponent(SimpleAutocomplete);
+            fixture.detectChanges();
+            input = fixture.debugElement.query(By.css('input')).nativeElement;
+        });
+
+        it('should open the panel when the input is focused', () => {
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(false, `Expected panel state to start out closed.`);
+
+            dispatchFakeEvent(input, 'focusin');
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(true, `Expected panel state to read open when input is focused.`);
+            expect(overlayContainerElement.textContent)
+                .toContain('Alabama', `Expected panel to display when input is focused.`);
+            expect(overlayContainerElement.textContent)
+                .toContain('California', `Expected panel to display when input is focused.`);
+        });
+
+        it('should not open the panel on focus if the input is readonly', fakeAsync(() => {
+            const trigger = fixture.componentInstance.trigger;
+            input.readOnly = true;
+            fixture.detectChanges();
+
+            expect(trigger.panelOpen).toBe(false, 'Expected panel state to start out closed.');
+            dispatchFakeEvent(input, 'focusin');
+            flush();
+
+            fixture.detectChanges();
+            expect(trigger.panelOpen).toBe(false, 'Expected panel to stay closed.');
+        }));
+
+        it('should not open using the arrow keys when the input is readonly', fakeAsync(() => {
+            const trigger = fixture.componentInstance.trigger;
+            input.readOnly = true;
+            fixture.detectChanges();
+
+            expect(trigger.panelOpen).toBe(false, 'Expected panel state to start out closed.');
+            dispatchKeyboardEvent(input, 'keydown', DOWN_ARROW);
+            flush();
+
+            fixture.detectChanges();
+            expect(trigger.panelOpen).toBe(false, 'Expected panel to stay closed.');
+        }));
+
+        it('should open the panel programmatically', () => {
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(false, `Expected panel state to start out closed.`);
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(true, `Expected panel state to read open when opened programmatically.`);
+            expect(overlayContainerElement.textContent)
+                .toContain('Alabama', `Expected panel to display when opened programmatically.`);
+            expect(overlayContainerElement.textContent)
+                .toContain('California', `Expected panel to display when opened programmatically.`);
+        });
+
+        it('should show the panel when the first open is after the initial zone stabilization',
+            async(() => {
+                // Note that we're running outside the Angular zone, in order to be able
+                // to test properly without the subscription from `_subscribeToClosingActions`
+                // giving us a false positive.
+                fixture.ngZone!.runOutsideAngular(() => {
+                    fixture.componentInstance.trigger.openPanel();
+
+                    Promise.resolve().then(() => {
+                        expect(fixture.componentInstance.panel.showPanel)
+                            .toBe(true, `Expected panel to be visible.`);
+                    });
+                });
+            }));
+
+        it('should close the panel when the user clicks away', fakeAsync(() => {
+            dispatchFakeEvent(input, 'focusin');
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+            dispatchFakeEvent(document, 'click');
+
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(false, `Expected clicking outside the panel to set its state to closed.`);
+            expect(overlayContainerElement.textContent)
+                .toEqual('', `Expected clicking outside the panel to close the panel.`);
+        }));
+
+        it('should close the panel when the user taps away on a touch device', fakeAsync(() => {
+            dispatchFakeEvent(input, 'focus');
+            fixture.detectChanges();
+            flush();
+            dispatchFakeEvent(document, 'touchend');
+
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(false, `Expected tapping outside the panel to set its state to closed.`);
+            expect(overlayContainerElement.textContent)
+                .toEqual('', `Expected tapping outside the panel to close the panel.`);
+        }));
+
+        it('should close the panel when an option is clicked', fakeAsync(() => {
+            dispatchFakeEvent(input, 'focusin');
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+
+            const option = overlayContainerElement.querySelector('mc-option') as HTMLElement;
+            option.click();
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(false, `Expected clicking an option to set the panel state to closed.`);
+            expect(overlayContainerElement.textContent)
+                .toEqual('', `Expected clicking an option to close the panel.`);
+        }));
+
+        it('should close the panel when a newly created option is clicked', fakeAsync(() => {
+            dispatchFakeEvent(input, 'focusin');
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+
+            // Filter down the option list to a subset of original options ('Alabama', 'California')
+            typeInElement('al', input);
+            fixture.detectChanges();
+            tick();
+
+            let options: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-option');
+            options[0].click();
+
+            // Changing value from 'Alabama' to 'al' to re-populate the option list,
+            // ensuring that 'California' is created new.
+            dispatchFakeEvent(input, 'focusin');
+            typeInElement('al', input);
+            fixture.detectChanges();
+            tick();
+
+            options = overlayContainerElement.querySelectorAll('mc-option');
+            options[1].click();
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(false, `Expected clicking a new option to set the panel state to closed.`);
+            expect(overlayContainerElement.textContent)
+                .toEqual('', `Expected clicking a new option to close the panel.`);
+        }));
+
+        it('should close the panel programmatically', () => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            fixture.componentInstance.trigger.closePanel();
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(false, `Expected closing programmatically to set the panel state to closed.`);
+            expect(overlayContainerElement.textContent)
+                .toEqual('', `Expected closing programmatically to close the panel.`);
+        });
+
+        it('should not throw when attempting to close the panel of a destroyed autocomplete', () => {
+            const trigger = fixture.componentInstance.trigger;
+
+            trigger.openPanel();
+            fixture.detectChanges();
+            fixture.destroy();
+
+            expect(() => trigger.closePanel()).not.toThrow();
+        });
+
+        it('should hide the panel when the options list is empty', fakeAsync(() => {
+            dispatchFakeEvent(input, 'focusin');
+            fixture.detectChanges();
+
+            const panel = overlayContainerElement.querySelector('.mc-autocomplete-panel') as HTMLElement;
+
+            expect(panel.classList)
+                .toContain('mc-autocomplete_visible', `Expected panel to start out visible.`);
+
+            // Filter down the option list such that no options match the value
+            typeInElement('af', input);
+            fixture.detectChanges();
+            tick();
+            fixture.detectChanges();
+
+            expect(panel.classList)
+                .toContain('mc-autocomplete_hidden', `Expected panel to hide itself when empty.`);
+        }));
+
+        it('should not open the panel when the `input` event is invoked on a non-focused input', () => {
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(false, `Expected panel state to start out closed.`);
+
+            input.value = 'Alabama';
+            dispatchFakeEvent(input, 'input');
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(false, `Expected panel state to stay closed.`);
+        });
+
+        it('should toggle the visibility when typing and closing the panel', fakeAsync(() => {
+            fixture.componentInstance.trigger.openPanel();
+            tick();
+            fixture.detectChanges();
+
+            expect(overlayContainerElement.querySelector('.mc-autocomplete-panel')!.classList)
+                .toContain('mc-autocomplete_visible', 'Expected panel to be visible.');
+
+            typeInElement('x', input);
+            fixture.detectChanges();
+            tick();
+            fixture.detectChanges();
+
+            expect(overlayContainerElement.querySelector('.mc-autocomplete-panel')!.classList)
+                .toContain('mc-autocomplete_hidden', 'Expected panel to be hidden.');
+
+            fixture.componentInstance.trigger.closePanel();
+            fixture.detectChanges();
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            typeInElement('al', input);
+            fixture.detectChanges();
+            tick();
+            fixture.detectChanges();
+
+            expect(overlayContainerElement.querySelector('.mc-autocomplete-panel')!.classList)
+                .toContain('mc-autocomplete_visible', 'Expected panel to be visible.');
+        }));
+
+        it('should provide the open state of the panel', fakeAsync(() => {
+            expect(fixture.componentInstance.panel.isOpen).toBeFalsy(
+                `Expected the panel to be unopened initially.`);
+
+            dispatchFakeEvent(input, 'focusin');
+            fixture.detectChanges();
+            flush();
+
+            expect(fixture.componentInstance.panel.isOpen).toBeTruthy(
+                `Expected the panel to be opened on focus.`);
+        }));
+
+        it('should emit an event when the panel is opened', () => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.openedSpy).toHaveBeenCalled();
+        });
+
+        it('should not emit the `opened` event when no options are being shown', () => {
+            fixture.componentInstance.filteredStates = fixture.componentInstance.states = [];
+            fixture.detectChanges();
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.openedSpy).not.toHaveBeenCalled();
+        });
+
+        it('should not emit the opened event multiple times while typing', fakeAsync(() => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.openedSpy).toHaveBeenCalledTimes(1);
+
+            typeInElement('Alabam', input);
+            fixture.detectChanges();
+            tick();
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.openedSpy).toHaveBeenCalledTimes(1);
+        }));
+
+        it('should emit an event when the panel is closed', () => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            fixture.componentInstance.trigger.closePanel();
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.closedSpy).toHaveBeenCalled();
+        });
+
+        it('should not emit the `closed` event when no options were shown', () => {
+            fixture.componentInstance.filteredStates = fixture.componentInstance.states = [];
+            fixture.detectChanges();
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            fixture.componentInstance.trigger.closePanel();
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.closedSpy).not.toHaveBeenCalled();
+        });
+
+        it('should not be able to open the panel if the autocomplete is disabled', () => {
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(false, `Expected panel state to start out closed.`);
+
+            fixture.componentInstance.autocompleteDisabled = true;
+            fixture.detectChanges();
+
+            dispatchFakeEvent(input, 'focusin');
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(false, `Expected panel to remain closed.`);
+        });
+
+        it('should continue to update the model if the autocomplete is disabled', () => {
+            fixture.componentInstance.autocompleteDisabled = true;
+            fixture.detectChanges();
+
+            typeInElement('hello', input);
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.stateCtrl.value).toBe('hello');
+        });
+
+        xit('should set aria-haspopup depending on whether the autocomplete is disabled', () => {
+            expect(input.getAttribute('aria-haspopup')).toBe('true');
+
+            fixture.componentInstance.autocompleteDisabled = true;
+            fixture.detectChanges();
+
+            expect(input.getAttribute('aria-haspopup')).toBe('false');
+        });
+
+    });
+
+    it('should have the correct text direction in RTL', () => {
+        const rtlFixture = createComponent(SimpleAutocomplete, [
+            { provide: Directionality, useFactory: () => ({ value: 'rtl', change: EMPTY }) }
+        ]);
+
+        rtlFixture.detectChanges();
+        rtlFixture.componentInstance.trigger.openPanel();
+        rtlFixture.detectChanges();
+
+        const boundingBox =
+            overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
+        expect(boundingBox.getAttribute('dir')).toEqual('rtl');
+    });
+
+    it('should update the panel direction if it changes for the trigger', () => {
+        const dirProvider = { value: 'rtl', change: EMPTY };
+        const rtlFixture = createComponent(SimpleAutocomplete, [
+            { provide: Directionality, useFactory: () => dirProvider }
+        ]);
+
+        rtlFixture.detectChanges();
+        rtlFixture.componentInstance.trigger.openPanel();
+        rtlFixture.detectChanges();
+
+        let boundingBox =
+            overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
+        expect(boundingBox.getAttribute('dir')).toEqual('rtl');
+
+        rtlFixture.componentInstance.trigger.closePanel();
+        rtlFixture.detectChanges();
+
+        dirProvider.value = 'ltr';
+        rtlFixture.componentInstance.trigger.openPanel();
+        rtlFixture.detectChanges();
+
+        boundingBox =
+            overlayContainerElement.querySelector('.cdk-overlay-connected-position-bounding-box')!;
+        expect(boundingBox.getAttribute('dir')).toEqual('ltr');
+    });
+
+    it('should be able to set a custom value for the `autocomplete` attribute', () => {
+        const fixture = createComponent(AutocompleteWithNativeAutocompleteAttribute);
+        const input = fixture.nativeElement.querySelector('input');
+
+        fixture.detectChanges();
+
+        expect(input.getAttribute('autocomplete')).toBe('changed');
+    });
+
+    it('should not throw when typing in an element with a null and disabled autocomplete', () => {
+        const fixture = createComponent(InputWithoutAutocompleteAndDisabled);
+        fixture.detectChanges();
+
+        expect(() => {
+            dispatchKeyboardEvent(fixture.nativeElement.querySelector('input'), 'keydown', SPACE);
+            fixture.detectChanges();
+        }).not.toThrow();
+    });
+
+    describe('forms integration', () => {
+        let fixture: ComponentFixture<SimpleAutocomplete>;
+        let input: HTMLInputElement;
+
+        beforeEach(() => {
+            fixture = createComponent(SimpleAutocomplete);
+            fixture.detectChanges();
+
+            input = fixture.debugElement.query(By.css('input')).nativeElement;
+        });
+
+        it('should update control value as user types with input value', () => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+
+            typeInElement('a', input);
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.stateCtrl.value)
+                .toEqual('a', 'Expected control value to be updated as user types.');
+
+            typeInElement('al', input);
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.stateCtrl.value)
+                .toEqual('al', 'Expected control value to be updated as user types.');
+        });
+
+        it('should update control value when autofilling', () => {
+            // Simulate the browser autofilling the input by setting a value and
+            // dispatching an `input` event while the input is out of focus.
+            expect(document.activeElement).not.toBe(input, 'Expected input not to have focus.');
+            input.value = 'Alabama';
+            dispatchFakeEvent(input, 'input');
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.stateCtrl.value)
+                .toBe('Alabama', 'Expected value to be propagated to the form control.');
+        });
+
+        it('should update control value when option is selected with option value', fakeAsync(() => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+
+            const options: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-option');
+            options[1].click();
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.stateCtrl.value)
+                .toEqual({ code: 'CA', name: 'California' },
+                    'Expected control value to equal the selected option value.');
+        }));
+
+        it('should update the control back to a string if user types after an option is selected',
+            fakeAsync(() => {
+                fixture.componentInstance.trigger.openPanel();
+                fixture.detectChanges();
+                zone.simulateZoneExit();
+
+                const options: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-option');
+                options[1].click();
+                fixture.detectChanges();
+
+                typeInElement('Californi', input);
+                fixture.detectChanges();
+                tick();
+
+                expect(fixture.componentInstance.stateCtrl.value)
+                    .toEqual('Californi', 'Expected control value to revert back to string.');
+            }));
+
+        it('should fill the text field with display value when an option is selected', fakeAsync(() => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+
+            const options: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-option');
+            options[1].click();
+            fixture.detectChanges();
+
+            expect(input.value)
+                .toContain('California', `Expected text field to fill with selected value.`);
+        }));
+
+        it('should fill the text field with value if displayWith is not set', fakeAsync(() => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+
+            fixture.componentInstance.panel.displayWith = null;
+            fixture.componentInstance.options.toArray()[1].value = 'test value';
+            fixture.detectChanges();
+
+            const options: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-option');
+            options[1].click();
+
+            fixture.detectChanges();
+            expect(input.value)
+                .toContain('test value', `Expected input to fall back to selected option's value.`);
+        }));
+
+        it('should fill the text field correctly if value is set to obj programmatically',
+            fakeAsync(() => {
+                fixture.componentInstance.stateCtrl.setValue({ code: 'AL', name: 'Alabama' });
+                fixture.detectChanges();
+                tick();
+                fixture.detectChanges();
+
+                expect(input.value)
+                    .toContain('Alabama', `Expected input to fill with matching option's viewValue.`);
+            }));
+
+        it('should clear the text field if value is reset programmatically', fakeAsync(() => {
+            typeInElement('Alabama', input);
+            fixture.detectChanges();
+            tick();
+
+            fixture.componentInstance.stateCtrl.reset();
+            tick();
+
+            fixture.detectChanges();
+            tick();
+
+            expect(input.value).toEqual('', `Expected input value to be empty after reset.`);
+        }));
+
+        it('should disable input in view when disabled programmatically', () => {
+            const formFieldElement = fixture.debugElement.query(By.css('.mc-form-field')).nativeElement;
+
+            expect(input.disabled)
+                .toBe(false, `Expected input to start out enabled in view.`);
+            expect(formFieldElement.classList.contains('mc-disabled'))
+                .toBe(false, `Expected input underline to start out with normal styles.`);
+
+            fixture.componentInstance.stateCtrl.disable();
+            fixture.detectChanges();
+
+            expect(input.disabled)
+                .toBe(true, `Expected input to be disabled in view when disabled programmatically.`);
+            expect(formFieldElement.classList.contains('mc-disabled'))
+                .toBe(true, `Expected input underline to display disabled styles.`);
+        });
+
+        it('should mark the autocomplete control as dirty as user types', () => {
+            expect(fixture.componentInstance.stateCtrl.dirty)
+                .toBe(false, `Expected control to start out pristine.`);
+
+            typeInElement('a', input);
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.stateCtrl.dirty)
+                .toBe(true, `Expected control to become dirty when the user types into the input.`);
+        });
+
+        it('should mark the autocomplete control as dirty when an option is selected', fakeAsync(() => {
+            expect(fixture.componentInstance.stateCtrl.dirty)
+                .toBe(false, `Expected control to start out pristine.`);
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+
+            const options: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-option');
+            options[1].click();
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.stateCtrl.dirty)
+                .toBe(true, `Expected control to become dirty when an option was selected.`);
+        }));
+
+        it('should not mark the control dirty when the value is set programmatically', () => {
+            expect(fixture.componentInstance.stateCtrl.dirty)
+                .toBe(false, `Expected control to start out pristine.`);
+
+            fixture.componentInstance.stateCtrl.setValue('AL');
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.stateCtrl.dirty)
+                .toBe(false, `Expected control to stay pristine if value is set programmatically.`);
+        });
+
+        it('should mark the autocomplete control as touched on blur', () => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            expect(fixture.componentInstance.stateCtrl.touched)
+                .toBe(false, `Expected control to start out untouched.`);
+
+            dispatchFakeEvent(input, 'blur');
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.stateCtrl.touched)
+                .toBe(true, `Expected control to become touched on blur.`);
+        });
+
+        it('should disable the input when used with a value accessor and without `mcInput`', () => {
+            overlayContainer.ngOnDestroy();
+            fixture.destroy();
+            TestBed.resetTestingModule();
+
+            const plainFixture = createComponent(PlainAutocompleteInputWithFormControl);
+            plainFixture.detectChanges();
+            input = plainFixture.nativeElement.querySelector('input');
+
+            expect(input.disabled).toBe(false);
+
+            plainFixture.componentInstance.formControl.disable();
+            plainFixture.detectChanges();
+
+            expect(input.disabled).toBe(true);
+        });
+
+    });
+
+    describe('keyboard events', () => {
+        let fixture: ComponentFixture<SimpleAutocomplete>;
+        let input: HTMLInputElement;
+        let DOWN_ARROW_EVENT: KeyboardEvent;
+        let UP_ARROW_EVENT: KeyboardEvent;
+        let ENTER_EVENT: KeyboardEvent;
+
+        beforeEach(fakeAsync(() => {
+            fixture = createComponent(SimpleAutocomplete);
+            fixture.detectChanges();
+
+            input = fixture.debugElement.query(By.css('input')).nativeElement;
+            DOWN_ARROW_EVENT = createKeyboardEvent('keydown', DOWN_ARROW);
+            UP_ARROW_EVENT = createKeyboardEvent('keydown', UP_ARROW);
+            ENTER_EVENT = createKeyboardEvent('keydown', ENTER);
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+        }));
+
+        it('should not focus the option when DOWN key is pressed', () => {
+            spyOn(fixture.componentInstance.options.first, 'focus');
+
+            fixture.componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            expect(fixture.componentInstance.options.first.focus).not.toHaveBeenCalled();
+        });
+
+        it('should not close the panel when DOWN key is pressed', () => {
+            fixture.componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(true, `Expected panel state to stay open when DOWN key is pressed.`);
+            expect(overlayContainerElement.textContent)
+                .toContain('Alabama', `Expected panel to keep displaying when DOWN key is pressed.`);
+            expect(overlayContainerElement.textContent)
+                .toContain('California', `Expected panel to keep displaying when DOWN key is pressed.`);
+        });
+
+        it('should set the active item to the first option when DOWN key is pressed', () => {
+            const componentInstance = fixture.componentInstance;
+            const optionEls: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-option');
+
+            expect(componentInstance.trigger.panelOpen)
+                .toBe(true, 'Expected first down press to open the pane.');
+
+            componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            fixture.detectChanges();
+
+            expect(componentInstance.trigger.activeOption === componentInstance.options.first)
+                .toBe(true, 'Expected first option to be active.');
+            expect(optionEls[0].classList).toContain('mc-active');
+            expect(optionEls[1].classList).not.toContain('mc-active');
+
+            componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            fixture.detectChanges();
+
+            expect(componentInstance.trigger.activeOption === componentInstance.options.toArray()[1])
+                .toBe(true, 'Expected second option to be active.');
+            expect(optionEls[0].classList).not.toContain('mc-active');
+            expect(optionEls[1].classList).toContain('mc-active');
+        });
+
+        it('should not set the active item to the last option when UP key is pressed', () => {
+            const componentInstance = fixture.componentInstance;
+            const optionEls: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-option');
+
+            expect(componentInstance.trigger.panelOpen)
+                .toBe(true, 'Expected first up press to open the pane.');
+
+            componentInstance.trigger.handleKeydown(UP_ARROW_EVENT);
+            fixture.detectChanges();
+
+            expect(componentInstance.trigger.activeOption !== componentInstance.options.first)
+                .toBe(true, 'Expected last option to be active.');
+            expect(optionEls[0].classList).not.toContain('mc-active');
+
+            componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            fixture.detectChanges();
+
+            expect(componentInstance.trigger.activeOption === componentInstance.options.first)
+                .toBe(true, 'Expected first option to be active.');
+            expect(optionEls[0].classList).toContain('mc-active');
+        });
+
+        it('should set the active item properly after filtering', fakeAsync(() => {
+            const componentInstance = fixture.componentInstance;
+
+            componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            tick();
+            fixture.detectChanges();
+        }));
+
+        it('should set the active item properly after filtering', () => {
+            const componentInstance = fixture.componentInstance;
+
+            typeInElement('o', input);
+            fixture.detectChanges();
+
+            componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            fixture.detectChanges();
+
+            const optionEls: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-option');
+
+            expect(componentInstance.trigger.activeOption === componentInstance.options.first)
+                .toBe(true, 'Expected first option to be active.');
+            expect(optionEls[0].classList).toContain('mc-active');
+            expect(optionEls[1].classList).not.toContain('mc-active');
+        });
+
+        it('should fill the text field when an option is selected with ENTER', fakeAsync(() => {
+            fixture.componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            flush();
+            fixture.detectChanges();
+
+            fixture.componentInstance.trigger.handleKeydown(ENTER_EVENT);
+            fixture.detectChanges();
+            expect(input.value)
+                .toContain('Alabama', `Expected text field to fill with selected value on ENTER.`);
+        }));
+
+        it('should prevent the default enter key action', fakeAsync(() => {
+            fixture.componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            flush();
+
+            fixture.componentInstance.trigger.handleKeydown(ENTER_EVENT);
+
+            expect(ENTER_EVENT.defaultPrevented)
+                .toBe(true, 'Expected the default action to have been prevented.');
+        }));
+
+        it('should not prevent the default enter action for a closed panel after a user action', () => {
+            fixture.componentInstance.trigger.handleKeydown(UP_ARROW_EVENT);
+            fixture.detectChanges();
+
+            fixture.componentInstance.trigger.closePanel();
+            fixture.detectChanges();
+            fixture.componentInstance.trigger.handleKeydown(ENTER_EVENT);
+
+            expect(ENTER_EVENT.defaultPrevented).toBe(false, 'Default action should not be prevented.');
+        });
+
+        it('should fill the text field, not select an option, when SPACE is entered', () => {
+            typeInElement('New', input);
+            fixture.detectChanges();
+
+            const SPACE_EVENT = createKeyboardEvent('keydown', SPACE);
+            fixture.componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            fixture.detectChanges();
+
+            fixture.componentInstance.trigger.handleKeydown(SPACE_EVENT);
+            fixture.detectChanges();
+
+            expect(input.value).not.toContain('New York', `Expected option not to be selected on SPACE.`);
+        });
+
+        it('should mark the control dirty when selecting an option from the keyboard', fakeAsync(() => {
+            expect(fixture.componentInstance.stateCtrl.dirty)
+                .toBe(false, `Expected control to start out pristine.`);
+
+            fixture.componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            flush();
+            fixture.componentInstance.trigger.handleKeydown(ENTER_EVENT);
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.stateCtrl.dirty)
+                .toBe(true, `Expected control to become dirty when option was selected by ENTER.`);
+        }));
+
+        it('should open the panel again when typing after making a selection', fakeAsync(() => {
+            fixture.componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            flush();
+            fixture.componentInstance.trigger.handleKeydown(ENTER_EVENT);
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(false, `Expected panel state to read closed after ENTER key.`);
+            expect(overlayContainerElement.textContent)
+                .toEqual('', `Expected panel to close after ENTER key.`);
+
+            dispatchFakeEvent(input, 'focusin');
+            typeInElement('Alabama', input);
+            fixture.detectChanges();
+            tick();
+
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(true, `Expected panel state to read open when typing in input.`);
+            expect(overlayContainerElement.textContent)
+                .toContain('Alabama', `Expected panel to display when typing in input.`);
+        }));
+
+        it('should not open the panel if the `input` event was dispatched with changing the value',
+            fakeAsync(() => {
+                const trigger = fixture.componentInstance.trigger;
+
+                dispatchFakeEvent(input, 'focusin');
+                typeInElement('A', input);
+                fixture.detectChanges();
+                tick();
+
+                expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+
+                trigger.closePanel();
+                fixture.detectChanges();
+
+                expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+
+                // Dispatch the event without actually changing the value
+                // to simulate what happen in some cases on IE.
+                dispatchFakeEvent(input, 'input');
+                fixture.detectChanges();
+                tick();
+
+                expect(trigger.panelOpen).toBe(false, 'Expected panel to stay closed.');
+            }));
+
+        it('should scroll to active options below the fold', () => {
+            const trigger = fixture.componentInstance.trigger;
+            const scrollContainer = document.querySelector('.cdk-overlay-pane .mc-autocomplete-panel')!;
+
+            trigger.handleKeydown(DOWN_ARROW_EVENT);
+            fixture.detectChanges();
+            expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to scroll.`);
+
+            // These down arrows will set the 6th option active, below the fold.
+            [1, 2, 3, 4, 5, 6, 7, 8].forEach(() => trigger.handleKeydown(DOWN_ARROW_EVENT));
+
+            // Expect option bottom minus the panel height (288 - 256 = 32)
+            expect(scrollContainer.scrollTop)
+                .toEqual(32, `Expected panel to reveal the sixth option.`);
+        });
+
+        it('should not scroll to active options on UP arrow', () => {
+            const scrollContainer = document.querySelector('.cdk-overlay-pane .mc-autocomplete-panel')!;
+
+            fixture.componentInstance.trigger.handleKeydown(UP_ARROW_EVENT);
+            fixture.detectChanges();
+
+            expect(scrollContainer.scrollTop).toEqual(0, `Expected panel to reveal last option.`);
+        });
+
+        it('should not scroll to active options that are fully in the panel', () => {
+            const trigger = fixture.componentInstance.trigger;
+            const scrollContainer = document.querySelector('.cdk-overlay-pane .mc-autocomplete-panel')!;
+
+            trigger.handleKeydown(DOWN_ARROW_EVENT);
+            fixture.detectChanges();
+
+            expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to scroll.`);
+
+            // These down arrows will set the 6th option active, below the fold.
+            [1, 2, 3, 4, 5, 6, 7, 8].forEach(() => trigger.handleKeydown(DOWN_ARROW_EVENT));
+
+            // Expect option bottom minus the panel height (288 - 256 = 32)
+            expect(scrollContainer.scrollTop)
+                .toEqual(32, `Expected panel to reveal the sixth option.`);
+
+            // These up arrows will set the 2nd option active
+            [4, 3, 2, 1].forEach(() => trigger.handleKeydown(UP_ARROW_EVENT));
+
+            // Expect no scrolling to have occurred. Still showing bottom of 6th option.
+            expect(scrollContainer.scrollTop)
+                .toEqual(32, `Expected panel not to scroll up since sixth option still fully visible.`);
+        });
+
+        it('should scroll to active options that are above the panel', () => {
+            const trigger = fixture.componentInstance.trigger;
+            const scrollContainer = document.querySelector('.cdk-overlay-pane .mc-autocomplete-panel')!;
+
+            trigger.handleKeydown(DOWN_ARROW_EVENT);
+            fixture.detectChanges();
+
+            expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to scroll.`);
+
+            // These down arrows will set the 7th option active, below the fold.
+            [1, 2, 3, 4, 5, 6, 7, 8].forEach(() => trigger.handleKeydown(DOWN_ARROW_EVENT));
+
+            // These up arrows will set the 2nd option active
+            [7, 6, 5, 4, 3, 2, 1].forEach(() => trigger.handleKeydown(UP_ARROW_EVENT));
+
+            // Expect to show the top of the 2nd option at the top of the panel
+            expect(scrollContainer.scrollTop)
+                .toEqual(32, `Expected panel to scroll up when option is above panel.`);
+        });
+
+        it('should close the panel when pressing escape', fakeAsync(() => {
+            const trigger = fixture.componentInstance.trigger;
+
+            input.focus();
+            flush();
+            fixture.detectChanges();
+
+            expect(document.activeElement).toBe(input, 'Expected input to be focused.');
+            expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+
+            dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+            fixture.detectChanges();
+
+            expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
+            expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+        }));
+
+        it('should prevent the default action when pressing escape', fakeAsync(() => {
+            const escapeEvent = dispatchKeyboardEvent(input, 'keydown', ESCAPE);
+            fixture.detectChanges();
+
+            expect(escapeEvent.defaultPrevented).toBe(true);
+        }));
+
+        it('should close the panel when pressing ALT + UP_ARROW', fakeAsync(() => {
+            const trigger = fixture.componentInstance.trigger;
+            const upArrowEvent = createKeyboardEvent('keydown', UP_ARROW);
+            Object.defineProperty(upArrowEvent, 'altKey', { get: () => true });
+
+            input.focus();
+            flush();
+            fixture.detectChanges();
+
+            expect(document.activeElement).toBe(input, 'Expected input to be focused.');
+            expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+
+            dispatchEvent(document.body, upArrowEvent);
+            fixture.detectChanges();
+
+            expect(document.activeElement).toBe(input, 'Expected input to continue to be focused.');
+            expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+        }));
+
+        it('should close the panel when tabbing away from a trigger without results', fakeAsync(() => {
+            fixture.componentInstance.states = [];
+            fixture.componentInstance.filteredStates = [];
+            fixture.detectChanges();
+            input.focus();
+            flush();
+
+            expect(overlayContainerElement.querySelector('.mc-autocomplete-panel'))
+                .toBeTruthy('Expected panel to be rendered.');
+
+            dispatchKeyboardEvent(input, 'keydown', TAB);
+            fixture.detectChanges();
+
+            expect(overlayContainerElement.querySelector('.mc-autocomplete-panel'))
+                .toBeFalsy('Expected panel to be removed.');
+        }));
+
+        it('should reset the active option when closing with the escape key', fakeAsync(() => {
+            const trigger = fixture.componentInstance.trigger;
+
+            trigger.openPanel();
+            fixture.detectChanges();
+            tick();
+
+            expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+            expect(!!trigger.activeOption).toBe(false, 'Expected no active option.');
+
+            // Press the down arrow a few times.
+            [1, 2, 3].forEach(() => {
+                trigger.handleKeydown(DOWN_ARROW_EVENT);
+                tick();
+                fixture.detectChanges();
+            });
+
+            // Note that this casts to a boolean, in order to prevent Jasmine
+            // from crashing when trying to stringify the option if the test fails.
+            expect(!!trigger.activeOption).toBe(true, 'Expected to find an active option.');
+
+            dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+            tick();
+
+            expect(!!trigger.activeOption).toBe(false, 'Expected no active options.');
+        }));
+
+        it('should reset the active option when closing by selecting with enter', fakeAsync(() => {
+            const trigger = fixture.componentInstance.trigger;
+
+            trigger.openPanel();
+            fixture.detectChanges();
+            tick();
+
+            expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+            expect(!!trigger.activeOption).toBe(false, 'Expected no active option.');
+
+            // Press the down arrow a few times.
+            [1, 2, 3].forEach(() => {
+                trigger.handleKeydown(DOWN_ARROW_EVENT);
+                tick();
+                fixture.detectChanges();
+            });
+
+            // Note that this casts to a boolean, in order to prevent Jasmine
+            // from crashing when trying to stringify the option if the test fails.
+            expect(!!trigger.activeOption).toBe(true, 'Expected to find an active option.');
+
+            trigger.handleKeydown(ENTER_EVENT);
+            tick();
+
+            expect(!!trigger.activeOption).toBe(false, 'Expected no active options.');
+        }));
+
+    });
+
+    xdescribe('option groups', () => {
+        let fixture: ComponentFixture<AutocompleteWithGroups>;
+        let DOWN_ARROW_EVENT: KeyboardEvent;
+        let UP_ARROW_EVENT: KeyboardEvent;
+        let container: HTMLElement;
+
+        beforeEach(fakeAsync(() => {
+            fixture = createComponent(AutocompleteWithGroups);
+            fixture.detectChanges();
+
+            DOWN_ARROW_EVENT = createKeyboardEvent('keydown', DOWN_ARROW);
+            UP_ARROW_EVENT = createKeyboardEvent('keydown', UP_ARROW);
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            tick();
+            fixture.detectChanges();
+            container = document.querySelector('.mc-autocomplete-panel') as HTMLElement;
+        }));
+
+        it('should scroll to active options below the fold', fakeAsync(() => {
+            fixture.componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            tick();
+            fixture.detectChanges();
+            expect(container.scrollTop).toBe(0, 'Expected the panel not to scroll.');
+
+            // Press the down arrow five times.
+            [1, 2, 3, 4, 5].forEach(() => {
+                fixture.componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+                tick();
+            });
+
+            // <option bottom> - <panel height> + <2x group labels> = 128
+            // 288 - 256 + 96 = 128
+            expect(container.scrollTop)
+                .toBe(128, 'Expected panel to reveal the sixth option.');
+        }));
+
+        it('should scroll to active options on UP arrow', fakeAsync(() => {
+            fixture.componentInstance.trigger.handleKeydown(UP_ARROW_EVENT);
+            tick();
+            fixture.detectChanges();
+
+            // <option bottom> - <panel height> + <3x group label> = 464
+            // 576 - 256 + 144 = 464
+            expect(container.scrollTop).toBe(464, 'Expected panel to reveal last option.');
+        }));
+
+        it('should scroll to active options that are above the panel', fakeAsync(() => {
+            fixture.componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            tick();
+            fixture.detectChanges();
+            expect(container.scrollTop).toBe(0, 'Expected panel not to scroll.');
+
+            // These down arrows will set the 7th option active, below the fold.
+            [1, 2, 3, 4, 5, 6].forEach(() => {
+                fixture.componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+                tick();
+            });
+
+            // These up arrows will set the 2nd option active
+            [5, 4, 3, 2, 1].forEach(() => {
+                fixture.componentInstance.trigger.handleKeydown(UP_ARROW_EVENT);
+                tick();
+            });
+
+            // Expect to show the top of the 2nd option at the top of the panel.
+            // It is offset by 48, because there's a group label above it.
+            expect(container.scrollTop)
+                .toBe(96, 'Expected panel to scroll up when option is above panel.');
+        }));
+    });
+
+    xdescribe('aria', () => {
+        let fixture: ComponentFixture<SimpleAutocomplete>;
+        let input: HTMLInputElement;
+
+        beforeEach(() => {
+            fixture = createComponent(SimpleAutocomplete);
+            fixture.detectChanges();
+
+            input = fixture.debugElement.query(By.css('input')).nativeElement;
+        });
+
+        it('should set role of input to combobox', () => {
+            expect(input.getAttribute('role'))
+                .toEqual('combobox', 'Expected role of input to be combobox.');
+        });
+
+        it('should set role of autocomplete panel to listbox', () => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            const panel = fixture.debugElement.query(By.css('.mc-autocomplete-panel')).nativeElement;
+
+            expect(panel.getAttribute('role'))
+                .toEqual('listbox', 'Expected role of the panel to be listbox.');
+        });
+
+        it('should set aria-autocomplete to list', () => {
+            expect(input.getAttribute('aria-autocomplete'))
+                .toEqual('list', 'Expected aria-autocomplete attribute to equal list.');
+        });
+
+        it('should set aria-activedescendant based on the active option', fakeAsync(() => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            expect(input.hasAttribute('aria-activedescendant'))
+                .toBe(false, 'Expected aria-activedescendant to be absent if no active item.');
+
+            const DOWN_ARROW_EVENT = createKeyboardEvent('keydown', DOWN_ARROW);
+
+            fixture.componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            tick();
+            fixture.detectChanges();
+
+            expect(input.getAttribute('aria-activedescendant'))
+                .toEqual(fixture.componentInstance.options.first.id,
+                    'Expected aria-activedescendant to match the active item after 1 down arrow.');
+
+            fixture.componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            tick();
+            fixture.detectChanges();
+
+            expect(input.getAttribute('aria-activedescendant'))
+                .toEqual(fixture.componentInstance.options.toArray()[1].id,
+                    'Expected aria-activedescendant to match the active item after 2 down arrows.');
+        }));
+
+        it('should set aria-expanded based on whether the panel is open', () => {
+            expect(input.getAttribute('aria-expanded'))
+                .toBe('false', 'Expected aria-expanded to be false while panel is closed.');
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            expect(input.getAttribute('aria-expanded'))
+                .toBe('true', 'Expected aria-expanded to be true while panel is open.');
+
+            fixture.componentInstance.trigger.closePanel();
+            fixture.detectChanges();
+
+            expect(input.getAttribute('aria-expanded'))
+                .toBe('false', 'Expected aria-expanded to be false when panel closes again.');
+        });
+
+        it('should set aria-expanded properly when the panel is hidden', fakeAsync(() => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            expect(input.getAttribute('aria-expanded'))
+                .toBe('true', 'Expected aria-expanded to be true while panel is open.');
+
+            typeInElement('zz', input);
+            fixture.detectChanges();
+            tick();
+            fixture.detectChanges();
+
+            expect(input.getAttribute('aria-expanded'))
+                .toBe('false', 'Expected aria-expanded to be false when panel hides itself.');
+        }));
+
+        it('should set aria-owns based on the attached autocomplete', () => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            const panel = fixture.debugElement.query(By.css('.mc-autocomplete-panel')).nativeElement;
+
+            expect(input.getAttribute('aria-owns'))
+                .toBe(panel.getAttribute('id'), 'Expected aria-owns to match attached autocomplete.');
+        });
+
+        it('should not set aria-owns while the autocomplete is closed', () => {
+            expect(input.getAttribute('aria-owns')).toBeFalsy();
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            expect(input.getAttribute('aria-owns')).toBeTruthy();
+        });
+
+        it('should restore focus to the input when clicking to select a value', fakeAsync(() => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+
+            const option = overlayContainerElement.querySelector('mc-option') as HTMLElement;
+
+            // Focus the option manually since the synthetic click may not do it.
+            option.focus();
+            option.click();
+            fixture.detectChanges();
+
+            expect(document.activeElement).toBe(input, 'Expected focus to be restored to the input.');
+        }));
+
+        it('should remove autocomplete-specific aria attributes when autocomplete is disabled', () => {
+            fixture.componentInstance.autocompleteDisabled = true;
+            fixture.detectChanges();
+
+            expect(input.getAttribute('role')).toBeFalsy();
+            expect(input.getAttribute('aria-autocomplete')).toBeFalsy();
+            expect(input.getAttribute('aria-expanded')).toBeFalsy();
+            expect(input.getAttribute('aria-owns')).toBeFalsy();
+        });
+
+    });
+
+    xdescribe('Fallback positions', () => {
+        it('should use below positioning by default', fakeAsync(() => {
+            const fixture = createComponent(SimpleAutocomplete);
+            fixture.detectChanges();
+            const inputReference = fixture.debugElement.query(By.css('.mc-form-field-flex')).nativeElement;
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+            fixture.detectChanges();
+
+            const inputBottom = inputReference.getBoundingClientRect().bottom;
+            const panel = overlayContainerElement.querySelector('.mc-autocomplete-panel')!;
+            const panelTop = panel.getBoundingClientRect().top;
+
+            expect(Math.floor(inputBottom))
+                .toEqual(Math.floor(panelTop), `Expected panel top to match input bottom by default.`);
+            expect(panel.classList).not.toContain('mc-autocomplete-panel-above');
+        }));
+
+        it('should reposition the panel on scroll', () => {
+            const scrolledSubject = new Subject();
+            const spacer = document.createElement('div');
+            const fixture = createComponent(SimpleAutocomplete, [{
+                provide: ScrollDispatcher,
+                useValue: { scrolled: () => scrolledSubject.asObservable() }
+            }]);
+
+            fixture.detectChanges();
+
+            const inputReference = fixture.debugElement.query(By.css('.mc-form-field-flex')).nativeElement;
+            spacer.style.height = '1000px';
+            document.body.appendChild(spacer);
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            window.scroll(0, 100);
+            scrolledSubject.next();
+            fixture.detectChanges();
+
+            const inputBottom = inputReference.getBoundingClientRect().bottom;
+            const panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+            const panelTop = panel.getBoundingClientRect().top;
+
+            expect(Math.floor(inputBottom)).toEqual(Math.floor(panelTop),
+                'Expected panel top to match input bottom after scrolling.');
+
+            document.body.removeChild(spacer);
+            window.scroll(0, 0);
+        });
+
+        it('should fall back to above position if panel cannot fit below', fakeAsync(() => {
+            const fixture = createComponent(SimpleAutocomplete);
+            fixture.detectChanges();
+            const inputReference = fixture.debugElement.query(By.css('.mc-form-field-flex')).nativeElement;
+
+            // Push the autocomplete trigger down so it won't have room to open "below"
+            inputReference.style.bottom = '0';
+            inputReference.style.position = 'fixed';
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+            fixture.detectChanges();
+
+            const inputTop = inputReference.getBoundingClientRect().top;
+            const panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+            const panelBottom = panel.getBoundingClientRect().bottom;
+
+            expect(Math.floor(inputTop))
+                .toEqual(Math.floor(panelBottom), `Expected panel to fall back to above position.`);
+
+            expect(panel.classList).toContain('mc-autocomplete-panel-above');
+        }));
+
+        it('should allow the panel to expand when the number of results increases', fakeAsync(() => {
+            const fixture = createComponent(SimpleAutocomplete);
+            fixture.detectChanges();
+
+            const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+            const inputReference = fixture.debugElement.query(By.css('.mc-form-field-flex')).nativeElement;
+
+            // Push the element down so it has a little bit of space, but not enough to render.
+            inputReference.style.bottom = '10px';
+            inputReference.style.position = 'fixed';
+
+            // Type enough to only show one option.
+            typeInElement('California', inputEl);
+            fixture.detectChanges();
+            tick();
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+
+            let panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+            const initialPanelHeight = panel.getBoundingClientRect().height;
+
+            fixture.componentInstance.trigger.closePanel();
+            fixture.detectChanges();
+
+            // Change the text so we get more than one result.
+            typeInElement('C', inputEl);
+            fixture.detectChanges();
+            tick();
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+
+            panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+
+            expect(panel.getBoundingClientRect().height).toBeGreaterThan(initialPanelHeight);
+        }));
+
+        it('should align panel properly when filtering in "above" position', fakeAsync(() => {
+            const fixture = createComponent(SimpleAutocomplete);
+            fixture.detectChanges();
+
+            const input = fixture.debugElement.query(By.css('input')).nativeElement;
+            const inputReference = fixture.debugElement.query(By.css('.mc-form-field-flex')).nativeElement;
+
+            // Push the autocomplete trigger down so it won't have room to open "below"
+            inputReference.style.bottom = '0';
+            inputReference.style.position = 'fixed';
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+
+            typeInElement('f', input);
+            fixture.detectChanges();
+            tick();
+
+            const inputTop = inputReference.getBoundingClientRect().top;
+            const panel = overlayContainerElement.querySelector('.mc-autocomplete-panel')!;
+            const panelBottom = panel.getBoundingClientRect().bottom;
+
+            expect(Math.floor(inputTop))
+                .toEqual(Math.floor(panelBottom), `Expected panel to stay aligned after filtering.`);
+        }));
+
+        it('should fall back to above position when requested if options are added while ' +
+            'the panel is open', fakeAsync(() => {
+            const fixture = createComponent(SimpleAutocomplete);
+            fixture.componentInstance.states = fixture.componentInstance.states.slice(0, 1);
+            fixture.componentInstance.filteredStates = fixture.componentInstance.states.slice();
+            fixture.detectChanges();
+
+            const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+            const inputReference = fixture.debugElement.query(By.css('.mc-form-field-flex')).nativeElement;
+
+            // Push the element down so it has a little bit of space, but not enough to render.
+            inputReference.style.bottom = '75px';
+            inputReference.style.position = 'fixed';
+
+            dispatchFakeEvent(inputEl, 'focusin');
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+            fixture.detectChanges();
+
+            const panel = overlayContainerElement.querySelector('.mc-autocomplete-panel')!;
+            let inputRect = inputReference.getBoundingClientRect();
+            let panelRect = panel.getBoundingClientRect();
+
+            expect(Math.floor(panelRect.top))
+                .toBe(Math.floor(inputRect.bottom),
+                    `Expected panel top to be below input before repositioning.`);
+
+            for (let i = 0; i < 20; i++) {
+                fixture.componentInstance.filteredStates.push({ code: 'FK', name: 'Fake State' });
+                fixture.detectChanges();
+            }
+
+            // Request a position update now that there are too many suggestions to fit in the viewport.
+            fixture.componentInstance.trigger.updatePosition();
+
+            inputRect = inputReference.getBoundingClientRect();
+            panelRect = panel.getBoundingClientRect();
+
+            expect(Math.floor(panelRect.bottom))
+                .toBe(Math.floor(inputRect.top),
+                    `Expected panel to fall back to above position after repositioning.`);
+            tick();
+        }));
+
+        it('should not throw if a panel reposition is requested while the panel is closed', () => {
+            const fixture = createComponent(SimpleAutocomplete);
+            fixture.detectChanges();
+
+            expect(() => fixture.componentInstance.trigger.updatePosition()).not.toThrow();
+        });
+    });
+
+    describe('Option selection', () => {
+        let fixture: ComponentFixture<SimpleAutocomplete>;
+
+        beforeEach(() => {
+            fixture = createComponent(SimpleAutocomplete);
+            fixture.detectChanges();
+        });
+
+        it('should deselect any other selected option', fakeAsync(() => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            let options: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-option');
+            options[0].click();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+            fixture.detectChanges();
+
+            const componentOptions = fixture.componentInstance.options.toArray();
+            expect(componentOptions[0].selected)
+                .toBe(true, `Clicked option should be selected.`);
+
+            options = overlayContainerElement.querySelectorAll('mc-option');
+            options[1].click();
+            fixture.detectChanges();
+
+            expect(componentOptions[0].selected)
+                .toBe(false, `Previous option should not be selected.`);
+            expect(componentOptions[1].selected)
+                .toBe(true, `New Clicked option should be selected.`);
+        }));
+
+        it('should call deselect only on the previous selected option', fakeAsync(() => {
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            let options: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-option');
+            options[0].click();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+            fixture.detectChanges();
+
+            const componentOptions = fixture.componentInstance.options.toArray();
+            componentOptions.forEach((option) => spyOn(option, 'deselect'));
+
+            expect(componentOptions[0].selected)
+                .toBe(true, `Clicked option should be selected.`);
+
+            options = overlayContainerElement.querySelectorAll('mc-option');
+            options[1].click();
+            fixture.detectChanges();
+
+            expect(componentOptions[0].deselect).toHaveBeenCalled();
+            componentOptions.slice(1).forEach((option) => expect(option.deselect).not.toHaveBeenCalled());
+        }));
+
+        it('should be able to preselect the first option', fakeAsync(() => {
+            fixture.componentInstance.trigger.autocomplete.autoActiveFirstOption = true;
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+            fixture.detectChanges();
+
+            expect(overlayContainerElement.querySelectorAll('mc-option')[0].classList)
+                .toContain('mc-active', 'Expected first option to be highlighted.');
+        }));
+
+        it('should be able to configure preselecting the first option globally', fakeAsync(() => {
+            overlayContainer.ngOnDestroy();
+            fixture.destroy();
+            TestBed.resetTestingModule();
+            fixture = createComponent(SimpleAutocomplete, [
+                { provide: MC_AUTOCOMPLETE_DEFAULT_OPTIONS, useValue: { autoActiveFirstOption: true } }
+            ]);
+
+            fixture.detectChanges();
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+            fixture.detectChanges();
+
+            expect(overlayContainerElement.querySelectorAll('mc-option')[0].classList)
+                .toContain('mc-active', 'Expected first option to be highlighted.');
+        }));
+
+        it('should handle `optionSelections` being accessed too early', fakeAsync(() => {
+            overlayContainer.ngOnDestroy();
+            fixture.destroy();
+            fixture = TestBed.createComponent(SimpleAutocomplete);
+
+            const spy = jasmine.createSpy('option selection spy');
+            let subscription: Subscription;
+
+            expect(fixture.componentInstance.trigger.autocomplete).toBeFalsy();
+            expect(() => {
+                subscription = fixture.componentInstance.trigger.optionSelections.subscribe(spy);
+            }).not.toThrow();
+
+            fixture.detectChanges();
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+
+            const option = overlayContainerElement.querySelector('mc-option') as HTMLElement;
+
+            option.click();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+
+            expect(spy).toHaveBeenCalledWith(jasmine.any(McOptionSelectionChange));
+            subscription!.unsubscribe();
+        }));
+
+        xit('should reposition the panel when the amount of options changes', fakeAsync(() => {
+            const formField = fixture.debugElement.query(By.css('.mc-form-field')).nativeElement;
+            const inputReference = formField.querySelector('.mc-form-field-flex');
+            const input = inputReference.querySelector('input');
+
+            formField.style.bottom = '100px';
+            formField.style.position = 'fixed';
+
+            typeInElement('Cali', input);
+            fixture.detectChanges();
+            tick();
+            zone.simulateZoneExit();
+            fixture.detectChanges();
+
+            const inputBottom = inputReference.getBoundingClientRect().bottom;
+            const panel = overlayContainerElement.querySelector('.mc-autocomplete-panel')!;
+            const panelTop = panel.getBoundingClientRect().top;
+
+            expect(Math.floor(inputBottom)).toBe(Math.floor(panelTop),
+                `Expected panel top to match input bottom when there is only one option.`);
+
+            typeInElement('', input);
+            fixture.detectChanges();
+            tick();
+            fixture.detectChanges();
+
+            const inputTop = inputReference.getBoundingClientRect().top;
+            const panelBottom = panel.getBoundingClientRect().bottom;
+
+            expect(Math.floor(inputTop)).toBe(Math.floor(panelBottom),
+                `Expected panel switch to the above position if the options no longer fit.`);
+        }));
+
+    });
+
+    describe('panel closing', () => {
+        let fixture: ComponentFixture<SimpleAutocomplete>;
+        let input: HTMLInputElement;
+        let trigger: McAutocompleteTrigger;
+        let closingActionSpy: jasmine.Spy;
+        let closingActionsSub: Subscription;
+
+        beforeEach(fakeAsync(() => {
+            fixture = createComponent(SimpleAutocomplete);
+            fixture.detectChanges();
+
+            input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+            flush();
+
+            trigger = fixture.componentInstance.trigger;
+            closingActionSpy = jasmine.createSpy('closing action listener');
+            closingActionsSub = trigger.panelClosingActions.subscribe(closingActionSpy);
+        }));
+
+        afterEach(() => {
+            closingActionsSub.unsubscribe();
+        });
+
+        it('should emit panel close event when clicking away', () => {
+            expect(closingActionSpy).not.toHaveBeenCalled();
+            dispatchFakeEvent(document, 'click');
+            expect(closingActionSpy).toHaveBeenCalledWith(null);
+        });
+
+        it('should emit panel close event when tabbing out', () => {
+            const tabEvent = createKeyboardEvent('keydown', TAB);
+            input.focus();
+
+            expect(closingActionSpy).not.toHaveBeenCalled();
+            trigger.handleKeydown(tabEvent);
+            expect(closingActionSpy).toHaveBeenCalledWith(null);
+        });
+
+        it('should not emit when tabbing away from a closed panel', () => {
+            const tabEvent = createKeyboardEvent('keydown', TAB);
+
+            input.focus();
+            zone.simulateZoneExit();
+
+            trigger.handleKeydown(tabEvent);
+
+            // Ensure that it emitted once while the panel was open.
+            expect(closingActionSpy).toHaveBeenCalledTimes(1);
+
+            trigger.handleKeydown(tabEvent);
+
+            // Ensure that it didn't emit again when tabbing out again.
+            expect(closingActionSpy).toHaveBeenCalledTimes(1);
+        });
+
+        it('should emit panel close event when selecting an option', () => {
+            const option = overlayContainerElement.querySelector('mc-option') as HTMLElement;
+
+            expect(closingActionSpy).not.toHaveBeenCalled();
+            option.click();
+            expect(closingActionSpy).toHaveBeenCalledWith(jasmine.any(McOptionSelectionChange));
+        });
+
+        it('should close the panel when pressing escape', () => {
+            expect(closingActionSpy).not.toHaveBeenCalled();
+            dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+            expect(closingActionSpy).toHaveBeenCalledWith(null);
+        });
+    });
+
+    describe('without mcInput', () => {
+        let fixture: ComponentFixture<AutocompleteWithNativeInput>;
+
+        beforeEach(() => {
+            fixture = createComponent(AutocompleteWithNativeInput);
+            fixture.detectChanges();
+        });
+
+        it('should not throw when clicking outside', fakeAsync(() => {
+            dispatchFakeEvent(fixture.debugElement.query(By.css('input')).nativeElement, 'focus');
+            fixture.detectChanges();
+            flush();
+
+            expect(() => dispatchFakeEvent(document, 'click')).not.toThrow();
+        }));
+    });
+
+    describe('misc', () => {
+
+        it('should allow basic use without any forms directives', () => {
+            expect(() => {
+                const fixture = createComponent(AutocompleteWithoutForms);
+                fixture.detectChanges();
+
+                const input = fixture.debugElement.query(By.css('input')).nativeElement;
+                typeInElement('d', input);
+                fixture.detectChanges();
+
+                const options: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-option');
+                expect(options.length).toBe(1);
+            }).not.toThrowError();
+        });
+
+        it('should display an empty input when the value is undefined with ngModel', () => {
+            const fixture = createComponent(AutocompleteWithNgModel);
+            fixture.detectChanges();
+
+            expect(fixture.debugElement.query(By.css('input')).nativeElement.value).toBe('');
+        });
+
+        it('should display the number when the selected option is the number zero', fakeAsync(() => {
+            const fixture = createComponent(AutocompleteWithNumbers);
+
+            fixture.componentInstance.selectedNumber = 0;
+            fixture.detectChanges();
+            tick();
+
+            expect(fixture.debugElement.query(By.css('input')).nativeElement.value).toBe('0');
+        }));
+
+        it('should work when input is wrapped in ngIf', () => {
+            const fixture = createComponent(NgIfAutocomplete);
+            fixture.detectChanges();
+
+            dispatchFakeEvent(fixture.debugElement.query(By.css('input')).nativeElement, 'focusin');
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.trigger.panelOpen)
+                .toBe(true, `Expected panel state to read open when input is focused.`);
+            expect(overlayContainerElement.textContent)
+                .toContain('One', `Expected panel to display when input is focused.`);
+            expect(overlayContainerElement.textContent)
+                .toContain('Two', `Expected panel to display when input is focused.`);
+        });
+
+        it('should filter properly with ngIf after setting the active item', () => {
+            const fixture = createComponent(NgIfAutocomplete);
+            fixture.detectChanges();
+
+            fixture.componentInstance.trigger.openPanel();
+            fixture.detectChanges();
+
+            const DOWN_ARROW_EVENT = createKeyboardEvent('keydown', DOWN_ARROW);
+            fixture.componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
+            fixture.detectChanges();
+
+            const input = fixture.debugElement.query(By.css('input')).nativeElement;
+            typeInElement('o', input);
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.mcOptions.length).toBe(2);
+        });
+
+        it('should throw if the user attempts to open the panel too early', () => {
+            const fixture = createComponent(AutocompleteWithoutPanel);
+            fixture.detectChanges();
+
+            expect(() => {
+                fixture.componentInstance.trigger.openPanel();
+            }).toThrow(getMcAutocompleteMissingPanelError());
+        });
+
+        it('should not throw on init, even if the panel is not defined', fakeAsync(() => {
+            expect(() => {
+                const fixture = createComponent(AutocompleteWithoutPanel);
+                fixture.componentInstance.control.setValue('Something');
+                fixture.detectChanges();
+                tick();
+            }).not.toThrow();
+        }));
+
+        xit('should hide the label with a preselected form control value ' +
+            'and a disabled floating label', fakeAsync(() => {
+            const fixture = createComponent(AutocompleteWithFormsAndNonfloatingLabel);
+
+            fixture.detectChanges();
+            tick();
+            fixture.detectChanges();
+
+            const input = fixture.nativeElement.querySelector('input');
+            const label = fixture.nativeElement.querySelector('.mc-form-field-label');
+
+            expect(input.value).toBe('California');
+            expect(label.classList).not.toContain('mc-form-field-empty');
+        }));
+
+        it('should transfer the mc-autocomplete classes to the panel element', fakeAsync(() => {
+            const fixture = createComponent(SimpleAutocomplete);
+            fixture.detectChanges();
+
+            fixture.componentInstance.trigger.openPanel();
+            tick();
+            fixture.detectChanges();
+
+            const autocomplete = fixture.debugElement.nativeElement.querySelector('mc-autocomplete');
+            const panel = overlayContainerElement.querySelector('.mc-autocomplete-panel')!;
+
+            expect(autocomplete.classList).not.toContain('class-one');
+            expect(autocomplete.classList).not.toContain('class-two');
+
+            expect(panel.classList).toContain('class-one');
+            expect(panel.classList).toContain('class-two');
+        }));
+
+        it('should reset correctly when closed programmatically', fakeAsync(() => {
+            const scrolledSubject = new Subject();
+            const fixture = createComponent(SimpleAutocomplete, [
+                {
+                    provide: ScrollDispatcher,
+                    useValue: { scrolled: () => scrolledSubject.asObservable() }
+                },
+                {
+                    provide: MC_AUTOCOMPLETE_SCROLL_STRATEGY,
+                    useFactory: (overlay: Overlay) => () => overlay.scrollStrategies.close(),
+                    deps: [Overlay]
+                }
+            ]);
+
+            fixture.detectChanges();
+            const trigger = fixture.componentInstance.trigger;
+
+            trigger.openPanel();
+            fixture.detectChanges();
+            zone.simulateZoneExit();
+
+            expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+
+            scrolledSubject.next();
+            fixture.detectChanges();
+
+            expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+        }));
+
+        it('should handle autocomplete being attached to number inputs', fakeAsync(() => {
+            const fixture = createComponent(AutocompleteWithNumberInputAndNgModel);
+            fixture.detectChanges();
+            const input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+            typeInElement('1337', input);
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.selectedValue).toBe(1337);
+        }));
+
+    });
+
+    it('should have correct width when opened', () => {
+        const widthFixture = createComponent(SimpleAutocomplete);
+        widthFixture.componentInstance.width = 300;
+        widthFixture.detectChanges();
+
+        widthFixture.componentInstance.trigger.openPanel();
+        widthFixture.detectChanges();
+
+        const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+        // Firefox, edge return a decimal value for width, so we need to parse and round it to verify
+        expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(298);
+
+        widthFixture.componentInstance.trigger.closePanel();
+        widthFixture.detectChanges();
+
+        widthFixture.componentInstance.width = 500;
+        widthFixture.detectChanges();
+
+        widthFixture.componentInstance.trigger.openPanel();
+        widthFixture.detectChanges();
+
+        // Firefox, edge return a decimal value for width, so we need to parse and round it to verify
+        expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(498);
+    });
+
+    it('should update the width while the panel is open', () => {
+        const widthFixture = createComponent(SimpleAutocomplete);
+
+        widthFixture.componentInstance.width = 300;
+        widthFixture.detectChanges();
+
+        widthFixture.componentInstance.trigger.openPanel();
+        widthFixture.detectChanges();
+
+        const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+        const input = widthFixture.debugElement.query(By.css('input')).nativeElement;
+
+        expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(298);
+
+        widthFixture.componentInstance.width = 500;
+        widthFixture.detectChanges();
+
+        input.focus();
+        dispatchFakeEvent(input, 'input');
+        widthFixture.detectChanges();
+
+        expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(498);
+    });
+
+    it('should not reopen a closed autocomplete when returning to a blurred tab', () => {
+        const fixture = createComponent(SimpleAutocomplete);
+        fixture.detectChanges();
+
+        const trigger = fixture.componentInstance.trigger;
+        const input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+        input.focus();
+        fixture.detectChanges();
+
+        expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+
+        trigger.closePanel();
+        fixture.detectChanges();
+
+        expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+
+        // Simulate the user going to a different tab.
+        dispatchFakeEvent(window, 'blur');
+        input.blur();
+        fixture.detectChanges();
+
+        // Simulate the user coming back.
+        dispatchFakeEvent(window, 'focus');
+        input.focus();
+        fixture.detectChanges();
+
+        expect(trigger.panelOpen).toBe(false, 'Expected panel to remain closed.');
+    });
+
+    it('should update the panel width if the window is resized', fakeAsync(() => {
+        const widthFixture = createComponent(SimpleAutocomplete);
+
+        widthFixture.componentInstance.width = 300;
+        widthFixture.detectChanges();
+
+        widthFixture.componentInstance.trigger.openPanel();
+        widthFixture.detectChanges();
+
+        const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+        expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(298);
+
+        widthFixture.componentInstance.width = 400;
+        widthFixture.detectChanges();
+
+        dispatchFakeEvent(window, 'resize');
+        tick(20);
+
+        expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(398);
+    }));
+
+    it('should have panel width match host width by default', () => {
+        const widthFixture = createComponent(SimpleAutocomplete);
+
+        widthFixture.componentInstance.width = 300;
+        widthFixture.detectChanges();
+
+        widthFixture.componentInstance.trigger.openPanel();
+        widthFixture.detectChanges();
+
+        const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+        expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(298);
+    });
+
+    it('should have panel width set to string value', () => {
+        const widthFixture = createComponent(SimpleAutocomplete);
+
+        widthFixture.componentInstance.width = 300;
+        widthFixture.detectChanges();
+
+        widthFixture.componentInstance.trigger.autocomplete.panelWidth = 'auto';
+        widthFixture.componentInstance.trigger.openPanel();
+        widthFixture.detectChanges();
+
+        const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+        expect(overlayPane.style.width).toBe('auto');
+    });
+
+    it('should have panel width set to number value', () => {
+        const widthFixture = createComponent(SimpleAutocomplete);
+
+        widthFixture.componentInstance.width = 300;
+        widthFixture.detectChanges();
+
+        widthFixture.componentInstance.trigger.autocomplete.panelWidth = 400;
+        widthFixture.componentInstance.trigger.openPanel();
+        widthFixture.detectChanges();
+
+        const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+        expect(Math.ceil(parseFloat(overlayPane.style.width as string))).toBe(400);
+    });
+
+    it('should show the panel when the options are initialized later within a component with ' +
+        'OnPush change detection', fakeAsync(() => {
+        const fixture = createComponent(AutocompleteWithOnPushDelay);
+
+        fixture.detectChanges();
+        dispatchFakeEvent(fixture.debugElement.query(By.css('input')).nativeElement, 'focusin');
+        tick(1000);
+
+        fixture.detectChanges();
+        tick();
+
+        Promise.resolve().then(() => {
+            const panel = overlayContainerElement.querySelector('.mc-autocomplete-panel') as HTMLElement;
+            const visibleClass = 'mc-autocomplete_visible';
+
+            fixture.detectChanges();
+            expect(panel.classList).toContain(visibleClass, `Expected panel to be visible.`);
+        });
+    }));
+
+    it('should emit an event when an option is selected', fakeAsync(() => {
+        const fixture = createComponent(AutocompleteWithSelectEvent);
+
+        fixture.detectChanges();
+        fixture.componentInstance.trigger.openPanel();
+        zone.simulateZoneExit();
+        fixture.detectChanges();
+
+        const options: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-option');
+        const spy = fixture.componentInstance.optionSelected;
+
+        options[1].click();
+        tick();
+        fixture.detectChanges();
+
+        expect(spy).toHaveBeenCalledTimes(1);
+
+        const event = spy.calls.mostRecent().args[0] as McAutocompleteSelectedEvent;
+
+        expect(event.source).toBe(fixture.componentInstance.autocomplete);
+        expect(event.option.value).toBe('Washington');
+    }));
+
+    it('should emit an event when a newly-added option is selected', fakeAsync(() => {
+        const fixture = createComponent(AutocompleteWithSelectEvent);
+
+        fixture.detectChanges();
+        fixture.componentInstance.trigger.openPanel();
+        tick();
+        fixture.detectChanges();
+
+        fixture.componentInstance.states.push('Puerto Rico');
+        fixture.detectChanges();
+        tick();
+        fixture.detectChanges();
+
+        const options: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-option');
+        const spy = fixture.componentInstance.optionSelected;
+
+        options[3].click();
+        tick();
+        fixture.detectChanges();
+
+        expect(spy).toHaveBeenCalledTimes(1);
+
+        const event = spy.calls.mostRecent().args[0] as McAutocompleteSelectedEvent;
+
+        expect(event.source).toBe(fixture.componentInstance.autocomplete);
+        expect(event.option.value).toBe('Puerto Rico');
+    }));
+
+    xit('should be able to set a custom panel connection element', () => {
+        const fixture = createComponent(AutocompleteWithDifferentOrigin);
+
+        fixture.detectChanges();
+        fixture.componentInstance.connectedTo = fixture.componentInstance.alternateOrigin;
+        fixture.detectChanges();
+        fixture.componentInstance.trigger.openPanel();
+        fixture.detectChanges();
+        zone.simulateZoneExit();
+
+        const overlayRect = overlayContainerElement.querySelector('.cdk-overlay-pane')!.getBoundingClientRect();
+        const originRect = fixture.nativeElement.querySelector('.origin').getBoundingClientRect();
+
+        expect(Math.floor(overlayRect.top)).toBe(Math.floor(originRect.bottom),
+            'Expected autocomplete panel to align with the bottom of the new origin.');
+    });
+
+    xit('should be able to change the origin after the panel has been opened', () => {
+        const fixture = createComponent(AutocompleteWithDifferentOrigin);
+
+        fixture.detectChanges();
+        fixture.componentInstance.trigger.openPanel();
+        fixture.detectChanges();
+        zone.simulateZoneExit();
+
+        fixture.componentInstance.trigger.closePanel();
+        fixture.detectChanges();
+
+        fixture.componentInstance.connectedTo = fixture.componentInstance.alternateOrigin;
+        fixture.detectChanges();
+
+        fixture.componentInstance.trigger.openPanel();
+        fixture.detectChanges();
+        zone.simulateZoneExit();
+
+        const overlayRect =
+            overlayContainerElement.querySelector('.cdk-overlay-pane')!.getBoundingClientRect();
+        const originRect = fixture.nativeElement.querySelector('.origin').getBoundingClientRect();
+
+        expect(Math.floor(overlayRect.top)).toBe(Math.floor(originRect.bottom),
+            'Expected autocomplete panel to align with the bottom of the new origin.');
+    });
+
+    it('should be able to re-type the same value when it is reset while open', fakeAsync(() => {
+        const fixture = createComponent(SimpleAutocomplete);
+        fixture.detectChanges();
+        const input = fixture.debugElement.query(By.css('input')).nativeElement;
+        const formControl = fixture.componentInstance.stateCtrl;
+
+        typeInElement('Cal', input);
+        fixture.detectChanges();
+        tick();
+        fixture.detectChanges();
+
+        expect(formControl.value).toBe('Cal', 'Expected initial value to be propagated to model');
+
+        formControl.setValue('');
+        fixture.detectChanges();
+
+        expect(input.value).toBe('', 'Expected input value to reset when model is reset');
+
+        typeInElement('Cal', input);
+        fixture.detectChanges();
+        tick();
+        fixture.detectChanges();
+
+        expect(formControl.value).toBe('Cal', 'Expected new value to be propagated to model');
+    }));
+
+});
+
+@Component({
+    template: `
+        <mc-form-field [style.width.px]="width">
+            <input
+                mcInput
+                placeholder="State"
+                [mcAutocomplete]="auto"
+                [mcAutocompleteDisabled]="autocompleteDisabled"
+                [formControl]="stateCtrl">
+        </mc-form-field>
+
+        <mc-autocomplete class="class-one class-two" #auto="mcAutocomplete" [displayWith]="displayFn"
+                          (opened)="openedSpy()" (closed)="closedSpy()">
+            <mc-option *ngFor="let state of filteredStates" [value]="state">
+                <span>{{ state.code }}: {{ state.name }}</span>
+            </mc-option>
+        </mc-autocomplete>
+    `
+})
+class SimpleAutocomplete implements OnDestroy {
+    stateCtrl = new FormControl();
+    filteredStates: any[];
+    valueSub: Subscription;
+    width: number;
+    autocompleteDisabled = false;
+    openedSpy = jasmine.createSpy('autocomplete opened spy');
+    closedSpy = jasmine.createSpy('autocomplete closed spy');
+
+    @ViewChild(McAutocompleteTrigger) trigger: McAutocompleteTrigger;
+    @ViewChild(McAutocomplete) panel: McAutocomplete;
+    @ViewChild(McFormField) formField: McFormField;
+    @ViewChildren(McOption) options: QueryList<McOption>;
+
+    states = [
+        { code: 'AL', name: 'Alabama' },
+        { code: 'CA', name: 'California' },
+        { code: 'FL', name: 'Florida' },
+        { code: 'KS', name: 'Kansas' },
+        { code: 'MA', name: 'Massachusetts' },
+        { code: 'NY', name: 'New York' },
+        { code: 'OR', name: 'Oregon' },
+        { code: 'PA', name: 'Pennsylvania' },
+        { code: 'TN', name: 'Tennessee' },
+        { code: 'VA', name: 'Virginia' },
+        { code: 'WY', name: 'Wyoming' }
+    ];
+
+
+    constructor() {
+        this.filteredStates = this.states;
+        this.valueSub = this.stateCtrl.valueChanges.subscribe((val) => {
+            this.filteredStates = val ? this.states.filter((s) => s.name.match(new RegExp(val, 'gi')))
+                : this.states;
+        });
+    }
+
+    displayFn(value: any): string {
+        return value ? value.name : value;
+    }
+
+    ngOnDestroy() {
+        this.valueSub.unsubscribe();
+    }
+
+}
+
+@Component({
+    template: `
+        <mc-form-field *ngIf="isVisible">
+            <input mcInput placeholder="Choose" [mcAutocomplete]="auto" [formControl]="optionCtrl">
+        </mc-form-field>
+
+        <mc-autocomplete #auto="mcAutocomplete">
+            <mc-option *ngFor="let option of filteredOptions | async" [value]="option">
+                {{option}}
+            </mc-option>
+        </mc-autocomplete>
+    `
+})
+class NgIfAutocomplete {
+    optionCtrl = new FormControl();
+    filteredOptions: Observable<any>;
+    isVisible = true;
+    options = ['One', 'Two', 'Three'];
+
+    @ViewChild(McAutocompleteTrigger) trigger: McAutocompleteTrigger;
+    @ViewChildren(McOption) mcOptions: QueryList<McOption>;
+
+    constructor() {
+        this.filteredOptions = this.optionCtrl.valueChanges.pipe(
+            startWith(null),
+            map((val: string) => {
+                return val ? this.options.filter((option) => new RegExp(val, 'gi').test(option))
+                    : this.options.slice();
+            }));
+    }
+}
+
+
+@Component({
+    template: `
+        <mc-form-field>
+            <input mcInput placeholder="State" [mcAutocomplete]="auto"
+                   (input)="onInput($event.target?.value)">
+        </mc-form-field>
+
+        <mc-autocomplete #auto="mcAutocomplete">
+            <mc-option *ngFor="let state of filteredStates" [value]="state">
+                <span> {{ state }}  </span>
+            </mc-option>
+        </mc-autocomplete>
+    `
+})
+class AutocompleteWithoutForms {
+    filteredStates: any[];
+    states = ['Alabama', 'California', 'Florida'];
+
+    constructor() {
+        this.filteredStates = this.states.slice();
+    }
+
+    onInput(value: any) {
+        this.filteredStates = this.states.filter((s) => new RegExp(value, 'gi').test(s));
+    }
+}
+
+
+@Component({
+    template: `
+        <mc-form-field>
+            <input mcInput placeholder="State" [mcAutocomplete]="auto" [(ngModel)]="selectedState"
+                   (ngModelChange)="onInput($event)">
+        </mc-form-field>
+
+        <mc-autocomplete #auto="mcAutocomplete">
+            <mc-option *ngFor="let state of filteredStates" [value]="state">
+                <span>{{ state }}</span>
+            </mc-option>
+        </mc-autocomplete>
+    `
+})
+class AutocompleteWithNgModel {
+    filteredStates: any[];
+    selectedState: string;
+    states = ['New York', 'Washington', 'Oregon'];
+
+    constructor() {
+        this.filteredStates = this.states.slice();
+    }
+
+    onInput(value: any) {
+        this.filteredStates = this.states.filter((s) => new RegExp(value, 'gi').test(s));
+    }
+}
+
+@Component({
+    template: `
+        <mc-form-field>
+            <input mcInput placeholder="Number" [mcAutocomplete]="auto" [(ngModel)]="selectedNumber">
+        </mc-form-field>
+
+        <mc-autocomplete #auto="mcAutocomplete">
+            <mc-option *ngFor="let number of numbers" [value]="number">
+                <span>{{ number }}</span>
+            </mc-option>
+        </mc-autocomplete>
+    `
+})
+class AutocompleteWithNumbers {
+    selectedNumber: number;
+    numbers = [0, 1, 2];
+}
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+        <mc-form-field>
+            <input type="text" mcInput [mcAutocomplete]="auto">
+        </mc-form-field>
+
+        <mc-autocomplete #auto="mcAutocomplete">
+            <mc-option *ngFor="let option of options" [value]="option">{{ option }}</mc-option>
+        </mc-autocomplete>
+    `
+})
+class AutocompleteWithOnPushDelay implements OnInit {
+    @ViewChild(McAutocompleteTrigger) trigger: McAutocompleteTrigger;
+    options: string[];
+
+    ngOnInit() {
+        setTimeout(() => {
+            this.options = ['One'];
+        }, 1000);
+    }
+}
+
+@Component({
+    template: `
+        <input placeholder="Choose" [mcAutocomplete]="auto" [formControl]="optionCtrl">
+
+        <mc-autocomplete #auto="mcAutocomplete">
+            <mc-option *ngFor="let option of filteredOptions | async" [value]="option">
+                {{option}}
+            </mc-option>
+        </mc-autocomplete>
+    `
+})
+class AutocompleteWithNativeInput {
+    optionCtrl = new FormControl();
+    filteredOptions: Observable<any>;
+    options = ['En', 'To', 'Tre', 'Fire', 'Fem'];
+
+    @ViewChild(McAutocompleteTrigger) trigger: McAutocompleteTrigger;
+    @ViewChildren(McOption) mcOptions: QueryList<McOption>;
+
+    constructor() {
+        this.filteredOptions = this.optionCtrl.valueChanges.pipe(
+            startWith(null),
+            map((val: string) => {
+                return val ? this.options.filter((option) => new RegExp(val, 'gi').test(option))
+                    : this.options.slice();
+            }));
+    }
+}
+
+
+@Component({
+    template: `<input placeholder="Choose" [mcAutocomplete]="auto" [formControl]="control">`
+})
+class AutocompleteWithoutPanel {
+    @ViewChild(McAutocompleteTrigger) trigger: McAutocompleteTrigger;
+    control = new FormControl();
+}
+
+
+@Component({
+    template: `
+        <mc-form-field>
+            <input placeholder="State" mcInput [mcAutocomplete]="auto" [formControl]="formControl">
+        </mc-form-field>
+
+        <mc-autocomplete #auto="mcAutocomplete">
+            <mc-option value="California">California</mc-option>
+        </mc-autocomplete>
+    `
+})
+class AutocompleteWithFormsAndNonfloatingLabel {
+    formControl = new FormControl('California');
+}
+
+
+@Component({
+    template: `
+        <mc-form-field>
+            <input mcInput placeholder="State" [mcAutocomplete]="auto" [(ngModel)]="selectedState">
+        </mc-form-field>
+
+        <mc-autocomplete #auto="mcAutocomplete">
+            <mc-optgroup *ngFor="let group of stateGroups" [label]="group.label">
+                <mc-option *ngFor="let state of group.states" [value]="state">
+                    <span>{{ state }}</span>
+                </mc-option>
+            </mc-optgroup>
+        </mc-autocomplete>
+    `
+})
+class AutocompleteWithGroups {
+    @ViewChild(McAutocompleteTrigger) trigger: McAutocompleteTrigger;
+    selectedState: string;
+    stateGroups = [
+        {
+            title: 'One',
+            states: ['Alabama', 'California', 'Florida', 'Oregon']
+        },
+        {
+            title: 'Two',
+            states: ['Kansas', 'Massachusetts', 'New York', 'Pennsylvania']
+        },
+        {
+            title: 'Three',
+            states: ['Tennessee', 'Virginia', 'Wyoming', 'Alaska']
+        }
+    ];
+}
+
+@Component({
+    template: `
+        <mc-form-field>
+            <input mcInput placeholder="State" [mcAutocomplete]="auto" [(ngModel)]="selectedState">
+        </mc-form-field>
+
+        <mc-autocomplete #auto="mcAutocomplete" (optionSelected)="optionSelected($event)">
+            <mc-option *ngFor="let state of states" [value]="state">
+                <span>{{ state }}</span>
+            </mc-option>
+        </mc-autocomplete>
+    `
+})
+class AutocompleteWithSelectEvent {
+    selectedState: string;
+    states = ['New York', 'Washington', 'Oregon'];
+    optionSelected = jasmine.createSpy('optionSelected callback');
+
+    @ViewChild(McAutocompleteTrigger) trigger: McAutocompleteTrigger;
+    @ViewChild(McAutocomplete) autocomplete: McAutocomplete;
+}
+
+
+@Component({
+    template: `
+        <input [formControl]="formControl" [mcAutocomplete]="auto"/>
+        <mc-autocomplete #auto="mcAutocomplete"></mc-autocomplete>
+    `
+})
+class PlainAutocompleteInputWithFormControl {
+    formControl = new FormControl();
+}
+
+
+@Component({
+    template: `
+        <mc-form-field>
+            <input type="number" mcInput [mcAutocomplete]="auto" [(ngModel)]="selectedValue">
+        </mc-form-field>
+
+        <mc-autocomplete #auto="mcAutocomplete">
+            <mc-option *ngFor="let value of values" [value]="value">{{value}}</mc-option>
+        </mc-autocomplete>
+    `
+})
+class AutocompleteWithNumberInputAndNgModel {
+    selectedValue: number;
+    values = [1, 2, 3];
+}
+
+
+@Component({
+    template: `
+        <div>
+            <mc-form-field>
+                <input mcInput
+                       [mcAutocomplete]="auto"
+                       [mcAutocompleteConnectedTo]="connectedTo"
+                       [(ngModel)]="selectedValue">
+            </mc-form-field>
+        </div>
+
+        <div
+            class="origin"
+            mcAutocompleteOrigin
+            #origin="mcAutocompleteOrigin"
+            style="margin-top: 50px">
+            Connection element
+        </div>
+
+        <mc-autocomplete #auto="mcAutocomplete">
+            <mc-option *ngFor="let value of values" [value]="value">{{value}}</mc-option>
+        </mc-autocomplete>
+    `
+})
+class AutocompleteWithDifferentOrigin {
+    @ViewChild(McAutocompleteTrigger) trigger: McAutocompleteTrigger;
+    @ViewChild(McAutocompleteOrigin) alternateOrigin: McAutocompleteOrigin;
+
+    selectedValue: string;
+    values = ['one', 'two', 'three'];
+    connectedTo?: McAutocompleteOrigin;
+}
+
+@Component({
+    template: `
+        <input autocomplete="changed" [(ngModel)]="value" [mcAutocomplete]="auto"/>
+        <mc-autocomplete #auto="mcAutocomplete"></mc-autocomplete>
+    `
+})
+class AutocompleteWithNativeAutocompleteAttribute {
+    value: string;
+}
+
+@Component({
+    template: '<input [mcAutocomplete]="null" mcAutocompleteDisabled>'
+})
+class InputWithoutAutocompleteAndDisabled {}
diff --git a/src/lib/autocomplete/index.ts b/src/lib/autocomplete/index.ts
new file mode 100644
index 000000000..7e1a213e3
--- /dev/null
+++ b/src/lib/autocomplete/index.ts
@@ -0,0 +1 @@
+export * from './public-api';
diff --git a/src/lib/autocomplete/public-api.ts b/src/lib/autocomplete/public-api.ts
new file mode 100644
index 000000000..4a4b8cb33
--- /dev/null
+++ b/src/lib/autocomplete/public-api.ts
@@ -0,0 +1,4 @@
+export * from './autocomplete.component';
+export * from './autocomplete.module';
+export * from './autocomplete-trigger.directive';
+export * from './autocomplete-origin.directive';
diff --git a/src/lib/autocomplete/tsconfig-build.json b/src/lib/autocomplete/tsconfig-build.json
new file mode 100644
index 000000000..c116a495c
--- /dev/null
+++ b/src/lib/autocomplete/tsconfig-build.json
@@ -0,0 +1,13 @@
+{
+    "extends": "../tsconfig.build",
+    "files": ["public-api.ts"],
+    "angularCompilerOptions": {
+        "annotateForClosureCompiler": true,
+        "strictMetadataEmit": true,
+        "flatModuleOutFile": "index.js",
+        "flatModuleId": "@ptsecurity/mosaic/autocomplete",
+        "skipTemplateCodegen": true,
+        "fullTemplateTypeCheck": true
+    }
+}
+
diff --git a/src/lib/core/option/option.scss b/src/lib/core/option/option.scss
index 8de728e10..5a82e2893 100644
--- a/src/lib/core/option/option.scss
+++ b/src/lib/core/option/option.scss
@@ -2,6 +2,7 @@
 @import '../../../cdk/a11y/a11y';
 
 $mc-option-padding: 0 16px;
+$mc-option-item-height: 32px;
 
 
 .mc-option {
@@ -15,6 +16,8 @@ $mc-option-padding: 0 16px;
 
     max-width: 100%;
 
+    height: $mc-option-item-height;
+
     border: 2px solid transparent;
 
     cursor: pointer;
diff --git a/src/lib/core/option/option.ts b/src/lib/core/option/option.ts
index 859f47bfe..ddbf4fcd8 100644
--- a/src/lib/core/option/option.ts
+++ b/src/lib/core/option/option.ts
@@ -37,7 +37,8 @@ export class McOptionSelectionChange {
  * Contains properties that the options can inherit.
  * @docs-private
  */
-export interface IMcOptionParentComponent {
+// tslint:disable-next-line: naming-convention
+export interface McOptionParentComponent {
     multiple?: boolean;
 }
 
@@ -45,7 +46,7 @@ export interface IMcOptionParentComponent {
  * Injection token used to provide the parent component to options.
  */
 export const MC_OPTION_PARENT_COMPONENT =
-    new InjectionToken<IMcOptionParentComponent>('MC_OPTION_PARENT_COMPONENT');
+    new InjectionToken<McOptionParentComponent>('MC_OPTION_PARENT_COMPONENT');
 
 /**
  * Single option inside of a `<mc-select>` element.
@@ -135,7 +136,7 @@ export class McOption implements AfterViewChecked, OnDestroy {
     constructor(
         private readonly element: ElementRef,
         private readonly changeDetectorRef: ChangeDetectorRef,
-        @Optional() @Inject(MC_OPTION_PARENT_COMPONENT) private readonly parent: IMcOptionParentComponent,
+        @Optional() @Inject(MC_OPTION_PARENT_COMPONENT) private readonly parent: McOptionParentComponent,
         @Optional() readonly group: McOptgroup
     ) {}
 
diff --git a/src/lib/core/styles/typography/_all-typography.scss b/src/lib/core/styles/typography/_all-typography.scss
index 637f7d759..ea3aa9ae4 100644
--- a/src/lib/core/styles/typography/_all-typography.scss
+++ b/src/lib/core/styles/typography/_all-typography.scss
@@ -16,11 +16,12 @@
 @import '../../../sidepanel/sidepanel-theme';
 @import '../../../radio/radio-theme';
 @import '../../../tabs/tabs-theme';
-@import '../../../tag/tag-theme';
+@import '../../../tags/tag-theme';
 @import '../../../textarea/textarea-theme';
 @import '../../../tooltip/tooltip-theme';
 @import '../../../toggle/toggle-theme';
 @import '../../../tree/tree-theme';
+@import '../../../select/select-theme';
 @import '../../../tree-select/tree-select-theme';
 
 
@@ -54,5 +55,6 @@
     @include mc-tooltip-typography($config);
     @include mc-tree-typography($config);
     @include mc-tag-typography($config);
+    @include mc-select-typography($config);
     @include mc-tree-select-typography($config);
 }
diff --git a/src/lib/core/theming/_all-theme.scss b/src/lib/core/theming/_all-theme.scss
index 169906846..58f4da96f 100644
--- a/src/lib/core/theming/_all-theme.scss
+++ b/src/lib/core/theming/_all-theme.scss
@@ -22,7 +22,7 @@
 @import '../../select/select-theme';
 @import '../../splitter/splitter-theme';
 @import '../../tabs/tabs-theme';
-@import '../../tag/tag-theme';
+@import '../../tags/tag-theme';
 @import '../../textarea/textarea-theme';
 @import '../../tooltip/tooltip-theme';
 @import '../../toggle/toggle-theme';
@@ -30,6 +30,7 @@
 @import '../../sidepanel/sidepanel-theme';
 @import '../../tree/tree-theme';
 @import '../../tree-select/tree-select-theme';
+@import '../../autocomplete/autocomplete-theme';
 @import '../visual/panel-theme';
 
 
@@ -69,4 +70,5 @@
     @include mc-sidepanel-theme($theme);
     @include mc-tree-theme($theme);
     @include mc-tree-select-theme($theme);
+    @include mc-autocomplete-theme($theme);
 }
diff --git a/src/lib/dropdown/_dropdown-theme.scss b/src/lib/dropdown/_dropdown-theme.scss
index cb9a4ca20..f930321fb 100644
--- a/src/lib/dropdown/_dropdown-theme.scss
+++ b/src/lib/dropdown/_dropdown-theme.scss
@@ -14,8 +14,7 @@
     .mc-dropdown__panel {
         border-color: mc-color($second);
 
-        // todo A-black-200 нет в палитре
-        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
+        box-shadow: 0 3px 3px 0 mc-color($second, A200);
 
         background-color: if($is-dark, map-get($second, 700), map-get($background, background));
     }
diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts
index 5bb1f6c1a..59a477d7d 100644
--- a/src/lib/form-field/form-field.ts
+++ b/src/lib/form-field/form-field.ts
@@ -8,7 +8,7 @@ import {
     ContentChild,
     ContentChildren, Directive,
     ElementRef,
-    QueryList,
+    QueryList, ViewChild,
     ViewEncapsulation
 } from '@angular/core';
 import { NgControl } from '@angular/forms';
@@ -85,6 +85,8 @@ export class McFormField extends _McFormFieldMixinBase implements
     @ContentChildren(McPrefix) _prefix: QueryList<McPrefix>;
     @ContentChildren(McCleaner) _cleaner: QueryList<McCleaner>;
 
+    @ViewChild('connectionContainer') connectionContainerRef: ElementRef;
+
     // Unique id for the internal form field label.
     _labelId = `mc-form-field-label-${nextUniqueId++}`;
 
@@ -180,7 +182,15 @@ export class McFormField extends _McFormFieldMixinBase implements
         }
     }
 
-    /** Determines whether a class from the NgControl should be forwarded to the host element. */
+    /**
+     * Gets an ElementRef for the element that a overlay attached to the form-field should be
+     * positioned relative to.
+     */
+    getConnectedOverlayOrigin(): ElementRef {
+        return this.connectionContainerRef || this._elementRef;
+    }
+
+        /** Determines whether a class from the NgControl should be forwarded to the host element. */
     _shouldForward(prop: keyof NgControl): boolean {
         const ngControl = this._control ? this._control.ngControl : null;
 
diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts
index 5f376d35a..ffba9eb58 100644
--- a/src/lib/input/input.spec.ts
+++ b/src/lib/input/input.spec.ts
@@ -4,6 +4,8 @@ import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { DOWN_ARROW, ESCAPE, UP_ARROW } from '@ptsecurity/cdk/keycodes';
 import {
+    createKeyboardEvent,
+    dispatchEvent,
     dispatchFakeEvent,
     dispatchKeyboardEvent
 } from '@ptsecurity/cdk/testing';
@@ -583,7 +585,9 @@ describe('McNumberInput', () => {
             inputElement.value = 5;
             dispatchFakeEvent(inputElement, 'input');
 
-            dispatchKeyboardEvent(inputElementDebug.nativeElement, 'keydown', UP_ARROW, undefined, true);
+            const event = createKeyboardEvent('keydown', UP_ARROW);
+            Object.defineProperty(event, 'shiftKey', { get: () => true });
+            dispatchEvent(inputElementDebug.nativeElement, event);
 
             fixture.detectChanges();
 
@@ -686,7 +690,9 @@ describe('McNumberInput', () => {
             inputElement.value = 5;
             dispatchFakeEvent(inputElement, 'input');
 
-            dispatchKeyboardEvent(inputElementDebug.nativeElement, 'keydown', UP_ARROW, undefined, true);
+            const event = createKeyboardEvent('keydown', UP_ARROW);
+            Object.defineProperty(event, 'shiftKey', { get: () => true });
+            dispatchEvent(inputElementDebug.nativeElement, event);
 
             fixture.detectChanges();
 
@@ -703,7 +709,9 @@ describe('McNumberInput', () => {
             inputElement.value = 6;
             dispatchFakeEvent(inputElement, 'input');
 
-            dispatchKeyboardEvent(inputElementDebug.nativeElement, 'keydown', DOWN_ARROW, undefined, true);
+            const event = createKeyboardEvent('keydown', DOWN_ARROW);
+            Object.defineProperty(event, 'shiftKey', { get: () => true });
+            dispatchEvent(inputElementDebug.nativeElement, event);
 
             fixture.detectChanges();
 
diff --git a/src/lib/list/list-selection.component.spec.ts b/src/lib/list/list-selection.component.spec.ts
index f6de600a5..34bf93232 100644
--- a/src/lib/list/list-selection.component.spec.ts
+++ b/src/lib/list/list-selection.component.spec.ts
@@ -1,11 +1,12 @@
-/* tslint:disable:no-magic-numbers */
+// tslint:disable:no-magic-numbers
+// tslint:disable:mocha-no-side-effect-code
+// tslint:disable:max-func-body-length
+
 import { Component, DebugElement, ChangeDetectionStrategy } from '@angular/core';
 import { async, ComponentFixture, fakeAsync, TestBed, tick, flush } from '@angular/core/testing';
 import { FormControl, FormsModule, NgModel, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
-
 import { DOWN_ARROW, SPACE, ENTER, UP_ARROW, HOME, END } from '@ptsecurity/cdk/keycodes';
-
 import {
     createKeyboardEvent,
     dispatchFakeEvent,
@@ -174,9 +175,9 @@ describe('McListSelection without forms', () => {
 
         it('should be able to select an item using ENTER', () => {
             const manager = selectionList.componentInstance._keyManager;
-            const ENTER_EVENT: KeyboardEvent = createKeyboardEvent('keydown', ENTER);
-            const selectList =
-                selectionList.injector.get<McListSelection>(McListSelection).selectedOptions;
+            const testListItem: HTMLElement = listOptions[1].nativeElement;
+            const ENTER_EVENT: KeyboardEvent = createKeyboardEvent('keydown', ENTER, testListItem);
+            const selectList = selectionList.injector.get<McListSelection>(McListSelection).selectedOptions;
             expect(selectList.selected.length).toBe(0);
 
             manager.updateActiveItem(1);
diff --git a/src/lib/public-api.ts b/src/lib/public-api.ts
index 508bc10d8..c979a98ff 100644
--- a/src/lib/public-api.ts
+++ b/src/lib/public-api.ts
@@ -24,7 +24,7 @@ export * from '@ptsecurity/mosaic/tree';
 export * from '@ptsecurity/mosaic/tabs';
 export * from '@ptsecurity/mosaic/select';
 export * from '@ptsecurity/mosaic/tree-select';
-export * from '@ptsecurity/mosaic/tag';
+export * from '@ptsecurity/mosaic/tags';
 export * from '@ptsecurity/mosaic/textarea';
 export * from '@ptsecurity/mosaic/timepicker';
 export * from '@ptsecurity/mosaic/sidepanel';
diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss
index 305195d99..cc49bb81c 100644
--- a/src/lib/select/_select-theme.scss
+++ b/src/lib/select/_select-theme.scss
@@ -30,8 +30,7 @@
             color: mc-color($second);
         }
 
-        // todo A-black-200 нет в палитре
-        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
+        box-shadow: 0 3px 3px 0 mc-color($second, A200);
 
         background-color: if($is-dark, map-get($second, 700), map-get($background, background));
     }
diff --git a/src/lib/select/select.component.ts b/src/lib/select/select.component.ts
index 9f4420bd4..f849035c7 100644
--- a/src/lib/select/select.component.ts
+++ b/src/lib/select/select.component.ts
@@ -77,7 +77,7 @@ import {
     MC_SELECT_SCROLL_STRATEGY
 } from '@ptsecurity/mosaic/core';
 import { McFormField, McFormFieldControl } from '@ptsecurity/mosaic/form-field';
-import { McTag } from '@ptsecurity/mosaic/tag';
+import { McTag } from '@ptsecurity/mosaic/tags';
 import { defer, merge, Observable, Subject } from 'rxjs';
 import {
     filter,
diff --git a/src/lib/select/select.module.ts b/src/lib/select/select.module.ts
index bb50b8150..54c809144 100644
--- a/src/lib/select/select.module.ts
+++ b/src/lib/select/select.module.ts
@@ -5,7 +5,7 @@ import { OverlayModule } from '@ptsecurity/cdk/overlay';
 import { MC_SELECT_SCROLL_STRATEGY_PROVIDER, McOptionModule } from '@ptsecurity/mosaic/core';
 import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
 import { McIconModule } from '@ptsecurity/mosaic/icon';
-import { McTagModule } from '@ptsecurity/mosaic/tag';
+import { McTagsModule } from '@ptsecurity/mosaic/tags';
 
 import { McSelect, McSelectTrigger } from './select.component';
 
@@ -16,7 +16,7 @@ import { McSelect, McSelectTrigger } from './select.component';
         OverlayModule,
         McOptionModule,
         McIconModule,
-        McTagModule
+        McTagsModule
     ],
     exports: [McFormFieldModule, McSelect, McSelectTrigger, McOptionModule, CommonModule],
     declarations: [McSelect, McSelectTrigger],
diff --git a/src/lib/tag/public-api.ts b/src/lib/tag/public-api.ts
deleted file mode 100644
index e1f2731b9..000000000
--- a/src/lib/tag/public-api.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './tag.component';
-export * from './tag.module';
diff --git a/src/lib/tag/tag.component.ts b/src/lib/tag/tag.component.ts
deleted file mode 100644
index 707d33e99..000000000
--- a/src/lib/tag/tag.component.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import {
-    ElementRef,
-    QueryList,
-    ContentChildren,
-    Component,
-    ChangeDetectionStrategy,
-    ViewEncapsulation
-} from '@angular/core';
-
-import {
-    mixinColor,
-    CanColor,
-    CanColorCtor,
-    CanDisable,
-    CanDisableCtor,
-    mixinDisabled
-} from '@ptsecurity/mosaic/core';
-import { McIcon } from '@ptsecurity/mosaic/icon';
-
-
-export class McTagBase {
-    constructor(public _elementRef: ElementRef) {}
-}
-
-export const _McTagMixinBase: CanColorCtor & CanDisableCtor & typeof McTagBase = mixinColor(mixinDisabled(McTagBase));
-
-
-@Component({
-    selector: 'mc-tag',
-    templateUrl: 'tag.partial.html',
-    styleUrls: ['./tag.css'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    host: {
-        class: 'mc-tag',
-        '[class.mc-disabled]': 'disabled'
-    },
-    inputs: ['color', 'disabled']
-})
-export class McTag extends _McTagMixinBase implements CanColor, CanDisable {
-    @ContentChildren(McIcon) contentChildren: QueryList<McIcon>;
-
-    nativeElement: HTMLElement;
-
-    private _disabled: boolean = false;
-
-    get disabled() {
-        return this._disabled;
-    }
-
-    set disabled(value: any) {
-        if (value !== this.disabled) { this._disabled = value; }
-    }
-
-    constructor(elementRef: ElementRef) {
-        super(elementRef);
-
-        this.nativeElement = elementRef.nativeElement;
-    }
-
-    ngAfterContentInit() {
-        this._addClassModificatorForIcons();
-    }
-
-    _addClassModificatorForIcons() {
-        const icons = this.contentChildren.map((item) => item._elementRef.nativeElement);
-
-        if (icons.length === 1) {
-            const iconElement = icons[0];
-
-            if (!iconElement.previousElementSibling && !iconElement.nextElementSibling) {
-                if (iconElement.nextSibling) {
-                    iconElement.classList.add('mc-icon_left');
-                    this.nativeElement.classList.add('mc-left-icon');
-                }
-
-                if (iconElement.previousSibling) {
-                    iconElement.classList.add('mc-icon_right');
-                    this.nativeElement.classList.add('mc-right-icon');
-                }
-            }
-        } else if (icons.length > 1) {
-            const firstIconElement = icons[0];
-            const secondIconElement = icons[1];
-
-            firstIconElement.classList.add('mc-icon_left');
-            secondIconElement.classList.add('mc-icon_right');
-        }
-    }
-}
diff --git a/src/lib/tag/tag.module.ts b/src/lib/tag/tag.module.ts
deleted file mode 100644
index 2c73e9d42..000000000
--- a/src/lib/tag/tag.module.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { PlatformModule } from '@ptsecurity/cdk/platform';
-
-import { McTag } from './tag.component';
-
-
-@NgModule({
-    imports: [
-        CommonModule,
-        PlatformModule
-    ],
-    exports: [
-        McTag
-    ],
-    declarations: [
-        McTag
-    ]
-})
-export class McTagModule {}
diff --git a/src/lib/tag/tag.md b/src/lib/tags/README.md
similarity index 100%
rename from src/lib/tag/tag.md
rename to src/lib/tags/README.md
diff --git a/src/lib/tag/_tag-theme.scss b/src/lib/tags/_tag-theme.scss
similarity index 81%
rename from src/lib/tag/_tag-theme.scss
rename to src/lib/tags/_tag-theme.scss
index 583500236..d22c5f15e 100644
--- a/src/lib/tag/_tag-theme.scss
+++ b/src/lib/tags/_tag-theme.scss
@@ -11,7 +11,8 @@
     border-color: mc-color($main-color, if($is-dark-theme, 700, 100));
 
     &.mc-active,
-    &.mc-focused {
+    &.mc-focused,
+    &:focus {
         border-color: mc-color($focus-color);
         box-shadow: 0 0 0 1px mc-color($focus-color);
     }
@@ -63,6 +64,22 @@
             }
         }
     }
+
+    .mc-tag-input {
+        color: map-get($foreground, text);;
+
+        &::placeholder {
+            color: map-get($foreground, disabled-text);;
+        }
+
+        &::-ms-input-placeholder {
+            color: map-get($foreground, disabled-text);;
+        }
+
+        &::-webkit-input-placeholder {
+            color: map-get($foreground, disabled-text);;
+        }
+    }
 }
 
 @mixin mc-tag-typography($config) {
@@ -77,5 +94,9 @@
     .mc-tag_caps {
         @include mc-typography-level-to-styles($config, caption-caps);
     }
+
+    .mc-tag-input {
+        @include mc-typography-level-to-styles($config, body);
+    }
 }
 
diff --git a/src/lib/tag/index.ts b/src/lib/tags/index.ts
similarity index 100%
rename from src/lib/tag/index.ts
rename to src/lib/tags/index.ts
diff --git a/src/lib/tags/public-api.ts b/src/lib/tags/public-api.ts
new file mode 100644
index 000000000..bf991f320
--- /dev/null
+++ b/src/lib/tags/public-api.ts
@@ -0,0 +1,5 @@
+export * from './tag.module';
+export * from './tag.component';
+export * from './tag-list.component';
+export * from './tag-input';
+export * from './tag-default-options';
diff --git a/src/lib/tags/tag-default-options.ts b/src/lib/tags/tag-default-options.ts
new file mode 100644
index 000000000..012e6768b
--- /dev/null
+++ b/src/lib/tags/tag-default-options.ts
@@ -0,0 +1,12 @@
+import { InjectionToken } from '@angular/core';
+
+
+/** Default options, for the chips module, that can be overridden. */
+// tslint:disable-next-line: naming-convention
+export interface McTagsDefaultOptions {
+    /** The list of key codes that will trigger a chipEnd event. */
+    separatorKeyCodes: number[] | Set<number>;
+}
+
+/** Injection token to be used to override the default options for the chips module. */
+export const MC_TAGS_DEFAULT_OPTIONS = new InjectionToken<McTagsDefaultOptions>('mc-tags-default-options');
diff --git a/src/lib/tags/tag-input.spec.ts b/src/lib/tags/tag-input.spec.ts
new file mode 100644
index 000000000..10157885b
--- /dev/null
+++ b/src/lib/tags/tag-input.spec.ts
@@ -0,0 +1,226 @@
+// tslint:disable:no-unbound-method
+// tslint:disable:no-empty
+
+import { Component, DebugElement, ViewChild } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Directionality } from '@ptsecurity/cdk/bidi';
+import { ENTER, COMMA } from '@ptsecurity/cdk/keycodes';
+import { PlatformModule } from '@ptsecurity/cdk/platform';
+import { createKeyboardEvent } from '@ptsecurity/cdk/testing';
+import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
+import { Subject } from 'rxjs';
+
+import { McTagsModule } from './index';
+import { MC_TAGS_DEFAULT_OPTIONS, McTagsDefaultOptions } from './tag-default-options';
+import { McTagInput, McTagInputEvent } from './tag-input';
+import { McTagList } from './tag-list.component';
+
+
+describe('McTagInput', () => {
+    let fixture: ComponentFixture<any>;
+    let testTagInput: TestTagInput;
+    let inputDebugElement: DebugElement;
+    let inputNativeElement: HTMLElement;
+    let tagInputDirective: McTagInput;
+    const dir = 'ltr';
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [PlatformModule, McTagsModule, McFormFieldModule, NoopAnimationsModule],
+            declarations: [TestTagInput],
+            providers: [{
+                provide: Directionality, useFactory: () => {
+                    return {
+                        value: dir.toLowerCase(),
+                        // tslint:disable-next-line: no-inferred-empty-object-type
+                        change: new Subject()
+                    };
+                }
+            }]
+        });
+
+        TestBed.compileComponents();
+    }));
+
+    beforeEach(async(() => {
+        fixture = TestBed.createComponent(TestTagInput);
+        testTagInput = fixture.debugElement.componentInstance;
+        fixture.detectChanges();
+
+        inputDebugElement = fixture.debugElement.query(By.directive(McTagInput));
+        tagInputDirective = inputDebugElement.injector.get<McTagInput>(McTagInput);
+        inputNativeElement = inputDebugElement.nativeElement;
+    }));
+
+    describe('basic behavior', () => {
+        it('emits the (tagEnd) on enter keyup', () => {
+            const ENTER_EVENT = createKeyboardEvent('keydown', ENTER, inputNativeElement);
+
+            spyOn(testTagInput, 'add');
+
+            tagInputDirective.keydown(ENTER_EVENT);
+            expect(testTagInput.add).toHaveBeenCalled();
+        });
+
+        it('should have a default id', () => {
+            expect(inputNativeElement.getAttribute('id')).toBeTruthy();
+        });
+
+        it('should allow binding to the `placeholder` input', () => {
+            expect(inputNativeElement.hasAttribute('placeholder')).toBe(false);
+
+            testTagInput.placeholder = 'bound placeholder';
+            fixture.detectChanges();
+
+            expect(inputNativeElement.getAttribute('placeholder')).toBe('bound placeholder');
+        });
+
+        // it('should propagate the dynamic `placeholder` value to the form field', () => {
+        //     fixture.componentInstance.placeholder = 'add a tag';
+        //     fixture.detectChanges();
+        //
+        //     const label: HTMLElement = fixture.nativeElement.querySelector('.mat-form-field-label');
+        //
+        //     expect(label).toBeTruthy();
+        //     expect(label.textContent).toContain('add a tag');
+        //
+        //     fixture.componentInstance.placeholder = 'or don\'t';
+        //     fixture.detectChanges();
+        //
+        //     expect(label.textContent).toContain('or don\'t');
+        // });
+
+        // it('should become disabled if the tag list is disabled', () => {
+        //     expect(inputNativeElement.hasAttribute('disabled')).toBe(false);
+        //     expect(tagInputDirective.disabled).toBe(false);
+        //
+        //     fixture.componentInstance.tagListInstance.disabled = true;
+        //     fixture.detectChanges();
+        //
+        //     expect(inputNativeElement.getAttribute('disabled')).toBe('true');
+        //     expect(tagInputDirective.disabled).toBe(true);
+        // });
+    });
+
+    describe('[addOnBlur]', () => {
+        it('allows (tagEnd) when true', () => {
+            spyOn(testTagInput, 'add');
+
+            testTagInput.addOnBlur = true;
+            fixture.detectChanges();
+
+            tagInputDirective.blur();
+            expect(testTagInput.add).toHaveBeenCalled();
+        });
+
+        it('disallows (tagEnd) when false', () => {
+            spyOn(testTagInput, 'add');
+
+            testTagInput.addOnBlur = false;
+            fixture.detectChanges();
+
+            tagInputDirective.blur();
+            expect(testTagInput.add).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('[separatorKeyCodes]', () => {
+        it('does not emit (tagEnd) when a non-separator key is pressed', () => {
+            const ENTER_EVENT = createKeyboardEvent('keydown', ENTER, inputNativeElement);
+            spyOn(testTagInput, 'add');
+
+            tagInputDirective.separatorKeyCodes = [COMMA];
+            fixture.detectChanges();
+
+            tagInputDirective.keydown(ENTER_EVENT);
+            expect(testTagInput.add).not.toHaveBeenCalled();
+        });
+
+        it('emits (tagEnd) when a custom separator keys is pressed', () => {
+            const COMMA_EVENT = createKeyboardEvent('keydown', COMMA, inputNativeElement);
+            spyOn(testTagInput, 'add');
+
+            tagInputDirective.separatorKeyCodes = [COMMA];
+            fixture.detectChanges();
+
+            tagInputDirective.keydown(COMMA_EVENT);
+            expect(testTagInput.add).toHaveBeenCalled();
+        });
+
+        it('emits accepts the custom separator keys in a Set', () => {
+            const COMMA_EVENT = createKeyboardEvent('keydown', COMMA, inputNativeElement);
+            spyOn(testTagInput, 'add');
+
+            tagInputDirective.separatorKeyCodes = new Set([COMMA]);
+            fixture.detectChanges();
+
+            tagInputDirective.keydown(COMMA_EVENT);
+            expect(testTagInput.add).toHaveBeenCalled();
+        });
+
+        it('emits (tagEnd) when the separator keys are configured globally', () => {
+            fixture.destroy();
+
+            TestBed
+                .resetTestingModule()
+                .configureTestingModule({
+                    imports: [McTagsModule, McFormFieldModule, PlatformModule, NoopAnimationsModule],
+                    declarations: [TestTagInput],
+                    providers: [{
+                        provide: MC_TAGS_DEFAULT_OPTIONS,
+                        // tslint:disable-next-line: no-object-literal-type-assertion
+                        useValue: ({ separatorKeyCodes: [COMMA] } as McTagsDefaultOptions)
+                    }]
+                })
+                .compileComponents();
+
+            fixture = TestBed.createComponent(TestTagInput);
+            testTagInput = fixture.debugElement.componentInstance;
+            fixture.detectChanges();
+
+            inputDebugElement = fixture.debugElement.query(By.directive(McTagInput));
+            tagInputDirective = inputDebugElement.injector.get<McTagInput>(McTagInput);
+            inputNativeElement = inputDebugElement.nativeElement;
+
+            spyOn(testTagInput, 'add');
+            fixture.detectChanges();
+
+            tagInputDirective.keydown(createKeyboardEvent('keydown', COMMA, inputNativeElement));
+            expect(testTagInput.add).toHaveBeenCalled();
+        });
+
+        it('should not emit the tagEnd event if a separator is pressed with a modifier key', () => {
+            const ENTER_EVENT = createKeyboardEvent('keydown', ENTER, inputNativeElement);
+            Object.defineProperty(ENTER_EVENT, 'shiftKey', { get: () => true });
+            spyOn(testTagInput, 'add');
+
+            tagInputDirective.separatorKeyCodes = [ENTER];
+            fixture.detectChanges();
+
+            tagInputDirective.keydown(ENTER_EVENT);
+            expect(testTagInput.add).not.toHaveBeenCalled();
+        });
+    });
+});
+
+@Component({
+    template: `
+        <mc-form-field>
+            <mc-tag-list #tagList></mc-tag-list>
+            <input [mcTagInputFor]="tagList"
+                   [mcTagInputAddOnBlur]="addOnBlur"
+                   (mcTagInputTokenEnd)="add($event)"
+                   [placeholder]="placeholder"/>
+        </mc-form-field>
+    `
+})
+class TestTagInput {
+    @ViewChild(McTagList) tagListInstance: McTagList;
+
+    addOnBlur: boolean = false;
+    placeholder = '';
+
+    add(_: McTagInputEvent) {}
+}
diff --git a/src/lib/tags/tag-input.ts b/src/lib/tags/tag-input.ts
new file mode 100644
index 000000000..5f5045d32
--- /dev/null
+++ b/src/lib/tags/tag-input.ts
@@ -0,0 +1,182 @@
+import { Directive, ElementRef, EventEmitter, Inject, Input, OnChanges, Output } from '@angular/core';
+import { coerceBooleanProperty } from '@ptsecurity/cdk/coercion';
+import { hasModifierKey } from '@ptsecurity/cdk/keycodes';
+
+import { MC_TAGS_DEFAULT_OPTIONS, McTagsDefaultOptions } from './tag-default-options';
+import { McTagList } from './tag-list.component';
+import { McTagTextControl } from './tag-text-control';
+
+
+/** Represents an input event on a `mcTagInput`. */
+// tslint:disable-next-line: naming-convention
+export interface McTagInputEvent {
+    /** The native `<input>` element that the event is being fired for. */
+    input: HTMLInputElement;
+
+    /** The value of the input. */
+    value: string;
+}
+
+// Increasing integer for generating unique ids.
+let nextUniqueId = 0;
+
+/**
+ * Directive that adds tag-specific behaviors to an input element inside `<mc-form-field>`.
+ * May be placed inside or outside of an `<mc-tag-list>`.
+ */
+@Directive({
+    selector: 'input[mcTagInputFor]',
+    exportAs: 'mcTagInput, mcTagInputFor',
+    host: {
+        class: 'mc-tag-input mc-input-element',
+        '[id]': 'id',
+        '[attr.disabled]': 'disabled || null',
+        '[attr.placeholder]': 'placeholder || null',
+        '[attr.aria-invalid]': '_tagList && _tagList.ngControl ? _tagList.ngControl.invalid : null',
+        '(keydown)': 'keydown($event)',
+        '(blur)': 'blur()',
+        '(focus)': 'onFocus()',
+        '(input)': 'onInput()'
+    }
+})
+export class McTagInput implements McTagTextControl, OnChanges {
+    /** Whether the control is focused. */
+    focused: boolean = false;
+
+    /**
+     * The list of key codes that will trigger a tagEnd event.
+     *
+     * Defaults to `[ENTER]`.
+     */
+    @Input('mcTagInputSeparatorKeyCodes')
+    separatorKeyCodes: number[] | Set<number> = this.defaultOptions.separatorKeyCodes;
+
+    /** Emitted when a tag is to be added. */
+    @Output('mcTagInputTokenEnd')
+    tagEnd: EventEmitter<McTagInputEvent> = new EventEmitter<McTagInputEvent>();
+
+    /** The input's placeholder text. */
+    @Input() placeholder: string = '';
+
+    /** Unique id for the input. */
+    @Input() id: string = `mc-tag-list-input-${nextUniqueId++}`;
+
+    /** Register input for tag list */
+    @Input('mcTagInputFor')
+    set tagList(value: McTagList) {
+        if (value) {
+            this._tagList = value;
+            this._tagList.registerInput(this);
+        }
+    }
+
+    // tslint:disable-next-line: naming-convention
+    _tagList: McTagList;
+
+    /**
+     * Whether or not the tagEnd event will be emitted when the input is blurred.
+     */
+    @Input('mcTagInputAddOnBlur')
+    get addOnBlur(): boolean {
+        return this._addOnBlur;
+    }
+
+    set addOnBlur(value: boolean) {
+        this._addOnBlur = coerceBooleanProperty(value);
+    }
+
+    private _addOnBlur: boolean = false;
+
+    /** Whether the input is disabled. */
+    @Input()
+    get disabled(): boolean {
+        return this._disabled || (this._tagList && this._tagList.disabled);
+    }
+
+    set disabled(value: boolean) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+
+    private _disabled: boolean = false;
+
+    /** Whether the input is empty. */
+    get empty(): boolean {
+        return !this.inputElement.value;
+    }
+
+    /** The native input element to which this directive is attached. */
+    private inputElement: HTMLInputElement;
+
+    constructor(
+        private elementRef: ElementRef<HTMLInputElement>,
+        @Inject(MC_TAGS_DEFAULT_OPTIONS) private defaultOptions: McTagsDefaultOptions
+    ) {
+        // tslint:disable-next-line: no-unnecessary-type-assertion
+        this.inputElement = this.elementRef.nativeElement as HTMLInputElement;
+    }
+
+    ngOnChanges() {
+        this._tagList.stateChanges.next();
+    }
+
+    /** Utility method to make host definition/tests more clear. */
+    keydown(event?: KeyboardEvent) {
+        this.emittagEnd(event);
+    }
+
+    /** Checks to see if the blur should emit the (tagEnd) event. */
+    blur() {
+        if (this.addOnBlur) {
+            this.emittagEnd();
+        }
+
+        this.focused = false;
+        // Blur the tag list if it is not focused
+        if (!this._tagList.focused) {
+            this._tagList.blur();
+        }
+
+        this._tagList.stateChanges.next();
+    }
+
+    /** Checks to see if the (tagEnd) event needs to be emitted. */
+    emittagEnd(event?: KeyboardEvent) {
+        if (!this.inputElement.value && !!event) {
+            this._tagList.keydown(event);
+        }
+
+        if (!event || this.isSeparatorKey(event)) {
+            this.tagEnd.emit({ input: this.inputElement, value: this.inputElement.value });
+
+            if (event) {
+                event.preventDefault();
+            }
+        }
+    }
+
+    onInput() {
+        // Let tag list know whenever the value changes.
+        this._tagList.stateChanges.next();
+    }
+
+    onFocus() {
+        this.focused = true;
+        this._tagList.stateChanges.next();
+    }
+
+    /** Focuses the input. */
+    focus(): void {
+        this.inputElement.focus();
+    }
+
+    /** Checks whether a keycode is one of the configured separators. */
+    private isSeparatorKey(event: KeyboardEvent) {
+        if (hasModifierKey(event)) { return false; }
+
+        const separators = this.separatorKeyCodes;
+        // tslint:disable-next-line: deprecation
+        const keyCode = event.keyCode;
+
+        return Array.isArray(separators) ? separators.indexOf(keyCode) > -1 : separators.has(keyCode);
+    }
+}
diff --git a/src/lib/tags/tag-list.component.spec.ts b/src/lib/tags/tag-list.component.spec.ts
new file mode 100644
index 000000000..990f210b1
--- /dev/null
+++ b/src/lib/tags/tag-list.component.spec.ts
@@ -0,0 +1,1596 @@
+/* tslint:disable:no-magic-numbers no-empty */
+// tslint:disable:mocha-no-side-effect-code
+// tslint:disable:max-func-body-length
+import { animate, style, transition, trigger } from '@angular/animations';
+import {
+    Component,
+    DebugElement,
+    NgZone,
+    Provider,
+    QueryList,
+    Type,
+    ViewChild,
+    ViewChildren
+} from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { FormControl, FormsModule, NgForm, ReactiveFormsModule, Validators } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { FocusKeyManager } from '@ptsecurity/cdk/a11y';
+import { Directionality, Direction } from '@ptsecurity/cdk/bidi';
+import {
+    BACKSPACE,
+    DELETE,
+    ENTER,
+    LEFT_ARROW,
+    RIGHT_ARROW,
+    SPACE,
+    TAB,
+    HOME,
+    END
+} from '@ptsecurity/cdk/keycodes';
+import {
+    createKeyboardEvent,
+    dispatchFakeEvent,
+    dispatchKeyboardEvent,
+    dispatchMouseEvent,
+    typeInElement,
+    MockNgZone
+} from '@ptsecurity/cdk/testing';
+import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
+import { Subject } from 'rxjs';
+
+import { McInputModule } from '../input/index';
+
+import { McTagEvent, McTagList, McTagRemove, McTagsModule } from './index';
+import { McTagInputEvent } from './tag-input';
+import { McTag } from './tag.component';
+
+
+describe('MatTagList', () => {
+    let fixture: ComponentFixture<any>;
+    let tagListDebugElement: DebugElement;
+    let tagListNativeElement: HTMLElement;
+    let tagListInstance: McTagList;
+    let testComponent: StandardTagList;
+    let tags: QueryList<McTag>;
+    let manager: FocusKeyManager<McTag>;
+    let zone: MockNgZone;
+    let dirChange: Subject<Direction>;
+
+    describe('StandardTagList', () => {
+        describe('basic behaviors', () => {
+            beforeEach(() => {
+                setupStandardList();
+            });
+
+            it('should add the `mc-tag-list` class', () => {
+                expect(tagListNativeElement.classList).toContain('mc-tag-list');
+            });
+
+            it('should not have the aria-selected attribute when is not selectable', () => {
+                testComponent.selectable = false;
+                fixture.detectChanges();
+
+                const tagsValid = tags.toArray().every((tag) =>
+                    !tag.selectable && !tag._elementRef.nativeElement.hasAttribute('aria-selected'));
+
+                expect(tagsValid).toBe(true);
+            });
+
+            it('should toggle the tags disabled state based on whether it is disabled', () => {
+                expect(tags.toArray().every((tag) => tag.disabled)).toBe(false);
+
+                tagListInstance.disabled = true;
+                fixture.detectChanges();
+
+                expect(tags.toArray().every((tag) => tag.disabled)).toBe(true);
+
+                tagListInstance.disabled = false;
+                fixture.detectChanges();
+
+                expect(tags.toArray().every((tag) => tag.disabled)).toBe(false);
+            });
+
+            it('should disable a tag that is added after the list became disabled', fakeAsync(() => {
+                expect(tags.toArray().every((tag) => tag.disabled)).toBe(false);
+
+                tagListInstance.disabled = true;
+                fixture.detectChanges();
+
+                expect(tags.toArray().every((tag) => tag.disabled)).toBe(true);
+
+                fixture.componentInstance.tags.push(5, 6);
+                fixture.detectChanges();
+                tick();
+                fixture.detectChanges();
+
+                expect(tags.toArray().every((tag) => tag.disabled)).toBe(true);
+            }));
+
+        });
+
+        describe('with selected tags', () => {
+            beforeEach(() => {
+                fixture = createComponent(SelectedTagList);
+                fixture.detectChanges();
+                tagListDebugElement = fixture.debugElement.query(By.directive(McTagList));
+                tagListNativeElement = tagListDebugElement.nativeElement;
+            });
+
+            it('should not override tags selected', () => {
+                const instanceTags = fixture.componentInstance.tags.toArray();
+
+                expect(instanceTags[0].selected).toBe(true, 'Expected first option to be selected.');
+                expect(instanceTags[1].selected).toBe(false, 'Expected second option to be not selected.');
+                expect(instanceTags[2].selected).toBe(true, 'Expected third option to be selected.');
+            });
+
+            it('should not have role when empty', () => {
+                fixture.componentInstance.foods = [];
+                fixture.detectChanges();
+
+                expect(tagListNativeElement.getAttribute('role')).toBeNull('Expect no role attribute');
+            });
+        });
+
+        describe('focus behaviors', () => {
+            beforeEach(() => {
+                setupStandardList();
+                manager = tagListInstance.keyManager;
+            });
+
+            it('should focus the first tag on focus', () => {
+                tagListInstance.focus();
+                fixture.detectChanges();
+
+                expect(manager.activeItemIndex).toBe(0);
+            });
+
+            it('should watch for tag focus', () => {
+                const array = tags.toArray();
+                const lastIndex = array.length - 1;
+                const lastItem = array[lastIndex];
+                lastItem.focus();
+                fixture.detectChanges();
+
+                expect(manager.activeItemIndex).toBe(lastIndex);
+            });
+
+            it('should watch for tag focus', () => {
+                const array = tags.toArray();
+                const lastIndex = array.length - 1;
+                const lastItem = array[lastIndex];
+
+                lastItem.focus();
+                fixture.detectChanges();
+
+                expect(manager.activeItemIndex).toBe(lastIndex);
+            });
+
+            it('should be able to become focused when disabled', () => {
+                expect(tagListInstance.focused).toBe(false, 'Expected list to not be focused.');
+
+                tagListInstance.disabled = true;
+                fixture.detectChanges();
+
+                tagListInstance.focus();
+                fixture.detectChanges();
+
+                expect(tagListInstance.focused).toBe(false, 'Expected list to continue not to be focused');
+            });
+
+            it('should remove the tabindex from the list if it is disabled', () => {
+                expect(tagListNativeElement.getAttribute('tabindex')).toBeTruthy();
+
+                tagListInstance.disabled = true;
+                fixture.detectChanges();
+
+                expect(tagListNativeElement.hasAttribute('tabindex')).toBeFalsy();
+            });
+
+            describe('on tag destroy', () => {
+
+                it('should focus the next item', () => {
+                    const array = tags.toArray();
+                    const midItem = array[2];
+
+                    // Focus the middle item
+                    midItem.focus();
+
+                    // Destroy the middle item
+                    testComponent.tags.splice(2, 1);
+                    fixture.detectChanges();
+
+                    // It focuses the 4th item (now at index 2)
+                    expect(manager.activeItemIndex).toEqual(2);
+                });
+
+                it('should focus the previous item', () => {
+                    const array = tags.toArray();
+                    const lastIndex = array.length - 1;
+                    const lastItem = array[lastIndex];
+
+                    // Focus the last item
+                    lastItem.focus();
+
+                    // Destroy the last item
+                    testComponent.tags.pop();
+                    fixture.detectChanges();
+
+                    // It focuses the next-to-last item
+                    expect(manager.activeItemIndex).toEqual(lastIndex - 1);
+                });
+
+                it('should not focus if tag list is not focused', () => {
+                    const array = tags.toArray();
+                    const midItem = array[2];
+
+                    // Focus and blur the middle item
+                    midItem.focus();
+                    midItem.blur();
+                    zone.simulateZoneExit();
+
+                    // Destroy the middle item
+                    testComponent.tags.splice(2, 1);
+                    fixture.detectChanges();
+
+                    // Should not have focus
+                    expect(tagListInstance.keyManager.activeItemIndex).toEqual(-1);
+                });
+
+                it('should move focus to the last tag when the focused tag was deleted inside a' +
+                    'component with animations', fakeAsync(() => {
+                    fixture.destroy();
+                    TestBed.resetTestingModule();
+                    fixture = createComponent(StandardTagListWithAnimations, [], BrowserAnimationsModule);
+                    fixture.detectChanges();
+
+                    tagListDebugElement = fixture.debugElement.query(By.directive(McTagList));
+                    tagListNativeElement = tagListDebugElement.nativeElement;
+                    tagListInstance = tagListDebugElement.componentInstance;
+                    testComponent = fixture.debugElement.componentInstance;
+                    tags = tagListInstance.tags;
+
+                    tags.last.focus();
+                    fixture.detectChanges();
+
+                    expect(tagListInstance.keyManager.activeItemIndex).toBe(tags.length - 1);
+
+                    dispatchKeyboardEvent(tags.last._elementRef.nativeElement, 'keydown', BACKSPACE);
+                    fixture.detectChanges();
+                    tick(500);
+
+                    expect(tagListInstance.keyManager.activeItemIndex).toBe(tags.length - 1);
+                }));
+
+            });
+        });
+
+        describe('keyboard behavior', () => {
+            describe('LTR (default)', () => {
+                beforeEach(() => {
+                    setupStandardList();
+                    manager = tagListInstance.keyManager;
+                });
+
+                it('should focus previous item when press LEFT ARROW', () => {
+                    const nativeTags = tagListNativeElement.querySelectorAll('mc-tag');
+                    const lastNativeChip = nativeTags[nativeTags.length - 1] as HTMLElement;
+
+                    const LEFT_EVENT = createKeyboardEvent('keydown', LEFT_ARROW, lastNativeChip);
+                    const array = tags.toArray();
+                    const lastIndex = array.length - 1;
+                    const lastItem = array[lastIndex];
+
+                    // Focus the last item in the array
+                    lastItem.focus();
+                    expect(manager.activeItemIndex).toEqual(lastIndex);
+
+                    // Press the LEFT arrow
+                    tagListInstance.keydown(LEFT_EVENT);
+                    tagListInstance.blur(); // Simulate focus leaving the list and going to the tag.
+                    fixture.detectChanges();
+
+                    // It focuses the next-to-last item
+                    expect(manager.activeItemIndex).toEqual(lastIndex - 1);
+                });
+
+                it('should focus next item when press RIGHT ARROW', () => {
+                    const nativeTags = tagListNativeElement.querySelectorAll('mc-tag');
+                    const firstNativeChip = nativeTags[0] as HTMLElement;
+
+                    const RIGHT_EVENT: KeyboardEvent = createKeyboardEvent('keydown', RIGHT_ARROW, firstNativeChip);
+                    const array = tags.toArray();
+                    const firstItem = array[0];
+
+                    // Focus the last item in the array
+                    firstItem.focus();
+                    expect(manager.activeItemIndex).toEqual(0);
+
+                    // Press the RIGHT arrow
+                    tagListInstance.keydown(RIGHT_EVENT);
+                    tagListInstance.blur(); // Simulate focus leaving the list and going to the tag.
+                    fixture.detectChanges();
+
+                    // It focuses the next-to-last item
+                    expect(manager.activeItemIndex).toEqual(1);
+                });
+
+                it('should not handle arrow key events from non-chip elements', () => {
+                    const event: KeyboardEvent = createKeyboardEvent('keydown', RIGHT_ARROW, tagListNativeElement);
+                    const initialActiveIndex = manager.activeItemIndex;
+
+                    tagListInstance.keydown(event);
+                    fixture.detectChanges();
+
+                    expect(manager.activeItemIndex)
+                        .toBe(initialActiveIndex, 'Expected focused item not to have changed.');
+                });
+
+                it('should focus the first item when pressing HOME', () => {
+                    const nativeTags = tagListNativeElement.querySelectorAll('mc-tag');
+                    const lastNativeChip = nativeTags[nativeTags.length - 1] as HTMLElement;
+                    const HOME_EVENT = createKeyboardEvent('keydown', HOME, lastNativeChip);
+                    const array = tags.toArray();
+                    const lastItem = array[array.length - 1];
+
+                    lastItem.focus();
+                    expect(manager.activeItemIndex).toBe(array.length - 1);
+
+                    tagListInstance.keydown(HOME_EVENT);
+                    fixture.detectChanges();
+
+                    expect(manager.activeItemIndex).toBe(0);
+                    expect(HOME_EVENT.defaultPrevented).toBe(true);
+                });
+
+                it('should focus the last item when pressing END', () => {
+                    const nativeTags = tagListNativeElement.querySelectorAll('mc-tag');
+                    const END_EVENT = createKeyboardEvent('keydown', END, nativeTags[0]);
+
+                    expect(manager.activeItemIndex).toBe(-1);
+
+                    tagListInstance.keydown(END_EVENT);
+                    fixture.detectChanges();
+
+                    expect(manager.activeItemIndex).toBe(tags.length - 1);
+                    expect(END_EVENT.defaultPrevented).toBe(true);
+                });
+
+            });
+
+            describe('RTL', () => {
+                beforeEach(() => {
+                    setupStandardList('rtl');
+                    manager = tagListInstance.keyManager;
+                });
+
+                it('should focus previous item when press RIGHT ARROW', () => {
+                    const nativeTags = tagListNativeElement.querySelectorAll('mc-tag');
+                    const lastNativeChip = nativeTags[nativeTags.length - 1] as HTMLElement;
+
+                    const RIGHT_EVENT: KeyboardEvent =
+                        createKeyboardEvent('keydown', RIGHT_ARROW, lastNativeChip);
+                    const array = tags.toArray();
+                    const lastIndex = array.length - 1;
+                    const lastItem = array[lastIndex];
+
+                    // Focus the last item in the array
+                    lastItem.focus();
+                    expect(manager.activeItemIndex).toEqual(lastIndex);
+
+                    // Press the RIGHT arrow
+                    tagListInstance.keydown(RIGHT_EVENT);
+                    tagListInstance.blur(); // Simulate focus leaving the list and going to the tag.
+                    fixture.detectChanges();
+
+                    // It focuses the next-to-last item
+                    expect(manager.activeItemIndex).toEqual(lastIndex - 1);
+                });
+
+                it('should focus next item when press LEFT ARROW', () => {
+                    const nativeTags = tagListNativeElement.querySelectorAll('mc-tag');
+                    const firstNativeChip = nativeTags[0] as HTMLElement;
+
+                    const LEFT_EVENT: KeyboardEvent =
+                        createKeyboardEvent('keydown', LEFT_ARROW, firstNativeChip);
+                    const array = tags.toArray();
+                    const firstItem = array[0];
+
+                    // Focus the last item in the array
+                    firstItem.focus();
+                    expect(manager.activeItemIndex).toEqual(0);
+
+                    // Press the LEFT arrow
+                    tagListInstance.keydown(LEFT_EVENT);
+                    tagListInstance.blur(); // Simulate focus leaving the list and going to the tag.
+                    fixture.detectChanges();
+
+                    // It focuses the next-to-last item
+                    expect(manager.activeItemIndex).toEqual(1);
+                });
+
+                it('should allow focus to escape when tabbing away', fakeAsync(() => {
+                    tagListInstance.keyManager.onKeydown(createKeyboardEvent('keydown', TAB));
+
+                    expect(tagListInstance._tabIndex)
+                        .toBe(-1, 'Expected tabIndex to be set to -1 temporarily.');
+
+                    tick();
+
+                    expect(tagListInstance._tabIndex).toBe(0, 'Expected tabIndex to be reset back to 0');
+                }));
+
+                it(`should use user defined tabIndex`, fakeAsync(() => {
+                    tagListInstance.tabIndex = 4;
+
+                    fixture.detectChanges();
+
+                    expect(tagListInstance._tabIndex)
+                        .toBe(4, 'Expected tabIndex to be set to user defined value 4.');
+
+                    tagListInstance.keyManager.onKeydown(createKeyboardEvent('keydown', TAB));
+
+                    expect(tagListInstance._tabIndex)
+                        .toBe(-1, 'Expected tabIndex to be set to -1 temporarily.');
+
+                    tick();
+
+                    expect(tagListInstance._tabIndex).toBe(4, 'Expected tabIndex to be reset back to 4');
+                }));
+            });
+
+            it('should account for the direction changing', () => {
+                setupStandardList();
+                manager = tagListInstance.keyManager;
+
+                const nativeTags = tagListNativeElement.querySelectorAll('mc-tag');
+                const firstNativeChip = nativeTags[0] as HTMLElement;
+
+                const RIGHT_EVENT: KeyboardEvent =
+                    createKeyboardEvent('keydown', RIGHT_ARROW, firstNativeChip);
+                const array = tags.toArray();
+                const firstItem = array[0];
+
+                firstItem.focus();
+                expect(manager.activeItemIndex).toBe(0);
+
+                tagListInstance.keydown(RIGHT_EVENT);
+                tagListInstance.blur();
+                fixture.detectChanges();
+
+                expect(manager.activeItemIndex).toBe(1);
+
+                dirChange.next('rtl');
+                fixture.detectChanges();
+
+                tagListInstance.keydown(RIGHT_EVENT);
+                tagListInstance.blur();
+                fixture.detectChanges();
+
+                expect(manager.activeItemIndex).toBe(0);
+            });
+        });
+    });
+
+    describe('FormFieldTagList', () => {
+
+        beforeEach(() => {
+            setupInputList();
+        });
+
+        describe('keyboard behavior', () => {
+            beforeEach(() => {
+                manager = tagListInstance.keyManager;
+            });
+
+            it('should maintain focus if the active tag is deleted', () => {
+                const secondTag = fixture.nativeElement.querySelectorAll('.mc-tag')[1];
+
+                secondTag.focus();
+                fixture.detectChanges();
+
+                expect(tagListInstance.tags.toArray().findIndex((tag) => tag.hasFocus)).toBe(1);
+
+                dispatchKeyboardEvent(secondTag, 'keydown', DELETE);
+                fixture.detectChanges();
+
+                expect(tagListInstance.tags.toArray().findIndex((tag) => tag.hasFocus)).toBe(1);
+            });
+
+            describe('when the input has focus', () => {
+
+                it('should not focus the last tag when press DELETE', () => {
+                    const nativeInput = fixture.nativeElement.querySelector('input');
+                    const DELETE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', DELETE, nativeInput);
+
+                    nativeInput.focus();
+                    expect(manager.activeItemIndex).toBe(-1);
+
+                    tagListInstance.keydown(DELETE_EVENT);
+                    fixture.detectChanges();
+
+                    // It doesn't focus the last tag
+                    expect(manager.activeItemIndex).toEqual(-1);
+                });
+
+                it('should focus the last tag when press BACKSPACE', () => {
+                    const nativeInput = fixture.nativeElement.querySelector('input');
+                    const BACKSPACE_EVENT: KeyboardEvent =
+                        createKeyboardEvent('keydown', BACKSPACE, nativeInput);
+
+                    // Focus the input
+                    nativeInput.focus();
+                    expect(manager.activeItemIndex).toBe(-1);
+
+                    // Press the BACKSPACE key
+                    tagListInstance.keydown(BACKSPACE_EVENT);
+                    fixture.detectChanges();
+
+                    // It focuses the last chip
+                    expect(manager.activeItemIndex).toEqual(tags.length - 1);
+                });
+
+            });
+        });
+
+        it('should complete the stateChanges stream on destroy', () => {
+            const spy = jasmine.createSpy('stateChanges complete');
+            const subscription = tagListInstance.stateChanges.subscribe(undefined, undefined, spy);
+
+            fixture.destroy();
+            expect(spy).toHaveBeenCalled();
+            subscription.unsubscribe();
+        });
+
+        xit('should point the label id to the tag input', () => {
+            const label = fixture.nativeElement.querySelector('label');
+            const input = fixture.nativeElement.querySelector('input');
+
+            fixture.detectChanges();
+
+            expect(label.getAttribute('for')).toBeTruthy();
+            expect(label.getAttribute('for')).toBe(input.getAttribute('id'));
+            expect(label.getAttribute('aria-owns')).toBe(input.getAttribute('id'));
+        });
+
+    });
+
+    describe('with tag remove', () => {
+        let tagList: McTagList;
+        let chipRemoveDebugElements: DebugElement[];
+
+        beforeEach(() => {
+            fixture = createComponent(TagListWithRemove);
+            fixture.detectChanges();
+
+            tagList = fixture.debugElement.query(By.directive(McTagList)).componentInstance;
+            chipRemoveDebugElements = fixture.debugElement.queryAll(By.directive(McTagRemove));
+            tags = tagList.tags;
+        });
+
+        it('should properly focus next item if tag is removed through click', () => {
+            tags.toArray()[2].focus();
+
+            // Destroy the third focused tag by dispatching a bubbling click event on the
+            // associated tag remove element.
+            dispatchMouseEvent(chipRemoveDebugElements[2].nativeElement, 'click');
+            fixture.detectChanges();
+
+            expect(tags.toArray()[2].value).not.toBe(2, 'Expected the third tag to be removed.');
+            expect(tagList.keyManager.activeItemIndex).toBe(2);
+        });
+    });
+
+    describe('selection logic', () => {
+        let formField: HTMLElement;
+        let nativeTags: HTMLElement[];
+
+        beforeEach(() => {
+            fixture = createComponent(BasicTagList);
+            fixture.detectChanges();
+
+            formField = fixture.debugElement.query(By.css('.mc-form-field')).nativeElement;
+            nativeTags = fixture.debugElement.queryAll(By.css('mc-tag'))
+                .map((tag) => tag.nativeElement);
+
+            tagListDebugElement = fixture.debugElement.query(By.directive(McTagList));
+            tagListInstance = tagListDebugElement.componentInstance;
+            tags = tagListInstance.tags;
+        });
+
+        it('should remove selection if tag has been removed', fakeAsync(() => {
+            const instanceTags = fixture.componentInstance.tags;
+            const tagList = fixture.componentInstance.tagList;
+            const firstTag = nativeTags[0];
+            dispatchKeyboardEvent(firstTag, 'keydown', SPACE);
+            fixture.detectChanges();
+
+            expect(instanceTags.first.selected).toBe(true, 'Expected first option to be selected.');
+            expect(tagList.selected).toBe(tags.first, 'Expected first option to be selected.');
+
+            fixture.componentInstance.foods = [];
+            fixture.detectChanges();
+            tick();
+
+            expect(tagList.selected)
+                .toBe(undefined, 'Expected selection to be removed when option no longer exists.');
+        }));
+
+
+        it('should select an option that was added after initialization', () => {
+            fixture.componentInstance.foods.push({ viewValue: 'Potatoes', value: 'potatoes-8' });
+            fixture.detectChanges();
+
+            nativeTags = fixture.debugElement.queryAll(By.css('mc-tag'))
+                .map((tag) => tag.nativeElement);
+            const lastChip = nativeTags[8];
+            dispatchKeyboardEvent(lastChip, 'keydown', SPACE);
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.tagList.value)
+                .toContain('potatoes-8', 'Expect value contain the value of the last option');
+            expect(fixture.componentInstance.tags.last.selected)
+                .toBeTruthy('Expect last option selected');
+        });
+
+        it('should not select disabled tags', () => {
+            const array = tags.toArray();
+            const disabledTag = nativeTags[2];
+            dispatchKeyboardEvent(disabledTag, 'keydown', SPACE);
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.tagList.value)
+                .toBeUndefined('Expect value to be undefined');
+            expect(array[2].selected).toBeFalsy('Expect disabled tag not selected');
+            expect(fixture.componentInstance.tagList.selected)
+                .toBeUndefined('Expect no selected tags');
+        });
+
+    });
+
+    describe('forms integration', () => {
+        let nativeTags: HTMLElement[];
+
+        describe('single selection', () => {
+            beforeEach(() => {
+                fixture = createComponent(BasicTagList);
+                fixture.detectChanges();
+
+                nativeTags = fixture.debugElement.queryAll(By.css('mc-tag'))
+                    .map((tag) => tag.nativeElement);
+                tags = fixture.componentInstance.tags;
+            });
+
+            it('should take an initial view value with reactive forms', () => {
+                fixture.componentInstance.control = new FormControl('pizza-1');
+                fixture.detectChanges();
+
+                const array = tags.toArray();
+
+                expect(array[1].selected).toBeTruthy('Expect pizza-1 tag to be selected');
+
+                dispatchKeyboardEvent(nativeTags[1], 'keydown', SPACE);
+                fixture.detectChanges();
+
+                expect(array[1].selected).toBeFalsy('Expect tag to be not selected after toggle selected');
+            });
+
+            it('should set the view value from the form', () => {
+                const tagList = fixture.componentInstance.tagList;
+                const array = tags.toArray();
+
+                expect(tagList.value).toBeFalsy('Expect tag list to have no initial value');
+
+                fixture.componentInstance.control.setValue('pizza-1');
+                fixture.detectChanges();
+
+                expect(array[1].selected).toBeTruthy('Expect tag to be selected');
+            });
+
+            it('should update the form value when the view changes', () => {
+
+                expect(fixture.componentInstance.control.value)
+                    .toEqual(null, `Expected the control's value to be empty initially.`);
+
+                dispatchKeyboardEvent(nativeTags[0], 'keydown', SPACE);
+                fixture.detectChanges();
+
+                expect(fixture.componentInstance.control.value)
+                    .toEqual('steak-0', `Expected control's value to be set to the new option.`);
+            });
+
+            it('should clear the selection when a nonexistent option value is selected', () => {
+                const array = tags.toArray();
+
+                fixture.componentInstance.control.setValue('pizza-1');
+                fixture.detectChanges();
+
+                expect(array[1].selected)
+                    .toBeTruthy(`Expected tag with the value to be selected.`);
+
+                fixture.componentInstance.control.setValue('gibberish');
+
+                fixture.detectChanges();
+
+                expect(array[1].selected)
+                    .toBeFalsy(`Expected tag with the old value not to be selected.`);
+            });
+
+
+            it('should clear the selection when the control is reset', () => {
+                const array = tags.toArray();
+
+                fixture.componentInstance.control.setValue('pizza-1');
+                fixture.detectChanges();
+
+                fixture.componentInstance.control.reset();
+                fixture.detectChanges();
+
+                expect(array[1].selected)
+                    .toBeFalsy(`Expected tag with the old value not to be selected.`);
+            });
+
+            it('should set the control to touched when the tag list is touched', () => {
+                expect(fixture.componentInstance.control.touched)
+                    .toBe(false, 'Expected the control to start off as untouched.');
+
+                const nativeTagList = fixture.debugElement.query(By.css('.mc-tag-list')).nativeElement;
+                dispatchFakeEvent(nativeTagList, 'blur');
+
+                expect(fixture.componentInstance.control.touched)
+                    .toBe(true, 'Expected the control to be touched.');
+            });
+
+            it('should not set touched when a disabled tag list is touched', () => {
+                expect(fixture.componentInstance.control.touched)
+                    .toBe(false, 'Expected the control to start off as untouched.');
+
+                fixture.componentInstance.control.disable();
+                const nativeTagList = fixture.debugElement.query(By.css('.mc-tag-list')).nativeElement;
+                dispatchFakeEvent(nativeTagList, 'blur');
+
+                expect(fixture.componentInstance.control.touched)
+                    .toBe(false, 'Expected the control to stay untouched.');
+            });
+
+            it('should set the control to dirty when the tag list\'s value changes in the DOM', () => {
+                expect(fixture.componentInstance.control.dirty)
+                    .toEqual(false, `Expected control to start out pristine.`);
+
+                dispatchKeyboardEvent(nativeTags[1], 'keydown', SPACE);
+                fixture.detectChanges();
+
+                expect(fixture.componentInstance.control.dirty)
+                    .toEqual(true, `Expected control to be dirty after value was changed by user.`);
+            });
+
+            it('should not set the control to dirty when the value changes programmatically', () => {
+                expect(fixture.componentInstance.control.dirty)
+                    .toEqual(false, `Expected control to start out pristine.`);
+
+                fixture.componentInstance.control.setValue('pizza-1');
+
+                expect(fixture.componentInstance.control.dirty)
+                    .toEqual(false, `Expected control to stay pristine after programmatic change.`);
+            });
+
+
+            xit('should set an asterisk after the placeholder if the control is required', () => {
+                let requiredMarker = fixture.debugElement.query(By.css('.mc-form-field-required-marker'));
+                expect(requiredMarker)
+                    .toBeNull(`Expected placeholder not to have an asterisk, as control was not required.`);
+
+                fixture.componentInstance.isRequired = true;
+                fixture.detectChanges();
+
+                requiredMarker = fixture.debugElement.query(By.css('.mc-form-field-required-marker'));
+                expect(requiredMarker)
+                    .not.toBeNull(`Expected placeholder to have an asterisk, as control was required.`);
+            });
+
+            it('should be able to programmatically select a falsy option', () => {
+                fixture.destroy();
+                TestBed.resetTestingModule();
+
+                const falsyFixture = createComponent(FalsyValueTagList);
+                falsyFixture.detectChanges();
+
+                falsyFixture.componentInstance.control.setValue([0]);
+                falsyFixture.detectChanges();
+                falsyFixture.detectChanges();
+
+                expect(falsyFixture.componentInstance.tags.first.selected)
+                    .toBe(true, 'Expected first option to be selected');
+            });
+
+            it('should not focus the active tag when the value is set programmatically', () => {
+                const chipArray = fixture.componentInstance.tags.toArray();
+
+                spyOn(chipArray[4], 'focus').and.callThrough();
+
+                fixture.componentInstance.control.setValue('tags-4');
+                fixture.detectChanges();
+
+                expect(chipArray[4].focus).not.toHaveBeenCalled();
+            });
+
+            it('should blur the form field when the active tag is blurred', fakeAsync(() => {
+                const formField: HTMLElement = fixture.nativeElement.querySelector('.mc-form-field');
+
+                nativeTags[0].focus();
+                fixture.detectChanges();
+
+                expect(formField.classList).toContain('mc-focused');
+
+                nativeTags[0].blur();
+                fixture.detectChanges();
+                zone.simulateZoneExit();
+                fixture.detectChanges();
+
+                expect(formField.classList).not.toContain('mc-focused');
+            }));
+        });
+
+        xdescribe('multiple selection', () => {
+            beforeEach(() => {
+                fixture = createComponent(MultiSelectionTagList);
+                fixture.detectChanges();
+
+                nativeTags = fixture.debugElement.queryAll(By.css('mc-tag'))
+                    .map((tag) => tag.nativeElement);
+                tags = fixture.componentInstance.tags;
+            });
+
+            it('should take an initial view value with reactive forms', () => {
+                fixture.componentInstance.control = new FormControl(['pizza-1']);
+                fixture.detectChanges();
+
+                const array = tags.toArray();
+
+                expect(array[1].selected).toBeTruthy('Expect pizza-1 tag to be selected');
+
+                dispatchKeyboardEvent(nativeTags[1], 'keydown', SPACE);
+                fixture.detectChanges();
+
+                expect(array[1].selected).toBeFalsy('Expect tag to be not selected after toggle selected');
+            });
+
+            it('should set the view value from the form', () => {
+                const tagList = fixture.componentInstance.tagList;
+                const array = tags.toArray();
+
+                expect(tagList.value).toBeFalsy('Expect tag list to have no initial value');
+
+                fixture.componentInstance.control.setValue(['pizza-1']);
+                fixture.detectChanges();
+
+                expect(array[1].selected).toBeTruthy('Expect tag to be selected');
+            });
+
+            it('should update the form value when the view changes', () => {
+
+                expect(fixture.componentInstance.control.value)
+                    .toEqual(null, `Expected the control's value to be empty initially.`);
+
+                dispatchKeyboardEvent(nativeTags[0], 'keydown', SPACE);
+                fixture.detectChanges();
+
+                expect(fixture.componentInstance.control.value)
+                    .toEqual(['steak-0'], `Expected control's value to be set to the new option.`);
+            });
+
+            it('should clear the selection when a nonexistent option value is selected', () => {
+                const array = tags.toArray();
+
+                fixture.componentInstance.control.setValue(['pizza-1']);
+                fixture.detectChanges();
+
+                expect(array[1].selected)
+                    .toBeTruthy(`Expected tag with the value to be selected.`);
+
+                fixture.componentInstance.control.setValue(['gibberish']);
+
+                fixture.detectChanges();
+
+                expect(array[1].selected)
+                    .toBeFalsy(`Expected tag with the old value not to be selected.`);
+            });
+
+
+            it('should clear the selection when the control is reset', () => {
+                const array = tags.toArray();
+
+                fixture.componentInstance.control.setValue(['pizza-1']);
+                fixture.detectChanges();
+
+                fixture.componentInstance.control.reset();
+                fixture.detectChanges();
+
+                expect(array[1].selected)
+                    .toBeFalsy(`Expected tag with the old value not to be selected.`);
+            });
+        });
+    });
+
+    describe('tag list with tag input', () => {
+        let nativeTags: HTMLElement[];
+
+        beforeEach(() => {
+            fixture = createComponent(InputTagList);
+            fixture.detectChanges();
+
+            nativeTags = fixture.debugElement.queryAll(By.css('mc-tag'))
+                .map((tag) => tag.nativeElement);
+        });
+
+        it('should take an initial view value with reactive forms', () => {
+            fixture.componentInstance.control = new FormControl(['pizza-1']);
+            fixture.detectChanges();
+
+            const array = fixture.componentInstance.tags.toArray();
+
+            expect(array[1].selected).toBeTruthy('Expect pizza-1 tag to be selected');
+
+            dispatchKeyboardEvent(nativeTags[1], 'keydown', SPACE);
+            fixture.detectChanges();
+
+            expect(array[1].selected).toBeFalsy('Expect tag to be not selected after toggle selected');
+        });
+
+        it('should set the view value from the form', () => {
+            const array = fixture.componentInstance.tags.toArray();
+
+            expect(array[1].selected).toBeFalsy('Expect tag to not be selected');
+
+            fixture.componentInstance.control.setValue(['pizza-1']);
+            fixture.detectChanges();
+
+            expect(array[1].selected).toBeTruthy('Expect tag to be selected');
+        });
+
+        it('should update the form value when the view changes', () => {
+
+            expect(fixture.componentInstance.control.value)
+                .toEqual(null, `Expected the control's value to be empty initially.`);
+
+            dispatchKeyboardEvent(nativeTags[0], 'keydown', SPACE);
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.control.value)
+                .toEqual(['steak-0'], `Expected control's value to be set to the new option.`);
+        });
+
+        it('should clear the selection when a nonexistent option value is selected', () => {
+            const array = fixture.componentInstance.tags.toArray();
+
+            fixture.componentInstance.control.setValue(['pizza-1']);
+            fixture.detectChanges();
+
+            expect(array[1].selected)
+                .toBeTruthy(`Expected tag with the value to be selected.`);
+
+            fixture.componentInstance.control.setValue(['gibberish']);
+
+            fixture.detectChanges();
+
+            expect(array[1].selected)
+                .toBeFalsy(`Expected tag with the old value not to be selected.`);
+        });
+
+
+        it('should clear the selection when the control is reset', () => {
+            const array = fixture.componentInstance.tags.toArray();
+
+            fixture.componentInstance.control.setValue(['pizza-1']);
+            fixture.detectChanges();
+
+            fixture.componentInstance.control.reset();
+            fixture.detectChanges();
+
+            expect(array[1].selected)
+                .toBeFalsy(`Expected tag with the old value not to be selected.`);
+        });
+
+        it('should set the control to touched when the tag list is touched', fakeAsync(() => {
+            expect(fixture.componentInstance.control.touched)
+                .toBe(false, 'Expected the control to start off as untouched.');
+
+            const nativeTagList = fixture.debugElement.query(By.css('.mc-tag-list')).nativeElement;
+
+            dispatchFakeEvent(nativeTagList, 'blur');
+            tick();
+
+            expect(fixture.componentInstance.control.touched)
+                .toBe(true, 'Expected the control to be touched.');
+        }));
+
+        it('should not set touched when a disabled tag list is touched', () => {
+            expect(fixture.componentInstance.control.touched)
+                .toBe(false, 'Expected the control to start off as untouched.');
+
+            fixture.componentInstance.control.disable();
+            const nativeTagList = fixture.debugElement.query(By.css('.mc-tag-list')).nativeElement;
+            dispatchFakeEvent(nativeTagList, 'blur');
+
+            expect(fixture.componentInstance.control.touched)
+                .toBe(false, 'Expected the control to stay untouched.');
+        });
+
+        it('should set the control to dirty when the tag list\'s value changes in the DOM', () => {
+            expect(fixture.componentInstance.control.dirty)
+                .toEqual(false, `Expected control to start out pristine.`);
+
+            dispatchKeyboardEvent(nativeTags[1], 'keydown', SPACE);
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.control.dirty)
+                .toEqual(true, `Expected control to be dirty after value was changed by user.`);
+        });
+
+        it('should not set the control to dirty when the value changes programmatically', () => {
+            expect(fixture.componentInstance.control.dirty)
+                .toEqual(false, `Expected control to start out pristine.`);
+
+            fixture.componentInstance.control.setValue(['pizza-1']);
+
+            expect(fixture.componentInstance.control.dirty)
+                .toEqual(false, `Expected control to stay pristine after programmatic change.`);
+        });
+
+
+        xit('should set an asterisk after the placeholder if the control is required', () => {
+            let requiredMarker = fixture.debugElement.query(By.css('.mc-form-field-required-marker'));
+            expect(requiredMarker)
+                .toBeNull(`Expected placeholder not to have an asterisk, as control was not required.`);
+
+            fixture.componentInstance.isRequired = true;
+            fixture.detectChanges();
+
+            requiredMarker = fixture.debugElement.query(By.css('.mc-form-field-required-marker'));
+            expect(requiredMarker)
+                .not.toBeNull(`Expected placeholder to have an asterisk, as control was required.`);
+        });
+
+        it('should keep focus on the input after adding the first chip', fakeAsync(() => {
+            const nativeInput = fixture.nativeElement.querySelector('input');
+            const chipEls = Array.from<HTMLElement>(
+                fixture.nativeElement.querySelectorAll('.mc-tag')).reverse();
+
+            // Remove the tags via backspace to simulate the user removing them.
+            chipEls.forEach((tag) => {
+                tag.focus();
+                dispatchKeyboardEvent(tag, 'keydown', BACKSPACE);
+                fixture.detectChanges();
+                tick();
+            });
+
+            nativeInput.focus();
+            expect(fixture.componentInstance.foods).toEqual([], 'Expected all tags to be removed.');
+            expect(document.activeElement).toBe(nativeInput, 'Expected input to be focused.');
+
+            typeInElement('123', nativeInput);
+            fixture.detectChanges();
+            dispatchKeyboardEvent(nativeInput, 'keydown', ENTER);
+            fixture.detectChanges();
+            tick();
+
+            expect(document.activeElement).toBe(nativeInput, 'Expected input to remain focused.');
+        }));
+
+        it('should set aria-invalid if the form field is invalid', () => {
+            fixture.componentInstance.control = new FormControl(undefined, [Validators.required]);
+            fixture.detectChanges();
+
+            const input: HTMLInputElement = fixture.nativeElement.querySelector('input');
+
+            expect(input.getAttribute('aria-invalid')).toBe('true');
+
+            fixture.componentInstance.tags.first.selectViaInteraction();
+            fixture.detectChanges();
+
+            expect(input.getAttribute('aria-invalid')).toBe('false');
+        });
+
+        describe('keyboard behavior', () => {
+            beforeEach(() => {
+                tagListDebugElement = fixture.debugElement.query(By.directive(McTagList));
+                tagListInstance = tagListDebugElement.componentInstance;
+                tags = tagListInstance.tags;
+                manager = fixture.componentInstance.tagList.keyManager;
+            });
+
+            describe('when the input has focus', () => {
+
+                it('should not focus the last tag when press DELETE', () => {
+                    const nativeInput = fixture.nativeElement.querySelector('input');
+                    const DELETE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', DELETE, nativeInput);
+
+                    // Focus the input
+                    nativeInput.focus();
+                    expect(manager.activeItemIndex).toBe(-1);
+
+                    // Press the DELETE key
+                    tagListInstance.keydown(DELETE_EVENT);
+                    fixture.detectChanges();
+
+                    // It doesn't focus the last chip
+                    expect(manager.activeItemIndex).toEqual(-1);
+                });
+
+                it('should focus the last tag when press BACKSPACE', () => {
+                    const nativeInput = fixture.nativeElement.querySelector('input');
+                    const BACKSPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', BACKSPACE, nativeInput);
+
+                    // Focus the input
+                    nativeInput.focus();
+                    expect(manager.activeItemIndex).toBe(-1);
+
+                    // Press the BACKSPACE key
+                    tagListInstance.keydown(BACKSPACE_EVENT);
+                    fixture.detectChanges();
+
+                    // It focuses the last chip
+                    expect(manager.activeItemIndex).toEqual(tags.length - 1);
+                });
+
+            });
+        });
+    });
+
+    xdescribe('error messages', () => {
+        let errorTestComponent: TagListWithFormErrorMessages;
+        let containerEl: HTMLElement;
+        let tagListEl: HTMLElement;
+
+        beforeEach(() => {
+            fixture = createComponent(TagListWithFormErrorMessages);
+            fixture.detectChanges();
+            errorTestComponent = fixture.componentInstance;
+            containerEl = fixture.debugElement.query(By.css('mc-form-field')).nativeElement;
+            tagListEl = fixture.debugElement.query(By.css('mc-tag-list')).nativeElement;
+        });
+
+        it('should not show any errors if the user has not interacted', () => {
+            expect(errorTestComponent.formControl.untouched)
+                .toBe(true, 'Expected untouched form control');
+            expect(containerEl.querySelectorAll('mc-error').length).toBe(0, 'Expected no error message');
+            expect(tagListEl.getAttribute('aria-invalid'))
+                .toBe('false', 'Expected aria-invalid to be set to "false".');
+        });
+
+        it('should display an error message when the list is touched and invalid', fakeAsync(() => {
+            expect(errorTestComponent.formControl.invalid)
+                .toBe(true, 'Expected form control to be invalid');
+            expect(containerEl.querySelectorAll('mc-error').length)
+                .toBe(0, 'Expected no error message');
+
+            errorTestComponent.formControl.markAsTouched();
+            fixture.detectChanges();
+            tick();
+
+            expect(containerEl.classList)
+                .toContain('mc-form-field-invalid', 'Expected container to have the invalid CSS class.');
+            expect(containerEl.querySelectorAll('mc-error').length)
+                .toBe(1, 'Expected one error message to have been rendered.');
+            expect(tagListEl.getAttribute('aria-invalid'))
+                .toBe('true', 'Expected aria-invalid to be set to "true".');
+        }));
+
+        it('should display an error message when the parent form is submitted', fakeAsync(() => {
+            expect(errorTestComponent.form.submitted)
+                .toBe(false, 'Expected form not to have been submitted');
+            expect(errorTestComponent.formControl.invalid)
+                .toBe(true, 'Expected form control to be invalid');
+            expect(containerEl.querySelectorAll('mc-error').length).toBe(0, 'Expected no error message');
+
+            dispatchFakeEvent(fixture.debugElement.query(By.css('form')).nativeElement, 'submit');
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                expect(errorTestComponent.form.submitted)
+                    .toBe(true, 'Expected form to have been submitted');
+                expect(containerEl.classList)
+                    .toContain('mc-form-field-invalid', 'Expected container to have the invalid CSS class.');
+                expect(containerEl.querySelectorAll('mc-error').length)
+                    .toBe(1, 'Expected one error message to have been rendered.');
+                expect(tagListEl.getAttribute('aria-invalid'))
+                    .toBe('true', 'Expected aria-invalid to be set to "true".');
+            });
+        }));
+
+        it('should hide the errors and show the hints once the tag list becomes valid',
+            fakeAsync(() => {
+                errorTestComponent.formControl.markAsTouched();
+                fixture.detectChanges();
+
+                fixture.whenStable().then(() => {
+                    expect(containerEl.classList)
+                        .toContain('mc-form-field-invalid', 'Expected container to have the invalid CSS class.');
+                    expect(containerEl.querySelectorAll('mc-error').length)
+                        .toBe(1, 'Expected one error message to have been rendered.');
+                    expect(containerEl.querySelectorAll('mc-hint').length)
+                        .toBe(0, 'Expected no hints to be shown.');
+
+                    errorTestComponent.formControl.setValue('something');
+                    fixture.detectChanges();
+
+                    fixture.whenStable().then(() => {
+                        expect(containerEl.classList).not.toContain('mc-form-field-invalid',
+                            'Expected container not to have the invalid class when valid.');
+                        expect(containerEl.querySelectorAll('mc-error').length)
+                            .toBe(0, 'Expected no error messages when the input is valid.');
+                        expect(containerEl.querySelectorAll('mc-hint').length)
+                            .toBe(1, 'Expected one hint to be shown once the input is valid.');
+                    });
+                });
+            }));
+
+        it('should set the proper role on the error messages', () => {
+            errorTestComponent.formControl.markAsTouched();
+            fixture.detectChanges();
+
+            expect(containerEl.querySelector('mc-error')!.getAttribute('role')).toBe('alert');
+        });
+
+        it('sets the aria-describedby to reference errors when in error state', () => {
+            const hintId = fixture.debugElement
+                .query(By.css('.mc-hint'))
+                .nativeElement.getAttribute('id');
+            let describedBy = tagListEl.getAttribute('aria-describedby');
+
+            expect(hintId).toBeTruthy('hint should be shown');
+            expect(describedBy).toBe(hintId);
+
+            fixture.componentInstance.formControl.markAsTouched();
+            fixture.detectChanges();
+
+            const errorIds = fixture.debugElement.queryAll(By.css('.mc-error'))
+                .map((el) => el.nativeElement.getAttribute('id')).join(' ');
+            describedBy = tagListEl.getAttribute('aria-describedby');
+
+            expect(errorIds).toBeTruthy('errors should be shown');
+            expect(describedBy).toBe(errorIds);
+        });
+    });
+
+    function createComponent<T>(component: Type<T>, providers: Provider[] = [], animationsModule:
+        Type<NoopAnimationsModule> | Type<BrowserAnimationsModule> = NoopAnimationsModule):
+        ComponentFixture<T> {
+        TestBed.configureTestingModule({
+            imports: [
+                FormsModule,
+                ReactiveFormsModule,
+                McTagsModule,
+                McFormFieldModule,
+                McInputModule,
+                animationsModule
+            ],
+            declarations: [component],
+            providers: [
+                { provide: NgZone, useFactory: () => zone = new MockNgZone() },
+                ...providers
+            ]
+        }).compileComponents();
+
+        return TestBed.createComponent<T>(component);
+    }
+
+    function setupStandardList(direction: Direction = 'ltr') {
+        dirChange = new Subject();
+        fixture = createComponent(StandardTagList, [{
+            provide: Directionality, useFactory: () => ({
+                value: direction.toLowerCase(),
+                change: dirChange
+            })
+        }]);
+        fixture.detectChanges();
+
+        tagListDebugElement = fixture.debugElement.query(By.directive(McTagList));
+        tagListNativeElement = tagListDebugElement.nativeElement;
+        tagListInstance = tagListDebugElement.componentInstance;
+        testComponent = fixture.debugElement.componentInstance;
+        tags = tagListInstance.tags;
+    }
+
+    function setupInputList() {
+        fixture = createComponent(FormFieldTagList);
+        fixture.detectChanges();
+
+        tagListDebugElement = fixture.debugElement.query(By.directive(McTagList));
+        tagListNativeElement = tagListDebugElement.nativeElement;
+        tagListInstance = tagListDebugElement.componentInstance;
+        testComponent = fixture.debugElement.componentInstance;
+        tags = tagListInstance.tags;
+    }
+
+});
+
+@Component({
+    template: `
+        <mc-tag-list [tabIndex]="tabIndex" [selectable]="selectable">
+            <mc-tag *ngFor="let i of tags" (select)="chipSelect(i)" (deselect)="chipDeselect(i)">
+                {{name}} {{i + 1}}
+            </mc-tag>
+        </mc-tag-list>`
+})
+class StandardTagList {
+    name: string = 'Test';
+    selectable: boolean = true;
+    tabIndex: number = 0;
+    tags = [0, 1, 2, 3, 4];
+
+    chipSelect: (index?: number) => void = () => {};
+    chipDeselect: (index?: number) => void = () => {};
+}
+
+@Component({
+    template: `
+        <mc-form-field>
+            <mc-tag-list #tagList>
+                <mc-tag *ngFor="let tag of tags" (removed)="remove(tag)">{{ tag }}</mc-tag>
+            </mc-tag-list>
+            <input name="test" [mcTagInputFor]="tagList"/>
+        </mc-form-field>
+    `
+})
+class FormFieldTagList {
+    tags = ['Chip 0', 'Chip 1', 'Chip 2'];
+
+    remove(chip: string) {
+        const index = this.tags.indexOf(chip);
+
+        if (index > -1) {
+            this.tags.splice(index, 1);
+        }
+    }
+}
+
+
+@Component({
+    selector: 'basic-tag-list',
+    template: `
+        <mc-form-field>
+            <mc-tag-list placeholder="Food" [formControl]="control" [required]="isRequired"
+                           [tabIndex]="tabIndexOverride" [selectable]="selectable">
+                <mc-tag *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
+                    {{ food.viewValue }}
+                </mc-tag>
+            </mc-tag-list>
+        </mc-form-field>
+    `
+})
+class BasicTagList {
+    foods: any[] = [
+        { value: 'steak-0', viewValue: 'Steak' },
+        { value: 'pizza-1', viewValue: 'Pizza' },
+        { value: 'tacos-2', viewValue: 'Tacos', disabled: true },
+        { value: 'sandwich-3', viewValue: 'Sandwich' },
+        { value: 'tags-4', viewValue: 'Chips' },
+        { value: 'eggs-5', viewValue: 'Eggs' },
+        { value: 'pasta-6', viewValue: 'Pasta' },
+        { value: 'sushi-7', viewValue: 'Sushi' }
+    ];
+    control = new FormControl();
+    isRequired: boolean;
+    tabIndexOverride: number;
+    selectable: boolean;
+
+    @ViewChild(McTagList) tagList: McTagList;
+    @ViewChildren(McTag) tags: QueryList<McTag>;
+}
+
+
+@Component({
+    selector: 'multi-selection-tag-list',
+    template: `
+        <mc-form-field>
+            <mc-tag-list [multiple]="true" placeholder="Food" [formControl]="control"
+                           [required]="isRequired"
+                           [tabIndex]="tabIndexOverride" [selectable]="selectable">
+                <mc-tag *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
+                    {{ food.viewValue }}
+                </mc-tag>
+            </mc-tag-list>
+        </mc-form-field>
+    `
+})
+class MultiSelectionTagList {
+    foods: any[] = [
+        { value: 'steak-0', viewValue: 'Steak' },
+        { value: 'pizza-1', viewValue: 'Pizza' },
+        { value: 'tacos-2', viewValue: 'Tacos', disabled: true },
+        { value: 'sandwich-3', viewValue: 'Sandwich' },
+        { value: 'tags-4', viewValue: 'Chips' },
+        { value: 'eggs-5', viewValue: 'Eggs' },
+        { value: 'pasta-6', viewValue: 'Pasta' },
+        { value: 'sushi-7', viewValue: 'Sushi' }
+    ];
+    control = new FormControl();
+    isRequired: boolean;
+    tabIndexOverride: number;
+    selectable: boolean;
+
+    @ViewChild(McTagList) tagList: McTagList;
+    @ViewChildren(McTag) tags: QueryList<McTag>;
+}
+
+@Component({
+    selector: 'input-tag-list',
+    template: `
+        <mc-form-field>
+            <mc-tag-list [multiple]="true"
+                           placeholder="Food" [formControl]="control" [required]="isRequired" #tagList1>
+                <mc-tag *ngFor="let food of foods" [value]="food.value" (removed)="remove(food)">
+                    {{ food.viewValue }}
+                </mc-tag>
+            </mc-tag-list>
+            <input placeholder="New food..."
+                   [mcTagInputFor]="tagList1"
+                   [mcTagInputSeparatorKeyCodes]="separatorKeyCodes"
+                   [mcTagInputAddOnBlur]="addOnBlur"
+                   (mcTagInputTokenEnd)="add($event)"/>/>
+        </mc-form-field>
+    `
+})
+class InputTagList {
+    foods: any[] = [
+        { value: 'steak-0', viewValue: 'Steak' },
+        { value: 'pizza-1', viewValue: 'Pizza' },
+        { value: 'tacos-2', viewValue: 'Tacos', disabled: true },
+        { value: 'sandwich-3', viewValue: 'Sandwich' },
+        { value: 'tags-4', viewValue: 'Chips' },
+        { value: 'eggs-5', viewValue: 'Eggs' },
+        { value: 'pasta-6', viewValue: 'Pasta' },
+        { value: 'sushi-7', viewValue: 'Sushi' }
+    ];
+    control = new FormControl();
+
+    separatorKeyCodes = [ENTER, SPACE];
+    addOnBlur: boolean = true;
+    isRequired: boolean;
+
+    @ViewChild(McTagList) tagList: McTagList;
+    @ViewChildren(McTag) tags: QueryList<McTag>;
+
+    add(event: McTagInputEvent): void {
+        const input = event.input;
+        const value = event.value;
+
+        // Add our foods
+        if ((value || '').trim()) {
+            this.foods.push({
+                value: `${value.trim().toLowerCase()}-${this.foods.length}`,
+                viewValue: value.trim()
+            });
+        }
+
+        // Reset the input value
+        if (input) {
+            input.value = '';
+        }
+    }
+
+    remove(food: any): void {
+        const index = this.foods.indexOf(food);
+
+        if (index > -1) {
+            this.foods.splice(index, 1);
+        }
+    }
+}
+
+@Component({
+    template: `
+        <mc-form-field>
+            <mc-tag-list [formControl]="control">
+                <mc-tag *ngFor="let food of foods" [value]="food.value">{{ food.viewValue }}</mc-tag>
+            </mc-tag-list>
+        </mc-form-field>
+    `
+})
+class FalsyValueTagList {
+    foods: any[] = [
+        { value: 0, viewValue: 'Steak' },
+        { value: 1, viewValue: 'Pizza' }
+    ];
+    control = new FormControl();
+    @ViewChildren(McTag) tags: QueryList<McTag>;
+}
+
+@Component({
+    template: `
+        <mc-tag-list>
+            <mc-tag *ngFor="let food of foods" [value]="food.value" [selected]="food.selected">
+                {{ food.viewValue }}
+            </mc-tag>
+        </mc-tag-list>
+    `
+})
+class SelectedTagList {
+    foods: any[] = [
+        { value: 0, viewValue: 'Steak', selected: true },
+        { value: 1, viewValue: 'Pizza', selected: false },
+        { value: 2, viewValue: 'Pasta', selected: true }
+    ];
+    @ViewChildren(McTag) tags: QueryList<McTag>;
+}
+
+@Component({
+    template: `
+        <form #form="ngForm" novalidate>
+            <mc-form-field>
+                <mc-tag-list [formControl]="formControl">
+                    <mc-tag *ngFor="let food of foods" [value]="food.value" [selected]="food.selected">
+                        {{food.viewValue}}
+                    </mc-tag>
+                </mc-tag-list>
+                <mc-hint>Please select a chip, or type to add a new chip</mc-hint>
+<!--                <mc-error>Should have value</mc-error>-->
+            </mc-form-field>
+        </form>
+    `
+})
+class TagListWithFormErrorMessages {
+    foods: any[] = [
+        { value: 0, viewValue: 'Steak', selected: true },
+        { value: 1, viewValue: 'Pizza', selected: false },
+        { value: 2, viewValue: 'Pasta', selected: true }
+    ];
+
+    formControl = new FormControl('', Validators.required);
+
+    @ViewChildren(McTag) tags: QueryList<McTag>;
+
+    @ViewChild('form') form: NgForm;
+}
+
+
+@Component({
+    template: `
+        <mc-tag-list>
+            <mc-tag *ngFor="let i of numbers" (removed)="remove(i)">{{i}}</mc-tag>
+        </mc-tag-list>`,
+    animations: [
+        // For the case we're testing this animation doesn't
+        // have to be used anywhere, it just has to be defined.
+        trigger('dummyAnimation', [
+            transition(':leave', [
+                style({ opacity: 0 }),
+                animate('500ms', style({ opacity: 1 }))
+            ])
+        ])
+    ]
+})
+class StandardTagListWithAnimations {
+    numbers = [0, 1, 2, 3, 4];
+
+    remove(item: number): void {
+        const index = this.numbers.indexOf(item);
+
+        if (index > -1) {
+            this.numbers.splice(index, 1);
+        }
+    }
+}
+
+@Component({
+    template: `
+        <mc-form-field>
+            <mc-tag-list>
+                <mc-tag [value]="i" (removed)="removeChip($event)" *ngFor="let i of tags">
+                    Chip {{i + 1}}
+                    <span mcTagRemove>Remove</span>
+                </mc-tag>
+            </mc-tag-list>
+        </mc-form-field>
+    `
+})
+class TagListWithRemove {
+    tags = [0, 1, 2, 3, 4];
+
+    removeChip(event: McTagEvent) {
+        this.tags.splice(event.tag.value, 1);
+    }
+}
diff --git a/src/lib/tags/tag-list.component.ts b/src/lib/tags/tag-list.component.ts
new file mode 100644
index 000000000..d3d0521b0
--- /dev/null
+++ b/src/lib/tags/tag-list.component.ts
@@ -0,0 +1,799 @@
+import {
+    AfterContentInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ContentChildren,
+    DoCheck,
+    ElementRef,
+    EventEmitter,
+    Input,
+    OnDestroy,
+    OnInit,
+    Optional,
+    Output,
+    QueryList,
+    Self,
+    ViewEncapsulation
+} from '@angular/core';
+import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
+import { FocusKeyManager } from '@ptsecurity/cdk/a11y';
+import { Directionality } from '@ptsecurity/cdk/bidi';
+import { coerceBooleanProperty } from '@ptsecurity/cdk/coercion';
+import { SelectionModel } from '@ptsecurity/cdk/collections';
+import { BACKSPACE, END, HOME } from '@ptsecurity/cdk/keycodes';
+import {
+    CanUpdateErrorState,
+    CanUpdateErrorStateCtor,
+    ErrorStateMatcher,
+    mixinErrorState
+} from '@ptsecurity/mosaic/core';
+import { McFormFieldControl } from '@ptsecurity/mosaic/form-field';
+import { merge, Observable, Subject, Subscription } from 'rxjs';
+import { startWith, takeUntil } from 'rxjs/operators';
+
+import { McTagTextControl } from './tag-text-control';
+import { McTag, McTagEvent, McTagSelectionChange } from './tag.component';
+
+
+export class McTagListBase {
+    constructor(
+        public defaultErrorStateMatcher: ErrorStateMatcher,
+        public parentForm: NgForm,
+        public parentFormGroup: FormGroupDirective,
+        public ngControl: NgControl
+    ) {
+    }
+}
+
+// tslint:disable-next-line:naming-convention
+export const _McTagListMixinBase: CanUpdateErrorStateCtor & typeof McTagListBase = mixinErrorState(McTagListBase);
+
+
+// Increasing integer for generating unique ids for tag-list components.
+let nextUniqueId = 0;
+
+/** Change event object that is emitted when the tag list value has changed. */
+export class McTagListChange {
+    constructor(public source: McTagList, public value: any) {}
+}
+
+
+@Component({
+    selector: 'mc-tag-list',
+    exportAs: 'mcTagList',
+    template: '<ng-content></ng-content>',
+    host: {
+        class: 'mc-tag-list',
+        '[attr.tabindex]': 'disabled ? null : _tabIndex',
+        '[class.mc-disabled]': 'disabled',
+        '[class.mc-invalid]': 'errorState',
+        '[class.mc-required]': 'required',
+        '(focus)': 'focus()',
+        '(blur)': 'blur()',
+        '(keydown)': 'keydown($event)',
+        '[id]': 'uid'
+    },
+    providers: [{ provide: McFormFieldControl, useExisting: McTagList }],
+    styleUrls: ['tag-list.css'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class McTagList extends _McTagListMixinBase implements McFormFieldControl<any>,
+    ControlValueAccessor, AfterContentInit, DoCheck, OnInit, OnDestroy, CanUpdateErrorState {
+
+    readonly controlType: string = 'mc-tag-list';
+
+    /** Combined stream of all of the child tags' selection change events. */
+    get tagSelectionChanges(): Observable<McTagSelectionChange> {
+        return merge(...this.tags.map((tag) => tag.selectionChange));
+    }
+
+    /** Combined stream of all of the child tags' focus change events. */
+    get tagFocusChanges(): Observable<McTagEvent> {
+        return merge(...this.tags.map((tag) => tag.onFocus));
+    }
+
+    /** Combined stream of all of the child tags' blur change events. */
+    get tagBlurChanges(): Observable<McTagEvent> {
+        return merge(...this.tags.map((tag) => tag.onBlur));
+    }
+
+    /** Combined stream of all of the child tags' remove change events. */
+    get tagRemoveChanges(): Observable<McTagEvent> {
+        return merge(...this.tags.map((tag) => tag.destroyed));
+    }
+
+    /** The array of selected tags inside tag list. */
+    get selected(): McTag[] | McTag {
+        return this.multiple ? this.selectionModel.selected : this.selectionModel.selected[0];
+    }
+
+    /** Whether the user should be allowed to select multiple tags. */
+    @Input()
+    get multiple(): boolean {
+        return this._multiple;
+    }
+
+    set multiple(value: boolean) {
+        this._multiple = coerceBooleanProperty(value);
+    }
+
+    /**
+     * A function to compare the option values with the selected values. The first argument
+     * is a value from an option. The second is a value from the selection. A boolean
+     * should be returned.
+     */
+    @Input()
+    get compareWith(): (o1: any, o2: any) => boolean {
+        return this._compareWith;
+    }
+
+    set compareWith(fn: (o1: any, o2: any) => boolean) {
+        this._compareWith = fn;
+
+        if (this.selectionModel) {
+            // A different comparator means the selection could change.
+            this.initializeSelection();
+        }
+    }
+
+    /**
+     * Implemented as part of McFormFieldControl.
+     * @docs-private
+     */
+    @Input()
+    get value(): any {
+        return this._value;
+    }
+
+    set value(value: any) {
+        this.writeValue(value);
+        this._value = value;
+    }
+
+    /**
+     * Implemented as part of McFormFieldControl.
+     * @docs-private
+     */
+    get id(): string {
+        return this.tagInput ? this.tagInput.id : this.uid;
+    }
+
+    /**
+     * Implemented as part of McFormFieldControl.
+     * @docs-private
+     */
+    @Input()
+    get required(): boolean {
+        return this._required;
+    }
+
+    set required(value: boolean) {
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
+    }
+
+    /**
+     * Implemented as part of McFormFieldControl.
+     * @docs-private
+     */
+    @Input()
+    get placeholder(): string {
+        return this.tagInput ? this.tagInput.placeholder : this._placeholder;
+    }
+
+    set placeholder(value: string) {
+        this._placeholder = value;
+        this.stateChanges.next();
+    }
+
+    /** Whether any tags or the mcTagInput inside of this tag-list has focus. */
+    get focused(): boolean {
+        return (this.tagInput && this.tagInput.focused) || this.hasFocusedTag();
+    }
+
+    /**
+     * Implemented as part of McFormFieldControl.
+     * @docs-private
+     */
+    get empty(): boolean {
+        return (!this.tagInput || this.tagInput.empty) && this.tags.length === 0;
+    }
+
+    /**
+     * Implemented as part of McFormFieldControl.
+     * @docs-private
+     */
+    get shouldLabelFloat(): boolean {
+        return !this.empty || this.focused;
+    }
+
+    /**
+     * Implemented as part of McFormFieldControl.
+     * @docs-private
+     */
+    @Input()
+    get disabled(): boolean {
+        return this.ngControl ? !!this.ngControl.disabled : this._disabled;
+    }
+
+    set disabled(value: boolean) {
+        this._disabled = coerceBooleanProperty(value);
+        this.syncTagsDisabledState();
+    }
+
+    /**
+     * Whether or not this tag list is selectable. When a tag list is not selectable,
+     * the selected states for all the tags inside the tag list are always ignored.
+     */
+    @Input()
+    get selectable(): boolean {
+        return this._selectable;
+    }
+
+    set selectable(value: boolean) {
+        this._selectable = coerceBooleanProperty(value);
+
+        if (this.tags) {
+            this.tags.forEach((tag) => tag.tagListSelectable = this._selectable);
+        }
+    }
+
+    @Input()
+    set tabIndex(value: number) {
+        this.userTabIndex = value;
+        this._tabIndex = value;
+    }
+
+    /**
+     * Event that emits whenever the raw value of the tag-list changes. This is here primarily
+     * to facilitate the two-way binding for the `value` input.
+     * @docs-private
+     */
+    @Output() readonly valueChange: EventEmitter<any> = new EventEmitter<any>();
+
+    uid: string = `mc-tag-list-${nextUniqueId++}`;
+
+    /**
+     * User defined tab index.
+     * When it is not null, use user defined tab index. Otherwise use tabIndex
+     */
+    userTabIndex: number | null = null;
+
+    keyManager: FocusKeyManager<McTag>;
+
+    selectionModel: SelectionModel<McTag>;
+
+    tagChanges = new EventEmitter<any>();
+
+    /** An object used to control when error messages are shown. */
+    @Input() errorStateMatcher: ErrorStateMatcher;
+
+    /** Orientation of the tag list. */
+    @Input('orientation') orientation: 'horizontal' | 'vertical' = 'horizontal';
+
+    /** Event emitted when the selected tag list value has been changed by the user. */
+    @Output() readonly change: EventEmitter<McTagListChange> = new EventEmitter<McTagListChange>();
+
+    /** The tag components contained within this tag list. */
+    @ContentChildren(McTag) tags: QueryList<McTag>;
+
+    _tabIndex = 0;
+
+    private _value: any;
+
+    private _required: boolean = false;
+
+    private _placeholder: string;
+
+    private _disabled: boolean = false;
+
+    private _selectable: boolean = true;
+
+    /** The tag input to add more tags */
+    private tagInput: McTagTextControl;
+
+    private _multiple: boolean = false;
+
+    /**
+     * When a tag is destroyed, we store the index of the destroyed tag until the tags
+     * query list notifies about the update. This is necessary because we cannot determine an
+     * appropriate tag that should receive focus until the array of tags updated completely.
+     */
+    private lastDestroyedTagIndex: number | null = null;
+
+    /** Subject that emits when the component has been destroyed. */
+    private destroyed = new Subject<void>();
+
+    /** Subscription to focus changes in the tags. */
+    private tagFocusSubscription: Subscription | null;
+
+    /** Subscription to blur changes in the tags. */
+    private tagBlurSubscription: Subscription | null;
+
+    /** Subscription to selection changes in tags. */
+    private tagSelectionSubscription: Subscription | null;
+
+    /** Subscription to remove changes in tags. */
+    private tagRemoveSubscription: Subscription | null;
+
+    constructor(
+        protected elementRef: ElementRef<HTMLElement>,
+        private changeDetectorRef: ChangeDetectorRef,
+        defaultErrorStateMatcher: ErrorStateMatcher,
+        @Optional() private dir: Directionality,
+        @Optional() parentForm: NgForm,
+        @Optional() parentFormGroup: FormGroupDirective,
+        @Optional() @Self() public ngControl: NgControl
+    ) {
+        super(defaultErrorStateMatcher, parentForm, parentFormGroup, ngControl);
+
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+
+    ngAfterContentInit() {
+        this.keyManager = new FocusKeyManager<McTag>(this.tags)
+            .withVerticalOrientation()
+            .withHorizontalOrientation(this.dir ? this.dir.value : 'ltr');
+
+        if (this.dir) {
+            this.dir.change
+                .pipe(takeUntil(this.destroyed))
+                .subscribe((dir) => this.keyManager.withHorizontalOrientation(dir));
+        }
+
+        // Prevents the tag list from capturing focus and redirecting
+        // it back to the first tag when the user tabs out.
+        this.keyManager.tabOut
+            .pipe(takeUntil(this.destroyed))
+            .subscribe(() => {
+                this._tabIndex = -1;
+
+                setTimeout(() => {
+                    this._tabIndex = this.userTabIndex || 0;
+                    this.changeDetectorRef.markForCheck();
+                });
+            });
+
+        // When the list changes, re-subscribe
+        this.tags.changes
+            .pipe(startWith(null), takeUntil(this.destroyed))
+            .subscribe(() => {
+                if (this.disabled) {
+                    // Since this happens after the content has been
+                    // checked, we need to defer it to the next tick.
+                    Promise.resolve().then(() => { this.syncTagsDisabledState(); });
+                }
+
+                this.resetTags();
+
+                // Reset tags selected/deselected status
+                this.initializeSelection();
+
+                // Check to see if we need to update our tab index
+                this.updateTabIndex();
+
+                // Check to see if we have a destroyed tag and need to refocus
+                this.updateFocusForDestroyedTags();
+
+                // Defer setting the value in order to avoid the "Expression
+                // has changed after it was checked" errors from Angular.
+                Promise.resolve().then(() => { this.tagChanges.emit(this.tags.toArray()); });
+
+                this.stateChanges.next();
+            });
+    }
+
+    ngOnInit() {
+        this.selectionModel = new SelectionModel<McTag>(this.multiple, undefined, false);
+        this.stateChanges.next();
+    }
+
+    ngDoCheck() {
+        if (this.ngControl) {
+            // We need to re-evaluate this on every change detection cycle, because there are some
+            // error triggers that we can't subscribe to (e.g. parent form submissions). This means
+            // that whatever logic is in here has to be super lean or we risk destroying the performance.
+            this.updateErrorState();
+        }
+    }
+
+    ngOnDestroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+        this.stateChanges.complete();
+
+        this.dropSubscriptions();
+    }
+
+    // tslint:disable-next-line:no-empty
+    onTouched = () => {};
+
+    // tslint:disable-next-line:no-empty
+    onChange: (value: any) => void = () => {};
+
+    /** Associates an HTML input element with this tag list. */
+    registerInput(inputElement: McTagTextControl): void {
+        this.tagInput = inputElement;
+    }
+
+    // Implemented as part of ControlValueAccessor.
+    writeValue(value: any): void {
+        if (this.tags) {
+            this.setSelectionByValue(value, false);
+        }
+    }
+
+    // Implemented as part of ControlValueAccessor.
+    registerOnChange(fn: (value: any) => void): void {
+        this.onChange = fn;
+    }
+
+    // Implemented as part of ControlValueAccessor.
+    registerOnTouched(fn: () => void): void {
+        this.onTouched = fn;
+    }
+
+    // Implemented as part of ControlValueAccessor.
+    setDisabledState(isDisabled: boolean): void {
+        this.disabled = isDisabled;
+        this.stateChanges.next();
+    }
+
+    /**
+     * Implemented as part of McFormFieldControl.
+     * @docs-private
+     */
+    onContainerClick(event: MouseEvent) {
+        if (!this.originatesFromTag(event)) {
+            this.focus();
+        }
+    }
+
+    /**
+     * Focuses the first non-disabled tag in this tag list, or the associated input when there
+     * are no eligible tags.
+     */
+    focus(): void {
+        if (this.disabled) { return; }
+
+        // TODO: ARIA says this should focus the first `selected` tag if any are selected.
+        // Focus on first element if there's no tagInput inside tag-list
+        if (this.tagInput && this.tagInput.focused) {
+            // do nothing
+        } else if (this.tags.length > 0) {
+            this.keyManager.setFirstItemActive();
+            this.stateChanges.next();
+        } else {
+            this.focusInput();
+            this.stateChanges.next();
+        }
+    }
+
+    /** Attempt to focus an input if we have one. */
+    focusInput() {
+        if (this.tagInput) {
+            this.tagInput.focus();
+        }
+    }
+
+    /**
+     * Pass events to the keyboard manager. Available here for tests.
+     */
+    keydown(event: KeyboardEvent) {
+        const target = event.target as HTMLElement;
+
+        // If they are on an empty input and hit backspace, focus the last tag
+        // tslint:disable-next-line: deprecation
+        if (event.keyCode === BACKSPACE && this.isInputEmpty(target)) {
+            this.keyManager.setLastItemActive();
+            event.preventDefault();
+        } else if (target && target.classList.contains('mc-tag')) {
+            // tslint:disable-next-line: deprecation
+            if (event.keyCode === HOME) {
+                this.keyManager.setFirstItemActive();
+                event.preventDefault();
+            // tslint:disable-next-line: deprecation
+            } else if (event.keyCode === END) {
+                this.keyManager.setLastItemActive();
+                event.preventDefault();
+            } else {
+                this.keyManager.onKeydown(event);
+            }
+
+            this.stateChanges.next();
+        }
+    }
+
+    setSelectionByValue(value: any, isUserInput: boolean = true) {
+        this.clearSelection();
+        this.tags.forEach((tag) => tag.deselect());
+
+        if (Array.isArray(value)) {
+            value.forEach((currentValue) => this.selectValue(currentValue, isUserInput));
+            this.sortValues();
+        } else {
+            const correspondingTag = this.selectValue(value, isUserInput);
+
+            // Shift focus to the active item. Note that we shouldn't do this in multiple
+            // mode, because we don't know what tag the user interacted with last.
+            if (correspondingTag && isUserInput) {
+                this.keyManager.setActiveItem(correspondingTag);
+            }
+        }
+    }
+
+    /** When blurred, mark the field as touched when focus moved outside the tag list. */
+    blur() {
+        if (!this.hasFocusedTag()) {
+            this.keyManager.setActiveItem(-1);
+        }
+
+        if (!this.disabled) {
+            if (this.tagInput) {
+                // If there's a tag input, we should check whether the focus moved to tag input.
+                // If the focus is not moved to tag input, mark the field as touched. If the focus moved
+                // to tag input, do nothing.
+                // Timeout is needed to wait for the focus() event trigger on tag input.
+                setTimeout(() => {
+                    if (!this.focused) {
+                        this.markAsTouched();
+                    }
+                });
+            } else {
+                // If there's no tag input, then mark the field as touched.
+                this.markAsTouched();
+            }
+        }
+    }
+
+    /** Mark the field as touched */
+    markAsTouched() {
+        this.onTouched();
+        this.changeDetectorRef.markForCheck();
+        this.stateChanges.next();
+    }
+
+    /**
+     * Check the tab index as you should not be allowed to focus an empty list.
+     */
+    protected updateTabIndex(): void {
+        // If we have 0 tags, we should not allow keyboard focus
+        this._tabIndex = this.userTabIndex || (this.tags.length === 0 ? -1 : 0);
+    }
+
+    /**
+     * If the amount of tags changed, we need to update the
+     * key manager state and focus the next closest tag.
+     */
+    protected updateFocusForDestroyedTags() {
+        if (this.lastDestroyedTagIndex != null && this.tags.length) {
+            const newTagIndex = Math.min(this.lastDestroyedTagIndex, this.tags.length - 1);
+            this.keyManager.setActiveItem(newTagIndex);
+        } else if (this.tags.length === 0) {
+            this.focusInput();
+        }
+
+        this.lastDestroyedTagIndex = null;
+    }
+
+    private _compareWith = (o1: any, o2: any) => o1 === o2;
+
+    /**
+     * Utility to ensure all indexes are valid.
+     *
+     * @param index The index to be checked.
+     * @returns True if the index is valid for our list of tags.
+     */
+    private isValidIndex(index: number): boolean {
+        return index >= 0 && index < this.tags.length;
+    }
+
+    private isInputEmpty(element: HTMLElement): boolean {
+        if (element && element.nodeName.toLowerCase() === 'input') {
+            const input = element as HTMLInputElement;
+
+            return !input.value;
+        }
+
+        return false;
+    }
+
+    /**
+     * Finds and selects the tag based on its value.
+     * @returns Tag that has the corresponding value.
+     */
+    private selectValue(value: any, isUserInput: boolean = true): McTag | undefined {
+
+        const correspondingTag = this.tags.find((tag) => {
+            return tag.value != null && this._compareWith(tag.value, value);
+        });
+
+        if (correspondingTag) {
+            if (isUserInput) {
+                correspondingTag.selectViaInteraction();
+            } else {
+                correspondingTag.select();
+            }
+
+            this.selectionModel.select(correspondingTag);
+        }
+
+        return correspondingTag;
+    }
+
+    private initializeSelection(): void {
+        // Defer setting the value in order to avoid the "Expression
+        // has changed after it was checked" errors from Angular.
+        Promise.resolve().then(() => {
+            if (this.ngControl || this._value) {
+                this.setSelectionByValue(this.ngControl ? this.ngControl.value : this._value, false);
+                this.stateChanges.next();
+            }
+        });
+    }
+
+    /**
+     * Deselects every tag in the list.
+     * @param skip Tag that should not be deselected.
+     */
+    private clearSelection(skip?: McTag): void {
+        this.selectionModel.clear();
+        this.tags.forEach((tag) => {
+            if (tag !== skip) {
+                tag.deselect();
+            }
+        });
+        this.stateChanges.next();
+    }
+
+    /**
+     * Sorts the model values, ensuring that they keep the same
+     * order that they have in the panel.
+     */
+    private sortValues(): void {
+        if (this._multiple) {
+            this.selectionModel.clear();
+
+            this.tags.forEach((tag) => {
+                if (tag.selected) {
+                    this.selectionModel.select(tag);
+                }
+            });
+            this.stateChanges.next();
+        }
+    }
+
+    /** Emits change event to set the model value. */
+    private propagateChanges(fallbackValue?: any): void {
+        let valueToEmit: any = null;
+
+        if (Array.isArray(this.selected)) {
+            valueToEmit = this.selected.map((tag) => tag.value);
+        } else {
+            valueToEmit = this.selected ? this.selected.value : fallbackValue;
+        }
+        this._value = valueToEmit;
+        this.change.emit(new McTagListChange(this, valueToEmit));
+        this.valueChange.emit(valueToEmit);
+        this.onChange(valueToEmit);
+        this.changeDetectorRef.markForCheck();
+    }
+
+    private resetTags() {
+        this.dropSubscriptions();
+        this.listenToTagsFocus();
+        this.listenToTagsSelection();
+        this.listenToTagsRemoved();
+    }
+
+    private dropSubscriptions() {
+        if (this.tagFocusSubscription) {
+            this.tagFocusSubscription.unsubscribe();
+            this.tagFocusSubscription = null;
+        }
+
+        if (this.tagBlurSubscription) {
+            this.tagBlurSubscription.unsubscribe();
+            this.tagBlurSubscription = null;
+        }
+
+        if (this.tagSelectionSubscription) {
+            this.tagSelectionSubscription.unsubscribe();
+            this.tagSelectionSubscription = null;
+        }
+
+        if (this.tagRemoveSubscription) {
+            this.tagRemoveSubscription.unsubscribe();
+            this.tagRemoveSubscription = null;
+        }
+    }
+
+    /** Listens to user-generated selection events on each tag. */
+    private listenToTagsSelection(): void {
+        this.tagSelectionSubscription = this.tagSelectionChanges.subscribe((event) => {
+            if (event.source.selected) {
+                this.selectionModel.select(event.source);
+            } else {
+                this.selectionModel.deselect(event.source);
+            }
+
+            // For single selection tag list, make sure the deselected value is unselected.
+            if (!this.multiple) {
+                this.tags.forEach((tag) => {
+                    if (!this.selectionModel.isSelected(tag) && tag.selected) {
+                        tag.deselect();
+                    }
+                });
+            }
+
+            if (event.isUserInput) {
+                this.propagateChanges();
+            }
+        });
+    }
+
+    /** Listens to user-generated selection events on each tag. */
+    private listenToTagsFocus(): void {
+        this.tagFocusSubscription = this.tagFocusChanges.subscribe((event) => {
+            const tagIndex: number = this.tags.toArray().indexOf(event.tag);
+
+            if (this.isValidIndex(tagIndex)) {
+                this.keyManager.updateActiveItem(tagIndex);
+            }
+            this.stateChanges.next();
+        });
+
+        this.tagBlurSubscription = this.tagBlurChanges.subscribe(() => {
+            this.blur();
+            this.stateChanges.next();
+        });
+    }
+
+    private listenToTagsRemoved(): void {
+        this.tagRemoveSubscription = this.tagRemoveChanges.subscribe((event) => {
+            const tag = event.tag;
+            const tagIndex = this.tags.toArray().indexOf(event.tag);
+
+            // In case the tag that will be removed is currently focused, we temporarily store
+            // the index in order to be able to determine an appropriate sibling tag that will
+            // receive focus.
+            if (this.isValidIndex(tagIndex) && tag.hasFocus) {
+                this.lastDestroyedTagIndex = tagIndex;
+            }
+        });
+    }
+
+    /** Checks whether an event comes from inside a tag element. */
+    private originatesFromTag(event: Event): boolean {
+        let currentElement = event.target as HTMLElement | null;
+
+        while (currentElement && currentElement !== this.elementRef.nativeElement) {
+            if (currentElement.classList.contains('mc-tag')) {
+                return true;
+            }
+
+            currentElement = currentElement.parentElement;
+        }
+
+        return false;
+    }
+
+    /** Checks whether any of the tags is focused. */
+    private hasFocusedTag() {
+        return this.tags.some((tag) => tag.hasFocus);
+    }
+
+    /** Syncs the list's disabled state with the individual tags. */
+    private syncTagsDisabledState() {
+        if (this.tags) {
+            this.tags.forEach((tag) => {
+                tag.disabled = this._disabled;
+            });
+        }
+    }
+}
+
diff --git a/src/lib/tags/tag-list.scss b/src/lib/tags/tag-list.scss
new file mode 100644
index 000000000..c0d10cf73
--- /dev/null
+++ b/src/lib/tags/tag-list.scss
@@ -0,0 +1,23 @@
+
+
+.mc-tag-list {
+    display: flex;
+    flex-wrap: wrap;
+
+    min-height: 28px;
+
+    padding: 2px 6px;
+
+    & .mc-tag-input {
+        flex: 1 1 auto;
+
+        height: 22px;
+        margin: 2px 4px;
+    }
+}
+
+.mc-tag-input {
+    border: none;
+    outline: none;
+    background: transparent;
+}
diff --git a/src/lib/tags/tag-remove.spec.ts b/src/lib/tags/tag-remove.spec.ts
new file mode 100644
index 000000000..41b262f29
--- /dev/null
+++ b/src/lib/tags/tag-remove.spec.ts
@@ -0,0 +1,63 @@
+import { Component, DebugElement } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { McTag, McTagsModule } from './index';
+
+
+describe('Tag Remove', () => {
+    let fixture: ComponentFixture<TestTag>;
+    let testTag: TestTag;
+    let chipDebugElement: DebugElement;
+    let chipNativeElement: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [McTagsModule],
+            declarations: [TestTag]
+        });
+
+        TestBed.compileComponents();
+    }));
+
+    beforeEach(async(() => {
+        fixture = TestBed.createComponent(TestTag);
+        testTag = fixture.debugElement.componentInstance;
+        fixture.detectChanges();
+
+        chipDebugElement = fixture.debugElement.query(By.directive(McTag));
+        chipNativeElement = chipDebugElement.nativeElement;
+    }));
+
+    describe('basic behavior', () => {
+        it('should applies the `mc-tag-remove` CSS class', () => {
+            const hrefElement = chipNativeElement.querySelector('a')!;
+
+            expect(hrefElement.classList).toContain('mc-tag-remove');
+        });
+
+        it('should emits (removed) on click', () => {
+            const hrefElement = chipNativeElement.querySelector('a')!;
+
+            testTag.removable = true;
+            fixture.detectChanges();
+
+            spyOn(testTag, 'didRemove');
+
+            hrefElement.click();
+
+            expect(testTag.didRemove).toHaveBeenCalled();
+        });
+    });
+});
+
+@Component({
+    template: `
+        <mc-tag [removable]="removable" (removed)="didRemove()"><a mcTagRemove></a></mc-tag>
+    `
+})
+class TestTag {
+    removable: boolean;
+
+    didRemove() {}
+}
diff --git a/src/lib/tags/tag-text-control.ts b/src/lib/tags/tag-text-control.ts
new file mode 100644
index 000000000..78492f244
--- /dev/null
+++ b/src/lib/tags/tag-text-control.ts
@@ -0,0 +1,14 @@
+
+/** Interface for a text control that is used to drive interaction with a mc-tag-list. */
+// tslint:disable-next-line: naming-convention
+export interface McTagTextControl {
+  id: string;
+
+  placeholder: string;
+
+  focused: boolean;
+
+  empty: boolean;
+
+  focus(): void;
+}
diff --git a/src/lib/tags/tag.component.spec.ts b/src/lib/tags/tag.component.spec.ts
new file mode 100644
index 000000000..d9665c3e8
--- /dev/null
+++ b/src/lib/tags/tag.component.spec.ts
@@ -0,0 +1,385 @@
+/* tslint:disable:no-magic-numbers no-empty */
+import { Component, DebugElement, ViewChild } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Directionality } from '@ptsecurity/cdk/bidi';
+import { BACKSPACE, DELETE, SPACE } from '@ptsecurity/cdk/keycodes';
+import { createKeyboardEvent, dispatchFakeEvent } from '@ptsecurity/cdk/testing';
+import { Subject } from 'rxjs';
+
+import { McTag, McTagEvent, McTagSelectionChange, McTagsModule, McTagList } from './index';
+
+
+describe('Tags', () => {
+    let fixture: ComponentFixture<any>;
+    let tagDebugElement: DebugElement;
+    let tagNativeElement: HTMLElement;
+    let tagInstance: McTag;
+
+    const dir = 'ltr';
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [McTagsModule],
+            declarations: [BasicTag, SingleTag],
+            providers: [{
+                provide: Directionality, useFactory: () => ({
+                    value: dir,
+                    // tslint:disable-next-line: no-inferred-empty-object-type
+                    change: new Subject()
+                })
+            }]
+        });
+
+        TestBed.compileComponents();
+    }));
+
+    describe('McBasicTag', () => {
+        beforeEach(() => {
+            fixture = TestBed.createComponent(BasicTag);
+            fixture.detectChanges();
+
+            tagDebugElement = fixture.debugElement.query(By.directive(McTag));
+            tagNativeElement = tagDebugElement.nativeElement;
+            tagInstance = tagDebugElement.injector.get<McTag>(McTag);
+
+            document.body.appendChild(tagNativeElement);
+        });
+
+        afterEach(() => {
+            document.body.removeChild(tagNativeElement);
+        });
+
+        it('adds the `mc-basic-tag` class', () => {
+            expect(tagNativeElement.classList).toContain('mc-tag');
+            expect(tagNativeElement.classList).toContain('mc-basic-tag');
+        });
+    });
+
+    describe('McTag', () => {
+        let testComponent: SingleTag;
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(SingleTag);
+            fixture.detectChanges();
+
+            tagDebugElement = fixture.debugElement.query(By.directive(McTag));
+            tagNativeElement = tagDebugElement.nativeElement;
+            tagInstance = tagDebugElement.injector.get<McTag>(McTag);
+            testComponent = fixture.debugElement.componentInstance;
+
+            document.body.appendChild(tagNativeElement);
+        });
+
+        afterEach(() => {
+            document.body.removeChild(tagNativeElement);
+        });
+
+        describe('basic behaviors', () => {
+
+            it('adds the `mc-tag` class', () => {
+                expect(tagNativeElement.classList).toContain('mc-tag');
+            });
+
+            it('does not add the `mc-basic-tag` class', () => {
+                expect(tagNativeElement.classList).not.toContain('mc-basic-tag');
+            });
+
+            it('emits focus only once for multiple clicks', () => {
+                let counter = 0;
+                tagInstance.onFocus.subscribe(() => {
+                    counter++;
+                });
+
+                tagNativeElement.focus();
+                tagNativeElement.focus();
+                fixture.detectChanges();
+
+                expect(counter).toBe(1);
+            });
+
+            it('emits destroy on destruction', () => {
+                spyOn(testComponent, 'tagDestroy').and.callThrough();
+
+                // Force a destroy callback
+                testComponent.shouldShow = false;
+                fixture.detectChanges();
+
+                expect(testComponent.tagDestroy).toHaveBeenCalledTimes(1);
+            });
+
+            it('allows color customization', () => {
+                expect(tagNativeElement.classList).toContain('mc-primary');
+
+                testComponent.color = 'error';
+                fixture.detectChanges();
+
+                expect(tagNativeElement.classList).not.toContain('mc-primary');
+                expect(tagNativeElement.classList).toContain('mc-error');
+            });
+
+            it('allows selection', () => {
+                spyOn(testComponent, 'tagSelectionChange');
+                expect(tagNativeElement.classList).not.toContain('mc-tag-selected');
+
+                testComponent.selected = true;
+                fixture.detectChanges();
+
+                expect(tagNativeElement.classList).toContain('mc-tag-selected');
+                expect(testComponent.tagSelectionChange)
+                    .toHaveBeenCalledWith({ source: tagInstance, isUserInput: false, selected: true });
+            });
+
+            it('allows removal', () => {
+                spyOn(testComponent, 'tagRemove');
+
+                tagInstance.remove();
+                fixture.detectChanges();
+
+                expect(testComponent.tagRemove).toHaveBeenCalledWith({ tag: tagInstance });
+            });
+
+            it('should not prevent the default click action', () => {
+                const event = dispatchFakeEvent(tagNativeElement, 'click');
+                fixture.detectChanges();
+
+                expect(event.defaultPrevented).toBe(false);
+            });
+
+            it('should prevent the default click action when the tag is disabled', () => {
+                tagInstance.disabled = true;
+                fixture.detectChanges();
+
+                const event = dispatchFakeEvent(tagNativeElement, 'click');
+                fixture.detectChanges();
+
+                expect(event.defaultPrevented).toBe(true);
+            });
+
+            it('should not dispatch `selectionChange` event when deselecting a non-selected chip', () => {
+                tagInstance.deselect();
+
+                const spy = jasmine.createSpy('selectionChange spy');
+                const subscription = tagInstance.selectionChange.subscribe(spy);
+
+                tagInstance.deselect();
+
+                expect(spy).not.toHaveBeenCalled();
+                subscription.unsubscribe();
+            });
+
+            it('should not dispatch `selectionChange` event when selecting a selected chip', () => {
+                tagInstance.select();
+
+                const spy = jasmine.createSpy('selectionChange spy');
+                const subscription = tagInstance.selectionChange.subscribe(spy);
+
+                tagInstance.select();
+
+                expect(spy).not.toHaveBeenCalled();
+                subscription.unsubscribe();
+            });
+
+            it('should not dispatch `selectionChange` event when selecting a selected tag via ' +
+                'user interaction', () => {
+                tagInstance.select();
+
+                const spy = jasmine.createSpy('selectionChange spy');
+                const subscription = tagInstance.selectionChange.subscribe(spy);
+
+                tagInstance.selectViaInteraction();
+
+                expect(spy).not.toHaveBeenCalled();
+                subscription.unsubscribe();
+            });
+
+            it('should not dispatch `selectionChange` through setter if the value did not change', () => {
+                tagInstance.selected = false;
+
+                const spy = jasmine.createSpy('selectionChange spy');
+                const subscription = tagInstance.selectionChange.subscribe(spy);
+
+                tagInstance.selected = false;
+
+                expect(spy).not.toHaveBeenCalled();
+                subscription.unsubscribe();
+            });
+        });
+
+        describe('keyboard behavior', () => {
+
+            describe('when selectable is true', () => {
+                beforeEach(() => {
+                    testComponent.selectable = true;
+                    fixture.detectChanges();
+                });
+
+                it('should selects/deselects the currently focused tag on SPACE', () => {
+                    const SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE) as KeyboardEvent;
+                    const CHIP_SELECTED_EVENT: McTagSelectionChange = {
+                        source: tagInstance,
+                        isUserInput: true,
+                        selected: true
+                    };
+
+                    const CHIP_DESELECTED_EVENT: McTagSelectionChange = {
+                        source: tagInstance,
+                        isUserInput: true,
+                        selected: false
+                    };
+
+                    spyOn(testComponent, 'tagSelectionChange');
+
+                    // Use the spacebar to select the chip
+                    tagInstance.handleKeydown(SPACE_EVENT);
+                    fixture.detectChanges();
+
+                    expect(tagInstance.selected).toBeTruthy();
+                    expect(testComponent.tagSelectionChange).toHaveBeenCalledTimes(1);
+                    expect(testComponent.tagSelectionChange).toHaveBeenCalledWith(CHIP_SELECTED_EVENT);
+
+                    // Use the spacebar to deselect the chip
+                    tagInstance.handleKeydown(SPACE_EVENT);
+                    fixture.detectChanges();
+
+                    expect(tagInstance.selected).toBeFalsy();
+                    expect(testComponent.tagSelectionChange).toHaveBeenCalledTimes(2);
+                    expect(testComponent.tagSelectionChange).toHaveBeenCalledWith(CHIP_DESELECTED_EVENT);
+                });
+            });
+
+            describe('when selectable is false', () => {
+                beforeEach(() => {
+                    testComponent.selectable = false;
+                    fixture.detectChanges();
+                });
+
+                it('SPACE ignores selection', () => {
+                    const SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE) as KeyboardEvent;
+
+                    spyOn(testComponent, 'tagSelectionChange');
+
+                    // Use the spacebar to attempt to select the chip
+                    tagInstance.handleKeydown(SPACE_EVENT);
+                    fixture.detectChanges();
+
+                    expect(tagInstance.selected).toBeFalsy();
+                    expect(testComponent.tagSelectionChange).not.toHaveBeenCalled();
+                });
+
+                it('should not have the aria-selected attribute', () => {
+                    expect(tagNativeElement.hasAttribute('aria-selected')).toBe(false);
+                });
+            });
+
+            describe('when removable is true', () => {
+                beforeEach(() => {
+                    testComponent.removable = true;
+                    fixture.detectChanges();
+                });
+
+                it('DELETE emits the (removed) event', () => {
+                    const DELETE_EVENT = createKeyboardEvent('keydown', DELETE) as KeyboardEvent;
+
+                    spyOn(testComponent, 'tagRemove');
+
+                    // Use the delete to remove the chip
+                    tagInstance.handleKeydown(DELETE_EVENT);
+                    fixture.detectChanges();
+
+                    expect(testComponent.tagRemove).toHaveBeenCalled();
+                });
+
+                it('BACKSPACE emits the (removed) event', () => {
+                    const BACKSPACE_EVENT = createKeyboardEvent('keydown', BACKSPACE) as KeyboardEvent;
+
+                    spyOn(testComponent, 'tagRemove');
+
+                    // Use the delete to remove the chip
+                    tagInstance.handleKeydown(BACKSPACE_EVENT);
+                    fixture.detectChanges();
+
+                    expect(testComponent.tagRemove).toHaveBeenCalled();
+                });
+            });
+
+            describe('when removable is false', () => {
+                beforeEach(() => {
+                    testComponent.removable = false;
+                    fixture.detectChanges();
+                });
+
+                it('DELETE does not emit the (removed) event', () => {
+                    const DELETE_EVENT = createKeyboardEvent('keydown', DELETE) as KeyboardEvent;
+
+                    spyOn(testComponent, 'tagRemove');
+
+                    // Use the delete to remove the chip
+                    tagInstance.handleKeydown(DELETE_EVENT);
+                    fixture.detectChanges();
+
+                    expect(testComponent.tagRemove).not.toHaveBeenCalled();
+                });
+
+                it('BACKSPACE does not emit the (removed) event', () => {
+                    const BACKSPACE_EVENT = createKeyboardEvent('keydown', BACKSPACE) as KeyboardEvent;
+
+                    spyOn(testComponent, 'tagRemove');
+
+                    // Use the delete to remove the chip
+                    tagInstance.handleKeydown(BACKSPACE_EVENT);
+                    fixture.detectChanges();
+
+                    expect(testComponent.tagRemove).not.toHaveBeenCalled();
+                });
+            });
+
+            it('should make disabled chips non-focusable', () => {
+                expect(tagNativeElement.getAttribute('tabindex')).toBe('-1');
+
+                testComponent.disabled = true;
+                fixture.detectChanges();
+
+                expect(tagNativeElement.getAttribute('tabindex')).toBeFalsy();
+            });
+
+        });
+    });
+});
+
+@Component({
+    template: `
+        <mc-tag-list>
+            <div *ngIf="shouldShow">
+                <mc-tag [selectable]="selectable" [removable]="removable"
+                          [color]="color" [selected]="selected" [disabled]="disabled"
+                          (focus)="tagFocus($event)" (destroyed)="tagDestroy($event)"
+                          (selectionChange)="tagSelectionChange($event)"
+                          (removed)="tagRemove($event)">
+                    {{name}}
+                </mc-tag>
+            </div>
+        </mc-tag-list>`
+})
+class SingleTag {
+    disabled: boolean = false;
+    name: string = 'Test';
+    color: string = 'primary';
+    selected: boolean = false;
+    selectable: boolean = true;
+    removable: boolean = true;
+    shouldShow: boolean = true;
+
+    @ViewChild(McTagList) tagList: McTagList;
+
+    tagFocus: (event?: McTagEvent) => void = () => {};
+    tagDestroy: (event?: McTagEvent) => void = () => {};
+    tagSelectionChange: (event?: McTagSelectionChange) => void = () => {};
+    tagRemove: (event?: McTagEvent) => void = () => {};
+}
+
+@Component({
+    template: `
+        <mc-basic-tag>{{ name }}</mc-basic-tag>`
+})
+class BasicTag {}
diff --git a/src/lib/tags/tag.component.ts b/src/lib/tags/tag.component.ts
new file mode 100644
index 000000000..23431b8cd
--- /dev/null
+++ b/src/lib/tags/tag.component.ts
@@ -0,0 +1,410 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ContentChild,
+    ContentChildren,
+    Directive,
+    ElementRef,
+    EventEmitter,
+    forwardRef,
+    Input,
+    NgZone,
+    OnDestroy,
+    Output,
+    QueryList,
+    ViewEncapsulation
+} from '@angular/core';
+import { IFocusableOption } from '@ptsecurity/cdk/a11y';
+import { coerceBooleanProperty } from '@ptsecurity/cdk/coercion';
+import { BACKSPACE, DELETE, SPACE } from '@ptsecurity/cdk/keycodes';
+import {
+    CanColor,
+    CanColorCtor,
+    CanDisable,
+    CanDisableCtor,
+    mixinColor,
+    mixinDisabled
+} from '@ptsecurity/mosaic/core';
+import { McIcon } from '@ptsecurity/mosaic/icon';
+import { Subject } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+
+// tslint:disable-next-line:naming-convention
+export interface McTagEvent {
+    tag: McTag;
+}
+
+/** Event object emitted by McTag when selected or deselected. */
+export class McTagSelectionChange {
+    constructor(public source: McTag, public selected: boolean, public isUserInput = false) {}
+}
+
+
+const TAG_ATTRIBUTE_NAMES = ['mc-basic-tag'];
+
+/**
+ * Dummy directive to add CSS class to tag avatar.
+ * @docs-private
+ */
+@Directive({
+    selector: 'mc-tag-avatar, [mcTagAvatar]',
+    host: { class: 'mc-tag-avatar' }
+})
+export class McTagAvatar {}
+
+/**
+ * Dummy directive to add CSS class to tag trailing icon.
+ * @docs-private
+ */
+@Directive({
+    selector: 'mc-tag-trailing-icon, [mcTagTrailingIcon]',
+    host: { class: 'mc-tag-trailing-icon' }
+})
+export class McTagTrailingIcon {}
+
+export class McTagBase {
+    // tslint:disable-next-line:naming-convention
+    constructor(public _elementRef: ElementRef) {
+    }
+}
+
+// tslint:disable-next-line:naming-convention
+export const _McTagMixinBase: CanColorCtor & CanDisableCtor & typeof McTagBase = mixinColor(mixinDisabled(McTagBase));
+
+
+@Component({
+    selector: 'mc-tag, [mc-tag], mc-basic-tag, [mc-basic-tag]',
+    exportAs: 'mcTag',
+    templateUrl: 'tag.partial.html',
+    styleUrls: ['./tag.css'],
+    inputs: ['color', 'disabled'],
+    host: {
+        class: 'mc-tag',
+        '[attr.tabindex]': 'disabled ? null : -1',
+        '[class.mc-tag-selected]': 'selected',
+        '[class.mc-tag-with-avatar]': 'avatar',
+        '[class.mc-tag-with-trailing-icon]': 'trailingIcon || removeIcon',
+        '[class.mc-tag-disabled]': 'disabled',
+        '[class.mc-disabled]': 'disabled',
+        '[attr.disabled]': 'disabled || null',
+        '(click)': 'handleClick($event)',
+        '(keydown)': 'handleKeydown($event)',
+        '(focus)': 'focus()',
+        '(blur)': 'blur()'
+    },
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
+})
+export class McTag extends _McTagMixinBase implements IFocusableOption, OnDestroy, CanColor, CanDisable {
+    /** Emits when the tag is focused. */
+    readonly onFocus = new Subject<McTagEvent>();
+
+    /** Emits when the tag is blured. */
+    readonly onBlur = new Subject<McTagEvent>();
+
+    nativeElement: HTMLElement;
+
+    /** Whether the tag has focus. */
+    hasFocus: boolean = false;
+
+    /** Whether the tag list is selectable */
+    tagListSelectable: boolean = true;
+
+    @ContentChildren(McIcon) contentChildren: QueryList<McIcon>;
+
+    /** The tag avatar */
+    @ContentChild(McTagAvatar) avatar: McTagAvatar;
+
+    /** The tag's trailing icon. */
+    @ContentChild(McTagTrailingIcon) trailingIcon: McTagTrailingIcon;
+
+    /** The tag's remove toggler. */
+    @ContentChild(forwardRef(() => McTagRemove)) removeIcon: McTagRemove;
+
+    /** Emitted when the tag is selected or deselected. */
+    @Output() readonly selectionChange: EventEmitter<McTagSelectionChange> =
+        new EventEmitter<McTagSelectionChange>();
+
+    /** Emitted when the tag is destroyed. */
+    @Output() readonly destroyed: EventEmitter<McTagEvent> = new EventEmitter<McTagEvent>();
+
+    /** Emitted when a tag is to be removed. */
+    @Output() readonly removed: EventEmitter<McTagEvent> = new EventEmitter<McTagEvent>();
+
+    /** Whether the tag is selected. */
+    @Input()
+    get selected(): boolean {
+        return this._selected;
+    }
+
+    set selected(value: boolean) {
+        const coercedValue = coerceBooleanProperty(value);
+
+        if (coercedValue !== this._selected) {
+            this._selected = coercedValue;
+            this.dispatchSelectionChange();
+        }
+    }
+
+    private _selected: boolean = false;
+
+    /** The value of the tag. Defaults to the content inside `<mc-tag>` tags. */
+    @Input()
+    get value(): any {
+        return this._value !== undefined
+            ? this._value
+            : this.elementRef.nativeElement.textContent;
+    }
+
+    set value(value: any) {
+        this._value = value;
+    }
+
+    private _value: any;
+
+    /**
+     * Whether or not the tag is selectable. When a tag is not selectable,
+     * changes to its selected state are always ignored. By default a tag is
+     * selectable, and it becomes non-selectable if its parent tag list is
+     * not selectable.
+     */
+    @Input()
+    get selectable(): boolean {
+        return this._selectable && this.tagListSelectable;
+    }
+
+    set selectable(value: boolean) {
+        this._selectable = coerceBooleanProperty(value);
+    }
+
+    private _selectable: boolean = true;
+
+    /**
+     * Determines whether or not the tag displays the remove styling and emits (removed) events.
+     */
+    @Input()
+    get removable(): boolean {
+        return this._removable;
+    }
+
+    set removable(value: boolean) {
+        this._removable = coerceBooleanProperty(value);
+    }
+
+    private _removable: boolean = true;
+
+    get disabled() {
+        return this._disabled;
+    }
+
+    set disabled(value: any) {
+        if (value !== this.disabled) {
+            this._disabled = value;
+        }
+    }
+
+    private _disabled: boolean = false;
+
+    constructor(public elementRef: ElementRef, private _ngZone: NgZone) {
+        super(elementRef);
+
+        this.addHostClassName();
+
+        this.nativeElement = elementRef.nativeElement;
+    }
+
+    ngAfterContentInit() {
+        this.addClassModificatorForIcons();
+    }
+
+    addClassModificatorForIcons() {
+        const icons = this.contentChildren.map((item) => item._elementRef.nativeElement);
+
+        if (icons.length === 1) {
+            const iconElement = icons[0];
+
+            if (!iconElement.previousElementSibling && !iconElement.nextElementSibling) {
+                if (iconElement.nextSibling) {
+                    iconElement.classList.add('mc-icon_left');
+                    this.nativeElement.classList.add('mc-left-icon');
+                }
+
+                if (iconElement.previousSibling) {
+                    iconElement.classList.add('mc-icon_right');
+                    this.nativeElement.classList.add('mc-right-icon');
+                }
+            }
+        } else if (icons.length > 1) {
+            const firstIconElement = icons[0];
+            const secondIconElement = icons[1];
+
+            firstIconElement.classList.add('mc-icon_left');
+            secondIconElement.classList.add('mc-icon_right');
+        }
+    }
+
+    addHostClassName() {
+        // Add class for the different tags
+        for (const attr of TAG_ATTRIBUTE_NAMES) {
+            if (
+                this.elementRef.nativeElement.hasAttribute(attr) ||
+                this.elementRef.nativeElement.tagName.toLowerCase() === attr
+            ) {
+                    (this.elementRef.nativeElement as HTMLElement).classList.add(attr);
+
+                    return;
+            }
+        }
+        (this.elementRef.nativeElement as HTMLElement).classList.add('mc-standard-tag');
+    }
+
+    ngOnDestroy() {
+        this.destroyed.emit({ tag: this });
+    }
+
+    select(): void {
+        if (!this._selected) {
+            this._selected = true;
+            this.dispatchSelectionChange();
+        }
+    }
+
+    deselect(): void {
+        if (this._selected) {
+            this._selected = false;
+            this.dispatchSelectionChange();
+        }
+    }
+
+    selectViaInteraction(): void {
+        if (!this._selected) {
+            this._selected = true;
+            this.dispatchSelectionChange(true);
+        }
+    }
+
+    toggleSelected(isUserInput: boolean = false): boolean {
+        this._selected = !this.selected;
+        this.dispatchSelectionChange(isUserInput);
+
+        return this.selected;
+    }
+
+    /** Allows for programmatic focusing of the tag. */
+    focus(): void {
+        if (!this.hasFocus) {
+            this.elementRef.nativeElement.focus();
+            this.onFocus.next({ tag: this });
+        }
+        this.hasFocus = true;
+    }
+
+    /**
+     * Allows for programmatic removal of the tag. Called by the McTagList when the DELETE or
+     * BACKSPACE keys are pressed.
+     *
+     * Informs any listeners of the removal request. Does not remove the tag from the DOM.
+     */
+    remove(): void {
+        if (this.removable) {
+            this.removed.emit({ tag: this });
+        }
+    }
+
+    handleClick(event: Event) {
+        if (this.disabled) {
+            event.preventDefault();
+        } else {
+            event.stopPropagation();
+        }
+    }
+
+    handleKeydown(event: KeyboardEvent): void {
+        if (this.disabled) { return; }
+
+        // tslint:disable-next-line: deprecation
+        switch (event.keyCode) {
+            case DELETE:
+            case BACKSPACE:
+                // If we are removable, remove the focused tag
+                this.remove();
+                // Always prevent so page navigation does not occur
+                event.preventDefault();
+                break;
+            case SPACE:
+                // If we are selectable, toggle the focused tag
+                if (this.selectable) {
+                    this.toggleSelected(true);
+                }
+
+                // Always prevent space from scrolling the page since the list has focus
+                event.preventDefault();
+                break;
+            default:
+        }
+    }
+
+    blur(): void {
+        // When animations are enabled, Angular may end up removing the tag from the DOM a little
+        // earlier than usual, causing it to be blurred and throwing off the logic in the tag list
+        // that moves focus not the next item. To work around the issue, we defer marking the tag
+        // as not focused until the next time the zone stabilizes.
+        this._ngZone.onStable
+            .asObservable()
+            .pipe(take(1))
+            .subscribe(() => {
+                this._ngZone.run(() => {
+                    this.hasFocus = false;
+                    this.onBlur.next({ tag: this });
+                });
+            });
+    }
+
+    private dispatchSelectionChange(isUserInput = false) {
+        this.selectionChange.emit({
+            source: this,
+            isUserInput,
+            selected: this._selected
+        });
+    }
+}
+
+
+/**
+ * Applies proper (click) support and adds styling for use with the Material Design "cancel" icon
+ * available at https://material.io/icons/#ic_cancel.
+ *
+ * Example:
+ *
+ *     `<mc-tag>
+ *       <mc-icon mcTagRemove>cancel</mc-icon>
+ *     </mc-tag>`
+ *
+ * You *may* use a custom icon, but you may need to override the `mc-tag-remove` positioning
+ * styles to properly center the icon within the tag.
+ */
+@Directive({
+    selector: '[mcTagRemove]',
+    host: {
+        class: 'mc-tag-remove mc-tag-trailing-icon',
+        '(click)': 'handleClick($event)'
+    }
+})
+export class McTagRemove {
+    constructor(protected parentTag: McTag) {}
+
+    /** Calls the parent tag's public `remove()` method if applicable. */
+    handleClick(event: Event): void {
+        if (this.parentTag.removable) {
+            this.parentTag.remove();
+        }
+
+        // We need to stop event propagation because otherwise the event will bubble up to the
+        // form field and cause the `onContainerClick` method to be invoked. This method would then
+        // reset the focused tag that has been focused after tag removal. Usually the parent
+        // the parent click listener of the `McTag` would prevent propagation, but it can happen
+        // that the tag is being removed before the event bubbles up.
+        event.stopPropagation();
+    }
+}
diff --git a/src/lib/tags/tag.md b/src/lib/tags/tag.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/lib/tags/tag.module.ts b/src/lib/tags/tag.module.ts
new file mode 100644
index 000000000..91855db99
--- /dev/null
+++ b/src/lib/tags/tag.module.ts
@@ -0,0 +1,36 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ENTER } from '@ptsecurity/cdk/keycodes';
+import { PlatformModule } from '@ptsecurity/cdk/platform';
+
+import { MC_TAGS_DEFAULT_OPTIONS, McTagsDefaultOptions } from './tag-default-options';
+import { McTagInput } from './tag-input';
+import { McTagList } from './tag-list.component';
+import { McTag, McTagAvatar, McTagRemove, McTagTrailingIcon } from './tag.component';
+
+
+@NgModule({
+    imports: [CommonModule, PlatformModule],
+    exports: [
+        McTagList,
+        McTag,
+        McTagInput,
+        McTagTrailingIcon,
+        McTagAvatar,
+        McTagRemove
+    ],
+    declarations: [
+        McTagList,
+        McTag,
+        McTagInput,
+        McTagTrailingIcon,
+        McTagAvatar,
+        McTagRemove
+    ],
+    providers: [{
+        provide: MC_TAGS_DEFAULT_OPTIONS,
+        // tslint:disable-next-line: no-object-literal-type-assertion
+        useValue: { separatorKeyCodes: [ENTER] } as McTagsDefaultOptions
+    }]
+})
+export class McTagsModule {}
diff --git a/src/lib/tag/tag.partial.html b/src/lib/tags/tag.partial.html
similarity index 100%
rename from src/lib/tag/tag.partial.html
rename to src/lib/tags/tag.partial.html
diff --git a/src/lib/tag/tag.scss b/src/lib/tags/tag.scss
similarity index 95%
rename from src/lib/tag/tag.scss
rename to src/lib/tags/tag.scss
index f15eb0c3c..f0fde205a 100644
--- a/src/lib/tag/tag.scss
+++ b/src/lib/tags/tag.scss
@@ -15,6 +15,8 @@ $mc-tag-icon-padding: 3px;
     display: inline-block;
     overflow: hidden;
 
+    margin: 2px;
+
     height: $mc-tag-height;
 
     border: {
@@ -25,6 +27,8 @@ $mc-tag-icon-padding: 3px;
 
     cursor: default;
 
+    outline: none;
+
     &.mc-left-icon {
         padding-left: $mc-tag-icon-padding;
     }
@@ -78,5 +82,6 @@ $mc-tag-icon-padding: 3px;
     margin-left: 7px;
 
     text-overflow: ellipsis;
+    white-space: nowrap;
     overflow: hidden;
 }
diff --git a/src/lib/tag/tsconfig.build.json b/src/lib/tags/tsconfig.build.json
similarity index 86%
rename from src/lib/tag/tsconfig.build.json
rename to src/lib/tags/tsconfig.build.json
index f3094f6da..bc2ab8595 100644
--- a/src/lib/tag/tsconfig.build.json
+++ b/src/lib/tags/tsconfig.build.json
@@ -7,7 +7,7 @@
         "annotateForClosureCompiler": true,
         "strictMetadataEmit": true,
         "flatModuleOutFile": "index.js",
-        "flatModuleId": "@ptsecurity/mosaic/tag",
+        "flatModuleId": "@ptsecurity/mosaic/tags",
         "skipTemplateCodegen": true,
         "fullTemplateTypeCheck": true
     }
diff --git a/src/lib/tree-select/_tree-select-theme.scss b/src/lib/tree-select/_tree-select-theme.scss
index 0cadb00ed..a3b5b9e50 100644
--- a/src/lib/tree-select/_tree-select-theme.scss
+++ b/src/lib/tree-select/_tree-select-theme.scss
@@ -34,8 +34,7 @@
             color: mc-color($second);
         }
 
-        // todo A-black-200 нет в палитре
-        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
+        box-shadow: 0 3px 3px 0 mc-color($second, A200);
 
         background-color: if($is-dark, map-get($second, 700), map-get($background, background));
     }
diff --git a/src/lib/tree-select/tree-select.component.ts b/src/lib/tree-select/tree-select.component.ts
index d284bafff..7ab5f436a 100644
--- a/src/lib/tree-select/tree-select.component.ts
+++ b/src/lib/tree-select/tree-select.component.ts
@@ -73,7 +73,7 @@ import {
     MC_SELECT_SCROLL_STRATEGY
 } from '@ptsecurity/mosaic/core';
 import { McFormField, McFormFieldControl } from '@ptsecurity/mosaic/form-field';
-import { McTag } from '@ptsecurity/mosaic/tag';
+import { McTag } from '@ptsecurity/mosaic/tags';
 import { McTreeSelection, McTreeOption } from '@ptsecurity/mosaic/tree';
 import { defer, merge, Observable, Subject } from 'rxjs';
 import {
diff --git a/src/lib/tree-select/tree-select.module.ts b/src/lib/tree-select/tree-select.module.ts
index e822f5c43..b5fd13412 100644
--- a/src/lib/tree-select/tree-select.module.ts
+++ b/src/lib/tree-select/tree-select.module.ts
@@ -4,7 +4,7 @@ import { OverlayModule } from '@ptsecurity/cdk/overlay';
 import { CdkTreeModule } from '@ptsecurity/cdk/tree';
 import { MC_SELECT_SCROLL_STRATEGY_PROVIDER, McPseudoCheckboxModule } from '@ptsecurity/mosaic/core';
 import { McIconModule } from '@ptsecurity/mosaic/icon';
-import { McTagModule } from '@ptsecurity/mosaic/tag';
+import { McTagsModule } from '@ptsecurity/mosaic/tags';
 import { McTreeModule } from '@ptsecurity/mosaic/tree';
 
 import { McTreeSelect, McTreeSelectTrigger } from './tree-select.component';
@@ -17,7 +17,7 @@ import { McTreeSelect, McTreeSelectTrigger } from './tree-select.component';
         CdkTreeModule,
         McTreeModule,
         McIconModule,
-        McTagModule,
+        McTagsModule,
         McPseudoCheckboxModule
     ],
     exports: [McTreeSelect, McTreeSelectTrigger, CommonModule],
diff --git a/src/lib/tree/tree-selection.ts b/src/lib/tree/tree-selection.ts
index ff111d4a4..9074c34b3 100644
--- a/src/lib/tree/tree-selection.ts
+++ b/src/lib/tree/tree-selection.ts
@@ -148,7 +148,6 @@ export class McTreeSelection extends McTreeSelectionBaseMixin<McTreeOption>
 
     ngAfterContentInit(): void {
         this.keyManager = new ActiveDescendantKeyManager<McTreeOption>(this.options)
-            // .withTypeAhead()
             .withVerticalOrientation(true)
             .withHorizontalOrientation(null);
     }
@@ -160,6 +159,7 @@ export class McTreeSelection extends McTreeSelectionBaseMixin<McTreeOption>
     }
 
     onKeyDown(event: KeyboardEvent) {
+        // tslint:disable-next-line: deprecation
         const keyCode = event.keyCode;
         this.withShift = event.shiftKey;
         this.withCtrl = event.ctrlKey;
diff --git a/tests/karma-system-config.js b/tests/karma-system-config.js
index 0cba8d0c9..462a46941 100644
--- a/tests/karma-system-config.js
+++ b/tests/karma-system-config.js
@@ -71,7 +71,7 @@ System.config({
         '@ptsecurity/mosaic/form-field': 'dist/packages/mosaic/form-field/index.js',
         '@ptsecurity/mosaic/tree': 'dist/packages/mosaic/tree/index.js',
         '@ptsecurity/mosaic/modal': 'dist/packages/mosaic/modal/index.js',
-        '@ptsecurity/mosaic/tag': 'dist/packages/mosaic/tag/index.js',
+        '@ptsecurity/mosaic/tags': 'dist/packages/mosaic/tags/index.js',
         '@ptsecurity/mosaic/tabs': 'dist/packages/mosaic/tabs/index.js',
         '@ptsecurity/mosaic/select': 'dist/packages/mosaic/select/index.js',
         '@ptsecurity/mosaic/sidepanel': 'dist/packages/mosaic/sidepanel/index.js',
diff --git a/tools/webpack/webpack.config.js b/tools/webpack/webpack.config.js
index 2caae8100..158981e97 100644
--- a/tools/webpack/webpack.config.js
+++ b/tools/webpack/webpack.config.js
@@ -48,7 +48,7 @@ module.exports = function (options) {
 
         mode: 'development',
 
-        // devtool: 'source-map',
+        devtool: 'source-map',
 
         resolve: {
             extensions: [ '.ts', '.js' ],