Skip to content
PatternFly logo

Chip group

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
  • Chip four
  • Chip five
  • Chip six

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