Examples
Legacy chip group examples without main element
-
Chip one
-
Chip two
-
Chip three
-
Chip one
-
Chip two
-
Chip three
-
Chip four
-
Chip five
-
Chip six
-
Chip one
-
Chip two
-
Chip three
-
Chip one
-
Chip two
-
Chip three
Overview
A chip group is constrained to the width of its container and will wrap when it exceeds that width. An overflow value can be set and when the number of chips exceeds that value, additional chips will be hidden by default. The default overflow value will be set to 3 chips but this can be adjusted per application needs. The toggle button after the last chip allows the group to be expanded (or collapsed).
If you want to create sub-groupings of chips to represent multiple values applied against the same category, chips can be grouped by category. This can be useful in filtering use cases, for example, where you want all items that match more than one value of the same attribute, e.g., ‘status = down OR needs maintenance’.
The chip group requires the chip component.
Accessibility
All single chip accessibility and usage requirements apply.
Attributes for closable chip group button | Applied to | Outcome |
|---|---|---|
role="list" | .pf-c-chip-group__list | Indicates that the chip group list is a list element. This role is redundant since .pf-c-chip-group__list is a <ul> but is required for screen readers to announce the list propertly. Required |
aria-label="[button label text]" | .pf-c-chip-group__close > button | Provides an accessible name for a chip group close when an icon is used instead of text. Required when an icon is used with no supporting text. Required |
aria-labelledby="[id value of .pf-c-chip-group__close > button] [id value of .pf-c-chip-group__label]" | .pf-c-chip-group__close > button | Provides an accessible name for the button. Required |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-chip-group | <div> | Initiates the chip group component. Required. |
.pf-c-chip-group__list | <ul> | Initiates the container for a list of chips. Required. |
.pf-c-chip-group__list-item | <li> | Initiates the list item inside of the chip group. Required. |
.pf-c-chip-group__label | <span> | Initiates the label to be used in the chip group. |
.pf-c-chip-group__close | <div> | Initiates the container used for the button to remove the chip group. |
.pf-c-chip-group__main | <div> | Initiates the container for the label and list elements so that they wrap together. |
.pf-c-button | .pf-c-chip-group__close <button> | Initiates the button used to remove the chip group. |
.pf-m-category | .pf-c-chip-group | Modifies the chip group to support category styling. |
CSS variables
| .pf-c-chip-group | --pf-global--Color--100 | #151515 | ||
| .pf-c-chip-group | --pf-global--Color--200 | #6a6e73 | ||
| .pf-c-chip-group | --pf-global--BorderColor--100 | #d2d2d2 | ||
| .pf-c-chip-group | --pf-global--primary-color--100 | #06c | ||
| .pf-c-chip-group | --pf-global--link--Color | #06c | ||
| .pf-c-chip-group | --pf-global--link--Color--hover | #004080 | ||
| .pf-c-chip-group | --pf-global--BackgroundColor--100 | #fff | ||
| .pf-c-chip-group | --pf-c-chip-group__list--MarginBottom | calc(0.25rem * -1) | ||
| .pf-c-chip-group | --pf-c-chip-group__list--MarginRight | calc(0.25rem * -1) | ||
| .pf-c-chip-group | --pf-c-chip-group--m-category--PaddingTop | 0.25rem | ||
| .pf-c-chip-group | --pf-c-chip-group--m-category--PaddingRight | 0.25rem | ||
| .pf-c-chip-group | --pf-c-chip-group--m-category--PaddingBottom | 0.25rem | ||
| .pf-c-chip-group | --pf-c-chip-group--m-category--PaddingLeft | 0.5rem | ||
| .pf-c-chip-group | --pf-c-chip-group--m-category--BorderRadius | 3px | ||
| .pf-c-chip-group | --pf-c-chip-group--m-category--BackgroundColor | #f0f0f0 | ||
| .pf-c-chip-group | --pf-c-chip-group__label--MarginRight | 0.5rem | ||
| .pf-c-chip-group | --pf-c-chip-group__label--FontSize | 0.875rem | ||
| .pf-c-chip-group | --pf-c-chip-group__label--MaxWidth | 18ch | ||
| .pf-c-chip-group | --pf-c-chip-group__close--MarginTop | calc(0.25rem * -1) | ||
| .pf-c-chip-group | --pf-c-chip-group__close--MarginBottom | calc(0.25rem * -1) | ||
| .pf-c-chip-group | --pf-c-chip-group__list-item--MarginRight | 0.25rem | ||
| .pf-c-chip-group | --pf-c-chip-group__list-item--MarginBottom | 0.25rem | ||
View source on GitHub
