HTML

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

ExamplesDocumentationCSS Variables

Examples

Chip group toolbar (collapsed)

  • Category One

    • Chip One
    • Chip Two
    • Chip Three
    • Chip Four
Copied to clipboard

Chip group toolbar (expanded)

  • Category One

    • Chip One
    • Chip Two
    • Chip Three
    • Chip Four
  • Category Two

    • Chip One
    • Chip Two
    • Chip Three
Copied to clipboard

Chip group multi-select (collapsed)

  • Chip One
  • Chip Two
  • Chip Three
Copied to clipboard

Chip group multi-select (expanded)

  • Chip One
  • Chip Two
  • Chip Three
  • Chip Four
  • Chip Five
Copied to clipboard

Documentation

CSS Variables

--pf-c-chip-group--MarginBottomc_chip_group_MarginBottomcalc(0.25rem * -1)
--pf-c-chip-group--MarginRightc_chip_group_MarginRightcalc(0.25rem * -1)
--pf-c-chip-group__label--FontSizec_chip_group__label_FontSize0.875rem
--pf-c-chip-group__label--Maxwidthc_chip_group__label_Maxwidth7.5rem
--pf-c-chip-group__label--PaddingBottomc_chip_group__label_PaddingBottom0.25rem
--pf-c-chip-group__label--PaddingLeftc_chip_group__label_PaddingLeft0.25rem
--pf-c-chip-group__label--PaddingRightc_chip_group__label_PaddingRight0.5rem
--pf-c-chip-group__label--PaddingTopc_chip_group__label_PaddingTop0.25rem
--pf-c-chip-group__li--m-toolbar--MarginRightc_chip_group__li_m_toolbar_MarginRight0.5rem
--pf-c-chip-group--c-chip--MarginBottomc_chip_group_c_chip_MarginBottom0.25rem
--pf-c-chip-group--c-chip--MarginRightc_chip_group_c_chip_MarginRight0.25rem
--pf-c-chip-group--m-toolbar--BackgroundColorc_chip_group_m_toolbar_BackgroundColor#ededed
--pf-c-chip-group--m-toolbar-BorderRadiusc_chip_group_m_toolbar_BorderRadius3px
--pf-c-chip-group--m-toolbar-PaddingBottomc_chip_group_m_toolbar_PaddingBottom0.25rem
--pf-c-chip-group--m-toolbar-PaddingLeftc_chip_group_m_toolbar_PaddingLeft0.5rem
--pf-c-chip-group--m-toolbar-PaddingRightc_chip_group_m_toolbar_PaddingRight0.5rem
--pf-c-chip-group--m-toolbar-PaddingTopc_chip_group_m_toolbar_PaddingTop0.25rem