Chip group

A chip group represents 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.

Examples

Simple inline

Chip one
Really long chip that goes on and on
Chip three

With categories

Category one

Chip one
Really long chip that goes on and on
Chip three

With removable categories

Category one

Chip one
Chip two
Chip three

Category two has a very long name

Chip one
Chip two
Chip three

Props

Chip

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the chip text
className	string	''	Additional classes added to the chip item
closeBtnAriaLabel	string	'close'	Aria Label for close button
component	React.ReactNode	'div'	Component that will be used for chip. It is recommended that <button> or <li> are used when the chip is an overflow chip.
isOverflowChip	boolean	false	Flag indicating if the chip is an overflow chip
isReadOnly	boolean	false	Flag indicating if chip is read only
onClick	(event: React.MouseEvent) => void	(_e: React.MouseEvent) => undefined as any	Function that is called when clicking on the chip close button
textMaxWidth	string		Css property expressed in percentage or any css unit that overrides the default value of the max-width of the chip's text
tooltipPosition	TooltipPosition \| 'auto' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end'	'top'	Position of the tooltip which is displayed if text is longer

ChipGroup

*required
Name	Type	Default	Description
aria-label	string	'Chip group category'	Aria label for chip group that does not have a category name
categoryName	string	''	Category name text for the chip group category. If this prop is supplied the chip group with have a label and category styling applied
children	React.ReactNode		Content rendered inside the chip group. Should be <Chip> elements.
className	string		Additional classes added to the chip item
closeBtnAriaLabel	string	'Close chip group'	Aria label for close button
collapsedText	string	'${remaining} more'	Customizeable template string. Use variable "${remaining}" for the overflow chip count.
defaultIsOpen	boolean	false	Flag for having the chip group default to expanded
expandedText	string	'Show Less'	Customizable "Show Less" text string
isClosable	boolean	false	Flag if chip group can be closed
numChips	number	3	Set number of chips to show before overflow
onClick	(event: React.MouseEvent) => void	(_e: React.MouseEvent) => undefined as any	Function that is called when clicking on the chip group close button
onOverflowChipClick	(event: React.MouseEvent) => void	(_e: React.MouseEvent) => undefined as any	Function that is called when clicking on the overflow (expand/collapse) chip button
tooltipPosition	TooltipPosition \| 'auto' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end'	'top'	Position of the tooltip which is displayed if the category name text is longer

CSS variables


	.pf-c-chip-group	--pf-global--Color--100	#151515
--pf-global--Color--100 --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-chip-group	--pf-global--Color--200	#6a6e73
--pf-global--Color--200 --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-chip-group	--pf-global--BorderColor--100	#d2d2d2
--pf-global--BorderColor--100 --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-chip-group	--pf-global--primary-color--100	#06c
--pf-global--primary-color--100 --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-chip-group	--pf-global--link--Color	#06c
--pf-global--link--Color --pf-global--link--Color--dark $pf-global--link--Color--dark $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-chip-group	--pf-global--link--Color--hover	#004080
--pf-global--link--Color--hover --pf-global--link--Color--dark--hover $pf-global--link--Color--dark--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-chip-group	--pf-global--BackgroundColor--100	#fff
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-chip-group	--pf-c-chip-group__list--MarginBottom	calc(0.25rem * -1)
--pf-c-chip-group__list--MarginBottom calc(--pf-global--spacer--xs * -1) calc($pf-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1)
	.pf-c-chip-group	--pf-c-chip-group__list--MarginRight	calc(0.25rem * -1)
--pf-c-chip-group__list--MarginRight calc(--pf-global--spacer--xs * -1) calc($pf-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1)
	.pf-c-chip-group	--pf-c-chip-group--m-category--PaddingTop	0.25rem
--pf-c-chip-group--m-category--PaddingTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-chip-group	--pf-c-chip-group--m-category--PaddingRight	0.25rem
--pf-c-chip-group--m-category--PaddingRight --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-chip-group	--pf-c-chip-group--m-category--PaddingBottom	0.25rem
--pf-c-chip-group--m-category--PaddingBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-chip-group	--pf-c-chip-group--m-category--PaddingLeft	0.5rem
--pf-c-chip-group--m-category--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-chip-group	--pf-c-chip-group--m-category--BorderRadius	3px
--pf-c-chip-group--m-category--BorderRadius --pf-global--BorderRadius--sm $pf-global--BorderRadius--sm 3px
	.pf-c-chip-group	--pf-c-chip-group--m-category--BackgroundColor	#f0f0f0
--pf-c-chip-group--m-category--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-chip-group	--pf-c-chip-group__label--MarginRight	0.5rem
--pf-c-chip-group__label--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-chip-group	--pf-c-chip-group__label--FontSize	0.875rem
--pf-c-chip-group__label--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 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__close--MarginTop calc(--pf-global--spacer--xs * -1) calc($pf-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1)
	.pf-c-chip-group	--pf-c-chip-group__close--MarginBottom	calc(0.25rem * -1)
--pf-c-chip-group__close--MarginBottom calc(--pf-global--spacer--xs * -1) calc($pf-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1)
	.pf-c-chip-group	--pf-c-chip-group__list-item--MarginRight	0.25rem
--pf-c-chip-group__list-item--MarginRight --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-chip-group	--pf-c-chip-group__list-item--MarginBottom	0.25rem
--pf-c-chip-group__list-item--MarginBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines