Chip

Angular Material Chips

Plain Chips

Plain Angular Material Chips (mat-chip) which are not wrapped inside a chip-list

Apple Banana Tomato Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia Milk

Basic Chips (mat-basic-chip)

Plain Angular Material Chips (mat-basic-chip) which are not wrapped inside a chip-list

Apple Banana Milk Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia Tomato (disabled)

Chips (mat-chip) wrapped in a chip set (mat-chip-set)

Apple Milk Tomato

Chips in a listbox (mat-chip-listbox and mat-chip-option)

You can select multiple chips.

Summer Meteorology Chip (disabled) Season Beach Southern Hemisphere Daylight Thunderstorm Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia

Chips in a listbox (mat-chip-listbox and mat-chip-option)

Summer Meteorology Season Beach Hawaii Cocktail Cloudless Disabled Cloudless Selected Disabled Cloudless

BCI Chips

Since Angular Material changed the implementation of the chips there are now two categories of chips. Removable and Selectable. You cannot have both combined in one chip. Therefore we introduce the new bci-chip-selectable chip. This chip is selectable via click. The bci-chip can be used as a removable one. Both bci-chips have the same features like before Web Core 17. They differ only for the option to select and remove.

Bci Chip Selectable

Bci Chips (bci-chip-selectable) warpped in a mat-chip-listbox
Apple Banana Tomato Milk Cacao milk Cucumber

Selected Chips with truncated text (disabled)

I am not clickable! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia

Chips with shrinked content and tooltip

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia Hover over the chips to see the full content within a tooltip.

Multiple Chips together

This bci chip selectable is disabled This chip is selected This chip is selected and disabled Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia Daylight Thunderstorm Solar Term Midsummer Day Water Sports Sun Outdoor Roadtrip Hawaii Cocktail Cloudless

Bci Chip (bci-chip)

Removable Chips
Removable Chip Remove me! This chip is removable Via the 'removed' Event you can integrate your own procedure for removing a chip. In this demo just a message is dropped as toast.
Removable Chips (disabled)
Removable Chip Remove me! This chip is removable