HTML

Chip group

ExamplesAccessibilityCSS Variables

Examples

Collapsed

  • Category one

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

Expanded

  • Category one

    • Chip one
    • Chip two
    • Chip three
    • Chip four
  • Category two

    • Chip one
    • Chip two
    • Chip three

Closable

  • Category one

    • Chip one
    • Chip two

Overiew

A chip-group used in a toolbar require the modifier .pf-m-toolbar which styles the group's background-color and border-radius. Multiple chip-groups can exist in the toolbar depending on the size of the group that is being filtered from and its parent container should handle the spacing between the chip groups. Categories can be labelled by using .pf-c-chip-group__label and its heading level should be based on the context in which this component exists on the page. When groups of chips overflow they will wrap to the next line. This overflow is indicated by a chip with the modifier .pf-m-overflow that acts as a button to show/hide the overflown chips by expanding the height of the container they belong to.

The chip group requires the chip component.

All single chip accessibility and usage requirements apply.

Accessibility

Attributes for closable chip group buttonApplied toOutcome
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__close<div>Initiates the container used to close chip group. Required.

The chip group requires the chip component.

Multi select collapsed

  • Chip one
  • Chip two
  • Chip three

Multi select expanded

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

Overiew

A chip-group used in a multi-select do not require a modifier as its parent will handle its styles. When it overflows outside of the group, the chips will wrap to the next line. This overflow is indicated by a chip with the modifier .pf-m-overflow that acts as a button to show/hide the overflown chips by expanding the height of the container they belong to.

Accessibility

All single chip accessibility and usage requirements apply.

Usage

ClassApplied toOutcome
.pf-c-chip-group<ul>Initiates the container used to group chips. Required.
.pf-c-button<button>Initiates the button used to expand overflown chips.

CSS Variables

--pf-c-chip-group__label--FontSizec_chip_group__label_FontSize
0.875rem
--pf-c-chip-group__label--Maxwidthc_chip_group__label_Maxwidth
7.5rem
--pf-c-chip-group__label--PaddingBottomc_chip_group__label_PaddingBottom
0.25rem
--pf-c-chip-group__label--PaddingLeftc_chip_group__label_PaddingLeft
0
--pf-c-chip-group__label--PaddingRightc_chip_group__label_PaddingRight
0.5rem
--pf-c-chip-group__label--PaddingTopc_chip_group__label_PaddingTop
0.25rem
--pf-c-chip-group__li--m-toolbar--MarginRightc_chip_group__li_m_toolbar_MarginRight
0.5rem
--pf-c-chip-group--c-chip--MarginBottomc_chip_group_c_chip_MarginBottom
0.25rem
--pf-c-chip-group--c-chip--MarginRightc_chip_group_c_chip_MarginRight
0
--pf-c-chip-group--m-toolbar--BackgroundColorc_chip_group_m_toolbar_BackgroundColor
#ededed
--pf-c-chip-group--m-toolbar-BorderRadiusc_chip_group_m_toolbar_BorderRadius
3px
--pf-c-chip-group--m-toolbar-PaddingBottomc_chip_group_m_toolbar_PaddingBottom
0.25rem
--pf-c-chip-group--m-toolbar-PaddingLeftc_chip_group_m_toolbar_PaddingLeft
0.5rem
--pf-c-chip-group--m-toolbar-PaddingRightc_chip_group_m_toolbar_PaddingRight
0.25rem
--pf-c-chip-group--m-toolbar-PaddingTopc_chip_group_m_toolbar_PaddingTop
0.25rem
--pf-c-chip-group--MarginBottomc_chip_group_MarginBottom
calc(0.25rem*-1)
--pf-c-chip-group--MarginRightc_chip_group_MarginRight
0.25rem