Links

Chip Container

The Chip Container is also available as an Experience Cloud Component.

Overview

The Chip Container Flow Screen Component is a user interface element designed to organize and display a collection of interactive, user-generated tags or labels, commonly called "chips". This component enables users to efficiently add, remove, and edit chips while maintaining a visually appealing and intuitive layout.

Changing the properties

The Avonni Chip Container Flow Screen Component offers a variety of properties to customize its appearance and behavior to suit your needs:
  • Single Line: Enable this property to display all chips on a single line, providing a compact and streamlined layout.
  • Sortable Chips: Activate this property to allow users to sort the chips by dragging and dropping them. Assign an interaction to trigger specific actions when the sorting occurs if needed.
  • Data Source: Assign a data source to generate the Chip Container. Chips can be created manually or dynamically using a variable and assigning a source collection. This flexibility enables you to adapt the Chip Container to various use cases and data structures.

Adding interactions

Interactions define what will happen when users click on an action. You can find a list of interactions that are available here.
Here are the available Actions for the Chip Container Component:
  • On Reorder

Specifications

Attributes

Name
Type
Description
Single Line
String
If present, the chips are limited to one line.
Is Collapsible
String
Text that is displayed when the field is empty, prompts the user for a valid entry.
Is Expanded
String
If present, the chip list can be collapsed. Use is-collapsible with the is-expanded attribute to expand and collapse the list of chips.
Sortable
Boolean
If present, the chips can be reordered by dragging and dropping or using the spacebar key.

Styling Hooks

Chip Container

Name
Description
Background
Define a background color for the chip container
Border Color
Define a border color for the chip container
Border Size
Define a border size for the chip container
Border Style
Define a border style for the chip container
Border Radius
Define a border radius for the chip container

Chip

Name
Description
Label Font Size
Define a specific color for the Text/Icon
Label Font Weight
Define a specific color for the Text/Icon when active
Label Font Style
Define a specific color for the Text/Icon when mouse hover
Border Size
Define a size for the border
Border Style
Define a style for the border
Border Radius
Define a radius for the border
Line Height
Define a line height for the chip

Avatar

Name
Description
Border Size
Define a specific color for the Text/Icon
Border Color
Define a specific color for the Text/Icon when active
Border Style
Define a specific color for the Text/Icon when the mouse hover
Initials Font Color
Initials Font Color Hover
Initial Font Weight
Initial Font Weight Hover
Icon Background Color
Icon Foreground Color
Icon Foregorund Color Default
Image Object Fit

Variant Style

Name
Description
Background
Define a specific color for the Text/Icon
Border Color
Define a specific color for the Text/Icon when active
Text Color
Define a specific color for the Text/Icon when the mouse hover
Outline Text color
Define an outline text color is a property that sets the color of the outline surrounding text.
Last modified 2mo ago