Chip Use Cases
The Chip component can be used in different use cases as it provides a convenient option for displaying a complex piece of information in a compact form. It is especially useful for representing an entity which can be added or removed from a list, or as an action item.
Input Chips
Input chips represent an attribute, text, or entity that users can add or remove dynamically. Use the removable property and the onRemove callback to manage the selected values.
The following example lets you add contacts through an AutoComplete and remove them from the Chip list.
Choice Chips
Choice chips are a group of multiple chip elements containing at least two options that can be selected by the user. Depending on the selection type (single, multiple, or none), different styling is applied to indicate the user preferences.
The following example shows the single, multiple, and no selection modes.
Filter Chips
Filter chips represent filters for a collection and, typically, use tags or descriptive words to filter content. They are a good alternative to toggle buttons or checkboxes. Use a ChipList with selection="multiple" so users can apply several filters at the same time, and handle the onChange event when the selection changes.
The following example filters the products in a Grid by the selected categories.
Action Chips
Action chips appear in a set and can trigger an action, show progress or a confirmation that are related to the primary content. Use the Chip onClick callback to respond when a user activates a chip. Use a Button when an action needs a persistent, consistent placement.
The following example displays action chips alongside primary content and shows a notification when you click an action.