diff --git a/src/demo-app/chips/chips-demo.html b/src/demo-app/chips/chips-demo.html
index 860caedb0c2b..b55c55954aea 100644
--- a/src/demo-app/chips/chips-demo.html
+++ b/src/demo-app/chips/chips-demo.html
@@ -102,7 +102,7 @@
Stacked Chips
(focus)
event to run custom code.
-
+
{{aColor.name}}
diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts
index de830d015c0b..078fc1cd8e5d 100644
--- a/src/lib/chips/chip-list.ts
+++ b/src/lib/chips/chip-list.ts
@@ -45,6 +45,7 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
host: {
'[attr.tabindex]': '_tabIndex',
'role': 'listbox',
+ '[attr.aria-orientation]': 'ariaOrientation',
'class': 'mat-chip-list',
'(focus)': 'focus()',
@@ -88,6 +89,9 @@ export class MdChipList implements AfterContentInit, OnDestroy {
/** The chip components contained within this chip list. */
chips: QueryList;
+ /** Orientation of the chip list. */
+ @Input('aria-orientation') ariaOrientation: 'horizontal' | 'vertical' = 'horizontal';
+
constructor(protected _renderer: Renderer2, protected _elementRef: ElementRef,
@Optional() private _dir: Directionality) {
}
diff --git a/src/lib/chips/chips.md b/src/lib/chips/chips.md
index 7ae60fe5523c..1e26923b5b79 100644
--- a/src/lib/chips/chips.md
+++ b/src/lib/chips/chips.md
@@ -33,10 +33,21 @@ chips are neither selectable nor focusable. Currently, disabled chips receive no
Users can move through the chips using the arrow keys and select/deselect them with the space. Chips
also gain focus when clicked, ensuring keyboard navigation starts at the appropriate chip.
+### Orientation
+If you want the chips in the list to be stacked vertically, instead of horizontally, you can apply
+the `mat-chip-list-stacked` class, as well as the `aria-orientation="vertical"` attribute:
+
+```html
+
+ Papadum
+ Naan
+ Dal
+
+```
### Theming
The selected color of an `` can be changed by using the `color` property. By default, chips
-use a neutral background color based on the current theme (light or dark). This can be changed to
+use a neutral background color based on the current theme (light or dark). This can be changed to
`'primary'`, `'accent'`, or `'warn'`.
### Accessibility