Skip to Content
Patternfly Logo

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 Variables

Examples

Simple inline chip group overflow

  • Chip one
  • Chip two
  • Chip three

Simple inline chip group expanded

  • Chip one
  • Chip two
  • Chip three
  • Chip four
  • Chip five

Chip group with categories

  • Chip one
  • Chip two
  • Chip three

Chip group with categories overflow

  • Chip one
  • Chip two
  • Chip three

Chip group with categories overflow expanded

  • Chip one
  • Chip two
  • Chip three
  • Chip four
  • Chip five

Chip group with categories removable

  • 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 buttonApplied toOutcome
role="list".pf-c-chip-group__listIndicates 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 > buttonProvides 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 > buttonProvides an accessible name for the button. Required

Usage

ClassApplied toOutcome
.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-button.pf-c-chip-group__close <button>Initiates the button used to remove the chip group.
.pf-m-category.pf-c-chip-groupModifies the chip group to support category styling.

CSS Variables

.pf-c-chip-group--pf-global--Color--100global_Color_100
#151515
.pf-c-chip-group--pf-global--Color--200global_Color_200
#6a6e73
.pf-c-chip-group--pf-global--BorderColor--100global_BorderColor_100
#d2d2d2
.pf-c-chip-group--pf-global--primary-color--100global_primary_color_100
#06c
.pf-c-chip-group--pf-global--link--Colorglobal_link_Color
#06c
.pf-c-chip-group--pf-global--link--Color--hoverglobal_link_Color_hover
#004080
.pf-c-chip-group--pf-global--BackgroundColor--100global_BackgroundColor_100
#fff
.pf-c-chip-group--pf-c-chip-group__list--MarginBottomc_chip_group__list_MarginBottom
calc(0.25rem * -1)
.pf-c-chip-group--pf-c-chip-group__list--MarginRightc_chip_group__list_MarginRight
calc(0.25rem * -1)
.pf-c-chip-group--pf-c-chip-group--m-category--PaddingTopc_chip_group_m_category_PaddingTop
0.25rem
.pf-c-chip-group--pf-c-chip-group--m-category--PaddingRightc_chip_group_m_category_PaddingRight
0.25rem
.pf-c-chip-group--pf-c-chip-group--m-category--PaddingBottomc_chip_group_m_category_PaddingBottom
0.25rem
.pf-c-chip-group--pf-c-chip-group--m-category--PaddingLeftc_chip_group_m_category_PaddingLeft
0.5rem
.pf-c-chip-group--pf-c-chip-group--m-category--BorderRadiusc_chip_group_m_category_BorderRadius
3px
.pf-c-chip-group--pf-c-chip-group--m-category--BackgroundColorc_chip_group_m_category_BackgroundColor
#f0f0f0
.pf-c-chip-group--pf-c-chip-group__label--MarginRightc_chip_group__label_MarginRight
0.5rem
.pf-c-chip-group--pf-c-chip-group__label--FontSizec_chip_group__label_FontSize
0.875rem
.pf-c-chip-group--pf-c-chip-group__label--MaxWidthc_chip_group__label_MaxWidth
18ch
.pf-c-chip-group--pf-c-chip-group__close--MarginTopc_chip_group__close_MarginTop
calc(0.25rem * -1)
.pf-c-chip-group--pf-c-chip-group__close--MarginBottomc_chip_group__close_MarginBottom
calc(0.25rem * -1)
.pf-c-chip-group--pf-c-chip-group__list-item--MarginRightc_chip_group__list_item_MarginRight
0.25rem
.pf-c-chip-group--pf-c-chip-group__list-item--MarginBottomc_chip_group__list_item_MarginBottom
0.25rem