# Pill Container

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FJ8yDLAUz05CO9YybA36g%2Fimage%20(45).avif?alt=media&#x26;token=cdf0ccd2-390c-4069-a7d4-9569cfd0b201" alt="" width="375"><figcaption></figcaption></figure>

***

## Changing the Properties

### Is Collapsible

When `is-collapsible` is checked, the pill list can be collapsed if more pills are available to fit the space available. With the `is-expanded` attribute to expand and collapse the list of pills.&#x20;

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FVDcZan0HjsvnTVNDliax%2F2022-10-25_16-00-52.png?alt=media&#x26;token=aa3b8c9e-248b-4e24-a040-b6d766fa5e4e" alt=""><figcaption></figcaption></figure>

### Making Pills sortable

Pills can be sorted by checking the `Sortable` property. End-users can use their mouse to move pills.

### Adding a Data Source

Using the Data Source section, adding pills to the pill container component is possible. Pills can be added using:&#x20;

* **`Manual`**: Pills values can be added manually. You can add as many pills as you want as long you are defining a label.&#x20;
* **`Variable`**: Pills can be added dynamically by linking them to a source collection from your flow.&#x20;

## Adding Interactions

Interactions define what will happen when users interact with the Pill Container component. You can find a list of interactions available [here](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel).

Here are the available interactions for the Pill Container component:

* On **`Change`**: The event is fired when the value changes using the sortable property.

## Styling the Pill Container

From the Styles panel, you can customize styling attributes for the Pill Container component:&#x20;

* **`Spacing`**: to customize the label that is displayed on top of the data.
* **`Pill`**: to customize the style of the pill.
* **`Pill Container`**: to customize the style of the pill container box if the single line property is checked.

***

## Output Variables

The Pill Container exposes several output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Pill Container component, and pick the output variable you need.

### Item Clicks

When users click on a pill, these variables tell you which pill was clicked.

| Output variable       | Type             | What it returns                                          |
| --------------------- | ---------------- | -------------------------------------------------------- |
| **Clicked Item**      | Record (SObject) | The full Salesforce record of the pill the user clicked. |
| **Clicked Item Name** | Text (String)    | The name of the clicked pill.                            |

> **Example:** Use **Clicked Item** to navigate to a detail screen when a user clicks on a tag or filter pill.

### Action Clicks

When users click an action button on a pill, these variables identify which action was triggered and on which pill.

| Output variable                   | Type             | What it returns                                                                                                                                      |
| --------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Clicked Item Action Item**      | Record (SObject) | The full Salesforce record of the pill where the user clicked an action.                                                                             |
| **Clicked Item Action Name**      | Text (String)    | The name of the action the user clicked (e.g., "Remove", "Edit"). Use in a **Decision** element to route the flow based on which action was pressed. |
| **Clicked Item Action Item Name** | Text (String)    | The name of the pill where the action was clicked.                                                                                                   |

> **Example:** A user clicks "Remove" on a filter pill. Use a **Decision** element to check if **Clicked Item Action Name** equals "Remove", then update the filter collection accordingly.

### Reordered Items

When users drag pills into a new order (requires **Sortable** to be enabled), these variables capture the new sequence.

| Output variable          | Type                              | What it returns                                                                                                                                    |
| ------------------------ | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Sorted Items SObject** | Record Collection (SObject\[])    | All pills in their new order as a collection of Salesforce records.                                                                                |
| **Items**                | Collection (PillContainerItem\[]) | All pills in their new order, using the component's internal format. Use **Sorted Items SObject** instead if you need standard Salesforce records. |
| **Items Serialized**     | Text (String)                     | The reordered pills as a JSON string.                                                                                                              |

> **Example:** After the user reorders priority tags by dragging, pass **Sorted Items SObject** into an **Update Records** element to save the new priority order.

### Component Metadata

| Output variable     | Type    | What it returns                                                                                                                             |
| ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **Number of Items** | Integer | The total number of pills currently loaded in the container. Useful for displaying a count or making decisions when the container is empty. |

***

## Examples

## Specifications

### Attributes

<table><thead><tr><th width="202">Name</th><th width="199.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong><code>alternativeText</code></strong></td><td>String</td><td>Alternative text used to describe the pill container. If the pill container is sortable, it should describe its behavior, for example: "Sortable pills. Press spacebar to grab or drop an item. Press right and left arrow keys to change position. Press escape to cancel.</td></tr><tr><td><strong><code>isCollapsible</code></strong></td><td>Boolean</td><td>If present, the pill list can be collapsed. Use <code>is-collapsible</code> with the <code>is-expanded</code> attribute to expand and collapse the list of pills.</td></tr><tr><td><strong><code>isExpanded</code></strong></td><td>Boolean</td><td>If present and <code>is-collapsible</code> too, the list of pills is expanded. This attribute is ignored when <code>is-collapsible</code> is false, and the list of pills is expanded even if <code>is-expanded</code> is false or not set.</td></tr><tr><td><strong><code>singleLine</code></strong></td><td>Boolean</td><td>If present, the pills are limited to one line. This attribute overrides the <code>is-collapsible</code> and <code>is-expanded</code> attributes.</td></tr><tr><td><strong><code>sortable</code></strong></td><td>Boolean</td><td>If present, the pills can be reordered by dragging and dropping, or using the spacebar key.</td></tr><tr><td><strong><code>items</code></strong></td><td>PillContainerItem[]</td><td></td></tr></tbody></table>

### Events

| Name    | Description                                     |
| ------- | ----------------------------------------------- |
| reorder | The event fired when a user reorders the pills. |

### Styling Hooks

#### Spacing

| Name                        | Description |
| --------------------------- | ----------- |
| Pill Block Start            |             |
| Pill Block End              |             |
| Pill Inline Start           |             |
| Pill Inline End             |             |
| Pill Container Block Start  |             |
| Pill Container Block End    |             |
| Pill Container Inline Start |             |
| Pill Container Inline End   |             |

#### Pill

| Name               | Description |
| ------------------ | ----------- |
| Color              |             |
| Background         |             |
| Background Hover   |             |
| Border Color       |             |
| Border Color Focus |             |
| Border Size        |             |
| Border Radius      |             |
| Shadow             |             |
| Shadow Focus       |             |

#### Pill Container

| Name          | Description |
| ------------- | ----------- |
| Background    |             |
| Border Color  |             |
| Border Radius |             |