> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/chip-container.md).
# Chip Container
The Avonni Chip Container displays a set of chips — pill-like items — that can optionally be constrained to a single line, collapsed and expanded, or reordered by drag-and-drop.
## Overview
Use the Chip Container when you need to display a compact collection of labeled items (such as tags, categories, or statuses) and want control over how they wrap, collapse, or can be rearranged by users.
## Configuration
To configure the Chip Container, select it on the canvas. The **Edit Chip Container** panel opens on the right with three tabs: **Properties**, **Interactions**, and **Style**. The sections below mirror the Properties tab.
### Data Source
Before the Chip Container can display chips, you must connect it to a data source. Choose the option that matches where your chip data lives:
Manual
Enter data directly into the component configuration.
Variable
This is useful for data that changes based on user interactions or other component logic.
Query
This is the most common option for displaying Salesforce records.
### Data Mapping
When using a dynamic data source, configure the **Data Mappings** section to tell the component how to build chips from your records. Map your data fields to chip attributes such as the label, variant, and avatar so each chip displays the correct information.
### Content
#### Single Line
When enabled, the chips are constrained to a single horizontal line rather than wrapping across multiple rows. Use this when vertical space is limited and you prefer a compact, scrollable layout.
#### Is Collapsible
When enabled, the chip list can be collapsed so that only a summary is visible. Use **Is Collapsible** together with **Is Expanded** to control the initial state of the list.
#### Is Expanded
Controls whether the collapsible chip list starts in the expanded state. This setting is only active when **Is Collapsible** is also enabled.
#### Sortable
When enabled, users can reorder chips by dragging and dropping them, or by using the spacebar key. Configure the **On Reorder** interaction to capture the new order.
#### Alternative Text
A text description of the chip container for screen readers, providing context that may not be apparent from the visible chips alone. Found under **Advanced Options**.
### Set Component Visibility
All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).
## Interactions
[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Chip Container. Configure them from the **Interactions** tab of the Edit Chip Container panel.
### Reorder
Fires when a user reorders chips by drag-and-drop or keyboard. Use this to persist the new order — for example by storing the updated sequence in a variable via the **sortedItems** or **sortedItemsSObject** output attributes.
## Output Variables
The Chip Container exposes these output variables you can reference elsewhere on the page after the user interacts with it.
### Reorder
When a user drags and drops chips into a new order, these variables update with the resulting sequence.
| Output variable | Type | What it returns |
| ------------------------ | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
| **Sorted Items** | Object Collection | The reordered chips as a collection of objects, each with the same properties as the original static data source items. |
| **Sorted Items sObject** | Record Collection (SObject\[]) | The reordered chips as a collection of Salesforce records. Requires a **Query** or **Variable** data source. |
> **Example:** When a user reorders priority tags on a project page, use **Sorted Items sObject** in an **On Reorder** interaction to write the new sequence back to the related records.
### Others
| Output variable | Type | What it returns |
| ------------------- | ------ | --------------------------------------------------------------- |
| **Number of Items** | Number | The total number of chips currently displayed in the container. |
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://docs.avonnicomponents.com/dynamic-components/components/chip-container.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.