Chip group
A chip group is used to represent an attribute that has been assigned one or more values. An OR relationship is implied between values in the group. Chip groups are useful to express complex filters to a data set, for example. Related design guidelines: Filters
ExamplesCSS VariablesExamples
Chip group with categories overflow expanded
-
Category one
- Chip one
- Chip two
- Chip three
- Chip four
- Chip five
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 |
|---|---|---|
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 | <ul> | Initiates the container used to group chips. Required. |
.pf-c-chip-group__list-item | <li> | Initiates the list item inside of the chip group. Required. |
.pf-c-chip-group__label | <h4> | Initiates the label to be used in the chip group. |
.pf-c-chip-group__close | <div> | Initiates the container used to remove button in the chip group. Required. |
.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--MarginBottom | 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--PaddingRight | 0.5rem | ||
| .pf-c-chip-group | --pf-c-chip-group__label--FontSize | 0.875rem | ||
| .pf-c-chip-group | --pf-c-chip-group__label--Maxwidth | 10rem | ||
| .pf-c-chip-group | --pf-c-chip-group__close--MarginTop | calc(0.25rem * -1) | ||
| .pf-c-chip-group | --pf-c-chip-group--c-chip--MarginRight | 0.25rem | ||
| .pf-c-chip-group | --pf-c-chip-group--c-chip--MarginBottom | 0.25rem | ||
| .pf-c-chip-group .pf-c-chip:last-child | --pf-c-chip-group--c-chip--MarginRight | 0 | ||
