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.
Whichever source you choose, every chip carries the same set of attributes. With a Manual source you set them one chip at a time in the Items list; with Variable or Query you map a record field to each of them in Data Mappings.
Label
The text shown on the chip.
Name
The chip's identifier, used when you read the reordered list back. In Data Mappings this is the Key Field.
Variant
The chip's color: Base (default), Brand, Success, Warning, Error, Info, Inverse, Alt-Inverse or Offline.
Outline
Draws the chip as an outline instead of a filled shape.
Background Color / Text Color
Override the variant's colors on that chip.
Hide Text
Hides the label, so the chip renders as a colored circle.
Avatar
Shows an avatar on the chip, as Initials, an Icon Name or an Image Source, in a Circle or Square.
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.
Interactions
Interactions 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.
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
Number of Items
Number
The total number of chips currently displayed in the container.
Styling
Configure the Chip Container's appearance from the Style tab of the Edit Chip Container panel.
Controls the outer spacing around the container.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the container's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Customizes the border surrounding the container.
Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.
Adjusts the block and inline spacing around the container and around each chip.
Chip Container Block Start / Block End / Inline Start / Inline End: Set the spacing around the container.
Chip Block Start / Block End / Inline Start / Inline End: Set the spacing around each chip.
Styles the chip container and the individual chips.
Chip Container: Background Color; Border Color / Border Size / Border Style / Border Radius.
Chip: Label Font Size / Font Weight / Font Style / Line Height; Border Size / Border Style / Border Radius.
Styles an avatar shown inside a chip.
Border Size / Border Color / Border Style: Customize the avatar border.
Initials Font Color / Font Color Hover / Font Weight / Font Weight Hover: Style avatar initials.
Icon Background Color / Icon Foreground Color: Style a fallback icon.
Image Object Fit: Control how an avatar image fills its area.
Sets the background, border, text, and outline text colors for each chip variant (Base, Brand, Error, Info, Inverse, Alt Inverse, Offline, Success, Warning). Each variant exposes:
Background / Border Color / Text Color / Outline Text Color: Set the colors for that variant.
Last updated
Was this helpful?