Static Chips

Simple

Chip 1 Chip 2 Chip 3

Unstyled

Basic Chip 1 Basic Chip 2 Basic Chip 3

With avatar, icons, and color

home Home cancel P Portel cancel M Molly Koby cancel Razzle Mal Husi cancel Good star Bad star_border

With Events

With Events cancel
{{message}}
 Selectable Chips

Single selection

Extra Small Small Medium Large

Multi selection

Open Now Takes Reservations Pet Friendly Good for Brunch Input Chips

The <mat-chip-grid> component pairs with the matChipInputFor directive to convert user input text into chips. They can be used inside a <mat-form-field>.

Input is last child of chip grid

{{person.name}} cancel

Input is next sibling child of chip grid

{{person.name}} cancel

The example above has overridden the [separatorKeys] input to allow for ENTER, COMMA and SEMICOLON keys.

Options

Add on Blur

Miscellaneous

Stacked

You can also stack the chips if you want them on top of each other.

{{aColor.name}}

NgModel with multi selection

{{aColor.name}} The selected colors are {{color}}{{isLast ? '' : ', '}}.

NgModel with single selection

{{aColor.name}} The selected color is {{selectedColor}}.