# 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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#removable) property and the [`onRemove`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#onremove) callback to manage the selected values.

The following example lets you add contacts through an AutoComplete and remove them from the Chip list.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/chip/use-cases/input/source.txt)

## 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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/chip/use-cases/choice/source.txt)

## 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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chiplistprops#onchange) event when the selection changes.

The following example filters the products in a Grid by the selected categories.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/chip/use-cases/filter/source.txt)

## 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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/chip/use-cases/action/source.txt)

## Suggested Links

* [API Reference of the Chip](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops)
* [API Reference of the ChipList](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chiplistprops)
