# Chip group

The UI component **Chip Group** is a data iterator which display each data item as a chip. You can add an *On Click* action and an *On Delete Click* action to the Chip, which will run in context of a given data item. Each Chip may also be styled using Conditional Styles.

A Chip Group is bound to a Data Source. You may select one or many Chips. The *Selected* attribute of the items in the Data Source is toggled (true/false) when the user clicks the Chips, and you may use that information further in your logic (e.g. save the user preferences) or for the Conditional Styles.

{% hint style="info" %}
An example setup of a Chip Group is showcased in our [Showroom](https://showroom.appfarm.app/ui-components/chipgroup)! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register [here](https://showroom.appfarm.app/sign-up).
{% endhint %}

## Settings

Here are some of the properties in Appfarm Create which are custom for a **Chip Group:**

### **Data Source**

The Data Source to iterate. One chip will be displayed per item in this Data Source (after Filter has been applied).

You may also select a multi-reference property (an [Object Class Property with Cardinality `Many`](https://docs.appfarm.io/reference/data-model/object-class-properties#general-properties)), and iterate the referenced objects.

### **Filter / Conditional Filter / Sorting**

Apply filters to this Data Source, i.e. to limit which items to display. These filters may be conditional. You may also add sorting of the Chips.

### **Label**

Select the property of the Data Source to display as title for each Chip

### **Icon / Icon Value**

You may select an icon to display for each Chip (optional).

### Appearance and Conditional Properties

Control the look-and-feel of these Chips. You may also add conditional properties, for example to have a different Icon given some condition.

### Event Handlers

Connect an Action to the Click-event of each chip. By connecting an action to the On Delete Click event, a Delete-icon will be added to the right-side of the Chip.