Pill Container

A lightning-pill-container component represents a list of pills in a container that resembles an input field. Use lightning-pill-container to indicate a user’s selections when filtering a list, such as from a multi-select picklist.

lightning-pill-container includes pills by using the lightning-pill component, which can append an icon or avatar next to the text label.

To specify the pills, set the items attribute to an array of values in your component’s JavaScript.

By default, all pills in the container wrap to additional lines if they can’t fit on one line. For information about changing the behavior, see Manage Pill Layout in the Container.

This example creates three pills: a text-only pill, a pill with a link and an avatar, and a pill with an icon.

1<template>
2    <lightning-pill-container items={items}> </lightning-pill-container>
3</template>

1import { LightningElement } from "lwc";
2
3export default class PillContainerExample extends LightningElement {
4  items = [
5    {
6      label: "My Pill",
7      name: "mypill",
8    },
9    {
10      type: "avatar",
11      label: "Avatar Pill",
12      href: "https://www.example.com",
13      name: "avatarpill",
14      src: "/my/path/avatar.jpg",
15      fallbackIconName: "standard:user",
16      variant: "circle",
17      alternativeText: "User avatar",
18    },
19    {
20      type: "icon",
21      label: "Icon Pill",
22      name: "iconpill",
23      iconName: "standard:account",
24      alternativeText: "Account",
25    },
26  ];
27}

lightning-pill-container implements several designs in the Salesforce Lightning Design System (SLDS). The designs adapt to SLDS 1 or SLDS 2 styling based on the org’s theme or the container app that you use.

A text-only pill supports several attributes. Use these attributes to create a pill with an avatar or icon.

• label: Required. The text label in the pill.
• name: The name for the pill. This value is optional and can be used to identify the pill in a callback.

To create a pill with a link, use the following attribute.

• href: Required. The URL for the link.

To create a pill with an avatar, use the following attributes.

• type: The media type. Use avatar.
• src: Required. The URL of the avatar.
• fallbackIconName: The Lightning Design System name of the icon to use as a fallback when the image fails to load. Names follow the format ‘standard:account’ where ‘standard’ is the category, and ‘account’ is the specific icon to include. Only icons from the standard and custom categories are allowed.
• variant: Changes the shape of the avatar. Valid values are empty, circle, and square. This value defaults to square.
• alternativeText: The alternative text used to describe the avatar, which appears as hover text on the image.

To create a pill with an icon, use these attributes.

• type: The media type. Use icon.
• iconName: Required. The Lightning Design System name of the icon. Names are written in the format ‘utility:down’ where ‘utility’ is the category, and ‘down’ is the specific icon to include. Supports utility icons only.
• alternativeText: The alternative text used to describe the icon. Describe what happens when you click the button, for example ‘Upload File’, not what the icon looks like, ‘Paperclip’.

lightning-pill-container provides two variants: bare and standard (default). They’re visually the same. However, the standard variant renders pills in an unordered list element. For more information, see the Accessibility section.

Clicking the remove button triggers the onitemremove handler.

1<template>
2    <lightning-pill-container items={items} onitemremove={handleItemRemove}>
3    </lightning-pill-container>
4</template>

You can retrieve the name of the pill that’s clicked in the event handler and remove the pill from view.

1import { LightningElement, track } from "lwc";
2
3export default class PillContainerRemoveExample extends LightningElement {
4  @track items = [
5    {
6      label: "My Pill",
7      name: "mypill",
8    },
9    {
10      type: "avatar",
11      label: "Avatar Pill",
12      name: "avatarpill",
13      src: "/my/path/avatar.jpg",
14      fallbackIconName: "standard:user",
15      variant: "circle",
16      alternativeText: "User avatar",
17    },
18    {
19      type: "icon",
20      label: "Icon Pill",
21      name: "iconpill",
22      iconName: "standard:account",
23      alternativeText: "Account",
24    },
25  ];
26
27  handleItemRemove(event) {
28    const name = event.detail.item.name;
29    alert(name + " pill was removed!");
30    const index = event.detail.index;
31    this.items.splice(index, 1);
32  }
33}

Several boolean attributes control the layout of pills in the container. These attributes are set to false by default, which makes pills wrap to multiple lines.

• is-collapsible: Determines whether the list of pills can be expanded and collapsed. If is-collapsible is true, is-expanded can determine whether a pill list displays all the pills or one line of pills. If is-collapsible is false or not specified, the is-expanded attribute has no effect regardless of its value.
• is-expanded: Determines whether the full list of pills is shown. Set is-collapsible to true if you want to set is-expanded to expand and collapse the list. If you set is-expanded to false and don’t set is-collapsible to true, the list is expanded.
• single-line: Specifies that the pill container can display one line of pills. By default, if pills can’t fit on one line, they’re wrapped to additional lines to fit the container. Set single-line to true to limit pill display to one line. This attribute overrides is-collapsible and is-expanded.

If all pills aren’t displayed, the component shows a text button indicating how many more pills there are. For example, if there are five more pills that aren’t displayed, the text button shows +5 more. The text button fires the focus event when you click it.

To display a long list of pills as collapsed, set is-collapsible to true and optionally set is-expanded to false. Otherwise, pills are expanded by default.

Use is-collapsible and is-expanded to programmatically expand and collapse the pills.

This example sets is-collapsible and uses a button to change the value of is-expanded.

1<template>
2    <div style="width: 600px">
3            <lightning-pill-container
4                items={items}
5                is-collapsible
6                is-expanded={isExpanded}
7            >
8            </lightning-pill-container>
9    </div>
10    <lightning-button onclick={setExpanded} label="Expand and Collapse"></lightning-button>
11</template>

The list of pills is initially collapsed. The button expands and collapses the list.

1import { LightningElement } from "lwc";
2
3export default class PillContainerCanCollapse extends LightningElement {
4  isExpanded = false;
5
6  setExpanded(event) {
7    this.isExpanded = !this.isExpanded;
8  }
9
10  items = [
11    {
12      //define the pills
13    },
14  ];
15}

If all pills aren’t displayed, the component shows a text button labeled +n more to indicate more pills can be displayed. By default, lightning-pill-container doesn’t handle the focus event that’s fired when you click the button. You can handle the event to display more pills or write logic to do something else when the button is clicked.

This example sets the pills to be collapsible but not expanded and handles the focus event.

1<template>
2    <div style="width: 600px">
3            <lightning-pill-container
4                items={items}
5                is-collapsible={collapsible}
6	            is-expanded={expanded}
7                onfocus={handlePillExpansion}
8            >
9            </lightning-pill-container>
10    </div>
11  </template>

The list of pills is initially collapsed. When there are too many pills to show, the text button labeled +n more displays. The handler for the focus event enables all the pills to display.

1import { LightningElement } from "lwc";
2
3export default class PillContainerMoreButtonExpands extends LightningElement {
4  collapsible = true;
5  expanded = false;
6
7  handlePillExpansion() {
8    this.expanded = true;
9  }
10
11  items = [
12    {
13      //define the pills
14    },
15  ];
16}

Use a combination of variants and utility classes to customize your pills.

When using a lightning-avatar or lightning-icon with the pill, consider the variants on those components.

To apply additional styling, use the SLDS utility classes with the class attribute.

Component styling hooks provide CSS custom properties that use the --slds-c-* prefix and they change styling for specific elements or properties of a component. Component styling hooks are supported for SLDS 1 only. See the SLDS 1 component blueprints for available component styling hooks.

For more information, see Style Components Using Lightning Design System Styling Hooks in the Lightning Web Components Developer Guide.

lightning-pill-container renders pills using lightning-pill. Use the --slds-c-pill-* custom properties on lightning-pill. CSS custom properties for pill containers work only with particular lightning-pill-container variants for the remove button.

By default, lightning-pill-container renders pills using the standard variant, which uses an unordered list element to display pills. Press the Tab key to focus on the first pill and use the Left Arrow and Right Arrow keys to navigate through the pills. Use the Tab key to navigate to the remove button in a pill with a link. Use arrow keys to navigate between pills. The focus goes to a link if present, otherwise focus goes to the remove button.

The bare variant only supports the Tab key for navigating between focusable elements in the container’s pills. The arrow keys aren’t supported.

On mobile devices, both container variants display pills with the close button as a focusable element for accessibility.

To remove a pill, press Enter or the space bar when the pill’s remove button receives focus. On mobile devices, you can tap the remove button to remove a pill.

For pills with links, use the Tab key or arrow keys to focus on the pill’s link, then press Enter to navigate to the link target. If you don’t navigate away from the pill, tabbing again puts focus on the remove button.

itemremove

The event fired when a pill is removed.

The itemremove event returns the following parameters.

The event properties are as follows.