diff --git a/src/demo-app/chips/chips-demo.html b/src/demo-app/chips/chips-demo.html
new file mode 100644
index 000000000000..99f8b4ea45a3
--- /dev/null
+++ b/src/demo-app/chips/chips-demo.html
@@ -0,0 +1,12 @@
+
+
+ Static Chips
+
+
+ Basic Chip
+ Primary
+ Accent
+ Warn
+
+
+
\ No newline at end of file
diff --git a/src/demo-app/chips/chips-demo.scss b/src/demo-app/chips/chips-demo.scss
new file mode 100644
index 000000000000..996d6cfd641f
--- /dev/null
+++ b/src/demo-app/chips/chips-demo.scss
@@ -0,0 +1,2 @@
+.chips-demo {
+}
\ No newline at end of file
diff --git a/src/demo-app/chips/chips-demo.ts b/src/demo-app/chips/chips-demo.ts
new file mode 100644
index 000000000000..b05b80941b57
--- /dev/null
+++ b/src/demo-app/chips/chips-demo.ts
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+ moduleId: module.id,
+ selector: 'chips-demo',
+ templateUrl: 'chips-demo.html',
+ styleUrls: ['chips-demo.scss']
+})
+export class ChipsDemo {
+}
diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts
index 5f4a02dc5f68..ec35c947b742 100644
--- a/src/demo-app/demo-app-module.ts
+++ b/src/demo-app/demo-app-module.ts
@@ -13,6 +13,7 @@ import {IconDemo} from './icon/icon-demo';
import {GesturesDemo} from './gestures/gestures-demo';
import {InputDemo} from './input/input-demo';
import {CardDemo} from './card/card-demo';
+import {ChipsDemo} from './chips/chips-demo';
import {RadioDemo} from './radio/radio-demo';
import {ButtonToggleDemo} from './button-toggle/button-toggle-demo';
import {ProgressCircleDemo} from './progress-circle/progress-circle-demo';
@@ -49,6 +50,7 @@ import {ProjectionDemo, ProjectionTestComponent} from './projection/projection-d
ButtonDemo,
ButtonToggleDemo,
CardDemo,
+ ChipsDemo,
CheckboxDemo,
DemoApp,
DialogDemo,
diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts
index ae2ab491bdf6..2b229a414054 100644
--- a/src/demo-app/demo-app/demo-app.ts
+++ b/src/demo-app/demo-app/demo-app.ts
@@ -23,6 +23,7 @@ export class DemoApp {
{name: 'Button', route: 'button'},
{name: 'Button Toggle', route: 'button-toggle'},
{name: 'Card', route: 'card'},
+ {name: 'Chips', route: 'chips'},
{name: 'Checkbox', route: 'checkbox'},
{name: 'Dialog', route: 'dialog'},
{name: 'Gestures', route: 'gestures'},
diff --git a/src/demo-app/demo-app/routes.ts b/src/demo-app/demo-app/routes.ts
index f2e1cf7b68e9..285be668b898 100644
--- a/src/demo-app/demo-app/routes.ts
+++ b/src/demo-app/demo-app/routes.ts
@@ -22,6 +22,7 @@ import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
import {SliderDemo} from '../slider/slider-demo';
import {RadioDemo} from '../radio/radio-demo';
import {CardDemo} from '../card/card-demo';
+import {ChipsDemo} from '../chips/chips-demo';
import {MenuDemo} from '../menu/menu-demo';
import {RippleDemo} from '../ripple/ripple-demo';
import {DialogDemo} from '../dialog/dialog-demo';
@@ -34,6 +35,7 @@ export const DEMO_APP_ROUTES: Routes = [
{path: '', component: Home},
{path: 'button', component: ButtonDemo},
{path: 'card', component: CardDemo},
+ {path: 'chips', component: ChipsDemo},
{path: 'radio', component: RadioDemo},
{path: 'select', component: SelectDemo},
{path: 'sidenav', component: SidenavDemo},
diff --git a/src/lib/chips/README.md b/src/lib/chips/README.md
new file mode 100644
index 000000000000..8cad19fae5ff
--- /dev/null
+++ b/src/lib/chips/README.md
@@ -0,0 +1,7 @@
+# md-chips
+
+`md-chips` provides a horizontal display of (optionally) selectable, addable, and removable,
+items and an input to create additional ones (again; optional). You can read more about chips
+in the [Material Design spec](https://material.google.com/components/chips.html).
+
+This is a placeholder README for the eventual chips component.
diff --git a/src/lib/chips/_chips-theme.scss b/src/lib/chips/_chips-theme.scss
new file mode 100644
index 000000000000..5f0826096c76
--- /dev/null
+++ b/src/lib/chips/_chips-theme.scss
@@ -0,0 +1,29 @@
+@import '../core/theming/theming';
+
+@mixin md-chips-theme($theme) {
+ $is-dark-theme: map-get($theme, is-dark);
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+
+ .md-chip {
+ background-color: #e0e0e0;
+ color: rgba(0, 0, 0, 0.87);
+ }
+
+ .md-chip.selected {
+ &.md-primary {
+ background-color: md-color($primary, 500);
+ color: md-contrast($primary, 500);
+ }
+ &.md-accent {
+ background-color: md-color($accent, 500);
+ color: md-contrast($accent, 500);
+ }
+ &.md-warn {
+ background-color: md-color($warn, 500);
+ color: md-contrast($warn, 500);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts
new file mode 100644
index 000000000000..14c1b69fa674
--- /dev/null
+++ b/src/lib/chips/chip-list.spec.ts
@@ -0,0 +1,53 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, DebugElement} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {MdChipList, MdChipsModule} from './index';
+
+describe('MdChip', () => {
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [MdChipsModule.forRoot()],
+ declarations: [
+ StaticChipList
+ ]
+ });
+
+ TestBed.compileComponents();
+ }));
+
+ describe('basic behaviors', () => {
+ let chipListDebugElement: DebugElement;
+ let chipListNativeElement: HTMLElement;
+ let chipListInstance: MdChipList;
+ let testComponent: StaticChipList;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(StaticChipList);
+ fixture.detectChanges();
+
+ chipListDebugElement = fixture.debugElement.query(By.directive(MdChipList));
+ chipListNativeElement = chipListDebugElement.nativeElement;
+ chipListInstance = chipListDebugElement.componentInstance;
+ testComponent = fixture.debugElement.componentInstance;
+ });
+
+ it('adds the `md-chip-list` class', () => {
+ expect(chipListNativeElement.classList).toContain('md-chip-list');
+ });
+ });
+});
+
+@Component({
+ template: `
+
+ {{name}} 1
+ {{name}} 2
+ {{name}} 3
+
+ `
+})
+class StaticChipList {
+ name: 'Test';
+}
diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts
new file mode 100644
index 000000000000..1d7a2c778e27
--- /dev/null
+++ b/src/lib/chips/chip-list.ts
@@ -0,0 +1,44 @@
+import {
+ ChangeDetectionStrategy,
+ Component,
+ ElementRef,
+ ModuleWithProviders,
+ NgModule,
+ ViewEncapsulation
+} from '@angular/core';
+
+import {MdChip} from './chip';
+
+@Component({
+ moduleId: module.id,
+ selector: 'md-chip-list',
+ template: ``,
+ host: {
+ // Properties
+ 'tabindex': '0',
+ 'role': 'listbox',
+ 'class': 'md-chip-list'
+ },
+ styleUrls: ['chips.css'],
+ encapsulation: ViewEncapsulation.None,
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MdChipList {
+ constructor(private _elementRef: ElementRef) {}
+
+ ngAfterContentInit(): void {}
+}
+
+@NgModule({
+ imports: [],
+ exports: [MdChipList, MdChip],
+ declarations: [MdChipList, MdChip]
+})
+export class MdChipsModule {
+ static forRoot(): ModuleWithProviders {
+ return {
+ ngModule: MdChipsModule,
+ providers: []
+ };
+ }
+}
diff --git a/src/lib/chips/chip.spec.ts b/src/lib/chips/chip.spec.ts
new file mode 100644
index 000000000000..15b0157012d6
--- /dev/null
+++ b/src/lib/chips/chip.spec.ts
@@ -0,0 +1,47 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, DebugElement} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {MdChip, MdChipsModule} from './index';
+
+describe('MdChip', () => {
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [MdChipsModule.forRoot()],
+ declarations: [
+ SingleChip
+ ]
+ });
+
+ TestBed.compileComponents();
+ }));
+
+ describe('basic behaviors', () => {
+ let chipDebugElement: DebugElement;
+ let chipNativeElement: HTMLElement;
+ let chipInstance: MdChip;
+ let testComponent: SingleChip;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SingleChip);
+ fixture.detectChanges();
+
+ chipDebugElement = fixture.debugElement.query(By.directive(MdChip));
+ chipNativeElement = chipDebugElement.nativeElement;
+ chipInstance = chipDebugElement.componentInstance;
+ testComponent = fixture.debugElement.componentInstance;
+ });
+
+ it('adds the `md-chip` class', () => {
+ expect(chipNativeElement.classList).toContain('md-chip');
+ });
+ });
+});
+
+@Component({
+ template: `{{name}}`
+})
+class SingleChip {
+ name: 'Test';
+}
diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts
new file mode 100644
index 000000000000..461834f05266
--- /dev/null
+++ b/src/lib/chips/chip.ts
@@ -0,0 +1,17 @@
+import { Component, ElementRef, Renderer } from '@angular/core';
+
+@Component({
+ selector: 'md-chip, [md-chip]',
+ template: ``,
+ host: {
+ // Properties
+ 'class': 'md-chip',
+ 'tabindex': '-1',
+ 'role': 'option'
+ }
+})
+export class MdChip {
+ constructor(protected _renderer: Renderer, protected _elementRef: ElementRef) {}
+
+ ngAfterContentInit(): void {}
+}
diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss
new file mode 100644
index 000000000000..7fa57fd207f8
--- /dev/null
+++ b/src/lib/chips/chips.scss
@@ -0,0 +1,16 @@
+$md-chip-vertical-padding: 8px;
+$md-chip-horizontal-padding: 12px;
+
+.md-chip-list {
+ padding: $md-chip-horizontal-padding;
+}
+
+.md-chip {
+ display: inline-block;
+ padding: $md-chip-vertical-padding $md-chip-horizontal-padding
+ $md-chip-vertical-padding $md-chip-horizontal-padding;
+ border-radius: $md-chip-horizontal-padding * 2;
+
+ font-size: 13px;
+ line-height: 16px;
+}
diff --git a/src/lib/chips/index.ts b/src/lib/chips/index.ts
new file mode 100644
index 000000000000..938151ce2bea
--- /dev/null
+++ b/src/lib/chips/index.ts
@@ -0,0 +1,2 @@
+export * from './chip-list';
+export * from './chip';
diff --git a/src/lib/core/theming/_all-theme.scss b/src/lib/core/theming/_all-theme.scss
index 084e2585350e..4c7a252ea4c4 100644
--- a/src/lib/core/theming/_all-theme.scss
+++ b/src/lib/core/theming/_all-theme.scss
@@ -4,6 +4,7 @@
@import '../../button-toggle/button-toggle-theme';
@import '../../card/card-theme';
@import '../../checkbox/checkbox-theme';
+@import '../../chips/chips-theme';
@import '../../dialog/dialog-theme';
@import '../../grid-list/grid-list-theme';
@import '../../icon/icon-theme';
@@ -29,6 +30,7 @@
@include md-button-toggle-theme($theme);
@include md-card-theme($theme);
@include md-checkbox-theme($theme);
+ @include md-chips-theme($theme);
@include md-dialog-theme($theme);
@include md-grid-list-theme($theme);
@include md-icon-theme($theme);
diff --git a/src/lib/index.ts b/src/lib/index.ts
index e242a9fc8777..7202a6b57f55 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -4,6 +4,7 @@ export * from './module';
export * from './button/index';
export * from './button-toggle/index';
export * from './card/index';
+export * from './chips/index';
export * from './checkbox/index';
export * from './dialog/index';
export * from './grid-list/index';
diff --git a/src/lib/module.ts b/src/lib/module.ts
index 31d18001e089..1a5d835c1bac 100644
--- a/src/lib/module.ts
+++ b/src/lib/module.ts
@@ -21,6 +21,7 @@ import {MdSidenavModule} from './sidenav/index';
import {MdListModule} from './list/index';
import {MdGridListModule} from './grid-list/index';
import {MdCardModule} from './card/index';
+import {MdChipsModule} from './chips/index';
import {MdIconModule} from './icon/index';
import {MdProgressCircleModule} from './progress-circle/index';
import {MdProgressBarModule} from './progress-bar/index';
@@ -37,6 +38,7 @@ const MATERIAL_MODULES = [
MdButtonModule,
MdButtonToggleModule,
MdCardModule,
+ MdChipsModule,
MdCheckboxModule,
MdDialogModule,
MdGridListModule,
@@ -68,6 +70,7 @@ const MATERIAL_MODULES = [
imports: [
MdButtonModule.forRoot(),
MdCardModule.forRoot(),
+ MdChipsModule.forRoot(),
MdCheckboxModule.forRoot(),
MdGridListModule.forRoot(),
MdInputModule.forRoot(),