Comment on page

Pill Container

A pill represents an object that can be viewed with or without an icon.

Overview
The Pill Container component typically consists of a horizontal row of items or options, each represented by a small, rounded rectangle, or "pill," that displays a label or icon. The pills may be formatted in various ways, such as using different colors or font sizes, to help them stand out and convey the desired message or concept.
The Pill Container component may include features such as moving pills. You can also customize the appearance and functionality of the container by using the available formatting and customization options.
Works on Desktop and Mobile
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. 
Making Pills sortable
Pills can be sortable 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: 
Manual: Pills values can be added manually. You can add as many pills as you want as long you are defining a label. 
Variable: Pills can be added dynamically by linking them to a source collection from your flow. 
Adding Interactions
Interactions define what will happen when users interact with the Pill Container component. You can find a list of interactions available here.
Here are the available interactions for the Pill Container component:
On Change: The event is fired when the value changes when using the sortable property.
Styling the Pill Container
From the Styles panel, you can customize styling attributes for the Pill Container component: 
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.
Examples
Specifications
Attributes
Name
Type
Description
alternativeText
String
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.
isCollapsible
Boolean
If present, the pill list can be collapsed. Use is-collapsible with the is-expanded attribute to expand and collapse the list of pills.
isExpanded
Boolean
If present and is-collapsible too, the list of pills is expanded. This attribute is ignored when is-collapsible is false, and the list of pills is expanded even if is-expanded is false or not set.
singleLine
Boolean
If present, the pills are limited to one line. This attribute overrides the is-collapsible and is-expanded attributes.
sortable
Boolean
If present, the pills can be reordered by dragging and dropping, or using the spacebar key.
items
PillContainerItem[]
​
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
​

Name	Type	Description
`alternativeText`	String	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.
`isCollapsible`	Boolean	If present, the pill list can be collapsed. Use `is-collapsible` with the `is-expanded` attribute to expand and collapse the list of pills.
`isExpanded`	Boolean	If present and `is-collapsible` too, the list of pills is expanded. This attribute is ignored when `is-collapsible` is false, and the list of pills is expanded even if `is-expanded` is false or not set.
`singleLine`	Boolean	If present, the pills are limited to one line. This attribute overrides the `is-collapsible` and `is-expanded` attributes.
`sortable`	Boolean	If present, the pills can be reordered by dragging and dropping, or using the spacebar key.
`items`	PillContainerItem[]

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

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

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

Name	Description
Background
Border Color
Border Radius

Last modified 16d ago