A chip may contain entities such as a photo, text, rules, an icon, or a contact.

A chip list displays a list of values as individual, keyboard accessible, chips.

Chip List Example

In the following example we demonstrate how to create a simple chip list:

Chip Input Example

The <MatChipInput> directive can be used together with a chip-list to streamline the interaction between the two components. This directive adds chip-specific behaviors to the input element within <mat-form-field> for adding and removing chips. The <input> with MatChipInput can be placed inside or outside the chip-list element.

The following example demonstrates a chip input placed inside the chip-list element: