# 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`](/reference/data-model/object-class-properties.md#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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.appfarm.io/library/ui-components/chip-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.