Skip to content
Versions v3 v2 v1

Chip

A chip is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.

Overview

Chip 1

Installation

npm install @patternfly/elements

Usage

Default

Chip 1 Chip 7
View HTML Source
<pf-chip>Chip 1</pf-chip>
<pf-chip>Chip <pf-badge number="7">7</pf-badge></pf-chip>

Chip variants

Chips can be removable or read-only. The Overflow chip is a special chip that is used to expand or collapse the content of a chip group.

Read-only

Read-only chip
View HTML Source
<pf-chip readonly>Read-only chip</pf-chip>

Overflow chip

Overflow-chip
View HTML Source
<pf-chip overflow-chip>Overflow-chip</pf-chip>

Max-width

Really long chip that goes on and on Really long chip that goes on and on
View HTML Source
<pf-tooltip id="max"
      position="top">
  <pf-chip onclick="this.parentElement.remove()"
     style="max-width:10em;">Really long chip that goes on and on</pf-chip>
  <span slot="content">Really long chip that goes on and on</span>
</pf-tooltip>

Chip group

A chip group is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute. When the value of numChips is exceeded, additional chips will be hidden using an overflow chip.

Chip groups are typically used in filter and selection use cases to indicate to the user what selections they have made. They separate selections by attribute, for added clarity. An OR relationship is implied between values in the group. Chip groups also give users the ability to either delete an entire chip group at once using the group X, or delete individual chips at a time.

Chip groups are useful to express complex filters to a data set, for example.

Chip 1 Chip 2 Chip 3 Chip 4
View HTML Source
<pf-chip-group>
  <pf-chip>Chip 1</pf-chip>
  <pf-chip>Chip 2</pf-chip>
  <pf-chip>Chip 3</pf-chip>
  <pf-chip>Chip 4</pf-chip>
</pf-chip-group>

Chip group with categories

Category one Chip 1 Chip 2 Chip 3 Chip 4

Category two Chip 5 Chip 6 Chip 7 Chip 8
View HTML Source
<pf-chip-group>
  <span slot="category-name">Category one</span>
  <pf-chip>Chip 1</pf-chip>
  <pf-chip>Chip 2</pf-chip>
  <pf-chip>Chip 3</pf-chip>
  <pf-chip>Chip 4</pf-chip>
</pf-chip-group>
<br><br>
<pf-chip-group>
  <span slot="category-name">Category two</span>
  <pf-chip>Chip 5</pf-chip>
  <pf-chip>Chip 6</pf-chip>
  <pf-chip>Chip 7</pf-chip>
  <pf-chip>Chip 8</pf-chip>
</pf-chip-group>

Chip group with removable categories

Category three Chip 1 Chip 2 Chip 3 Chip 4
View HTML Source
<pf-chip-group closeable>
  <span slot="category-name">Category three</span>
  <pf-chip>Chip 1</pf-chip>
  <pf-chip>Chip 2</pf-chip>
  <pf-chip>Chip 3</pf-chip>
  <pf-chip>Chip 4</pf-chip>
</pf-chip-group>

Accessibility

The select uses the Combobox Pattern recommendations from the WAI ARIA Authoring Best Practices Guide (APG).

Chips

When focus is on an individual chip that is not readonly, the following keyboard interactions apply:

Key Function
Enter On an overflow chip, shows/hides additional chips. Otherwise removes a chip.
Space On an overflow chip, shows/hides additional chips. Otherwise removes a chip.

Chip groups

Chip groups use the APG's Roving tabindex recommendation. When focus in a chip group, the following keyboard interactions apply:

Key Function
Enter When focus is on a group's remove botton, removes the group.
Space When focus is on a group's remove botton, removes the group.
Up Arrow Moves focus to the previous item, optionally wrapping from the first to the last.
Down Arrow Moves focus to the next item, optionally wrapping from the last to the first.
Left Arrow Moves focus to the previous item, optionally wrapping from the first to the last.
Right Arrow Moves focus to the next item, optionally wrapping from the last to the first.
Home Moves focus to the first item in the current group.

Slots on pf-chip

Default Slot

chip text

Attributes on pf-chip

accessible-close-label

Accessible label for close button

DOM Property
accessibleCloseLabel
Type
string
Default
'Close'
readonly

Flag indicating if chip is read-only and cannot be removed

DOM Property
readonly
Type
boolean
Default
false
overflow-chip

Flag indicating if chip is read-only and cannot be removed

DOM Property
overflowChip
Type
boolean
Default
false

Methods on pf-chip

None

Events on pf-chip

remove

Fires when chip is removed

Event Type:
ChipRemoveEvent
click

when close button is clicked

Event Type:
Event

CSS Custom Properties on pf-chip

CSS Property Description Default
--pf-c-chip--PaddingTop var(--pf-global--spacer--xs, 0.25rem)
--pf-c-chip--PaddingRight var(--pf-global--spacer--sm, 0.5rem)
--pf-c-chip--PaddingBottom var(--pf-global--spacer--xs, 0.25rem)
--pf-c-chip--PaddingLeft var(--pf-global--spacer--sm, 0.5rem)
--pf-c-chip--BackgroundColor var(--pf-global--Color--light-100, #fff)
--pf-c-chip--BorderRadius var(--pf-global--BorderRadius--sm, 3px)
--pf-c-chip--before--BorderColor var(--pf-global--BorderColor--300, #f0f0f0)
--pf-c-chip--before--BorderWidth var(--pf-global--BorderWidth--sm, 1px)
--pf-c-chip--before--BorderRadius var(--pf-c-chip--BorderRadius)
--pf-c-chip--m-overflow__text--Color var(--pf-global--primary-color--100, #06c)
--pf-c-chip--m-draggable--BackgroundColor var(--pf-global--BackgroundColor--200, #f0f0f0)
--pf-c-chip--m-draggable--BoxShadow var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06))
--pf-c-chip--m-draggable__icon--FontSize var(--pf-global--icon--FontSize--sm, 0.625rem)
--pf-c-chip__text--FontSize var(--pf-global--FontSize--xs, 0.75rem)
--pf-c-chip__text--Color var(--pf-global--Color--100, #151515)
--pf-c-chip__text--MaxWidth 16ch
--pf-c-chip__icon--MarginLeft var(--pf-global--spacer--sm, 0.5rem)

CSS Parts on pf-chip

text

container for chip text

Slots on pf-chip-group

category-name

Category name text for chip group category. If this prop is supplied chip group with have a label and category styling applied

Default Slot

<pf-chip> elements.

Attributes on pf-chip-group

accessible-label

Accessible label for chip group that does not have a category name

DOM Property
accessibleLabel
Type
string
Default
''
accessible-close-label

Accessible label for close button

DOM Property
accessibleCloseLabel
Type
string
Default
'Close'
collapsed-text

Customizeable "more" template string. Use variable "${remaining}" for overflow chip count.

DOM Property
collapsedText
Type
string
Default
'${remaining} more'
expanded-text

Customizable "show less" text string.

DOM Property
expandedText
Type
string
Default
'show less'
num-chips

Set number of chips to show before overflow

DOM Property
numChips
Type
number
Default
3
open

Flag indicating if overflow chips are visible

DOM Property
open
Type
boolean
Default
false
closeable

Flag if chip group can be closed

DOM Property
closeable
Type
boolean
Default
false

Methods on pf-chip-group

focusOnChip(chip: PfChip)

Activates the specified chip and sets focus on it

Events on pf-chip-group

None

CSS Custom Properties on pf-chip

CSS Property Description Default
--pf-c-chip-group__list--MarginBottom calc(var(--pf-global--spacer--xs, 0.25rem) * -1)
--pf-c-chip-group__list--MarginRight calc(var(--pf-global--spacer--xs, 0.25rem) * -1)
--pf-c-chip-group--m-category--PaddingTop var(--pf-global--spacer--xs, 0.25rem)
--pf-c-chip-group--m-category--PaddingRight var(--pf-global--spacer--xs, 0.25rem)
--pf-c-chip-group--m-category--PaddingBottom var(--pf-global--spacer--xs, 0.25rem)
--pf-c-chip-group--m-category--PaddingLeft var(--pf-global--spacer--sm, 0.5rem)
--pf-c-chip-group--m-category--BorderRadius var(--pf-global--BorderRadius--sm, 3px)
--pf-c-chip-group--m-category--BackgroundColor var(--pf-global--BackgroundColor--200, #f0f0f0)
--pf-c-chip-group__label--MarginRight var(--pf-global--spacer--sm, 0.5rem)
--pf-c-chip-group__label--FontSize var(--pf-global--FontSize--sm, 0.875rem)
--pf-c-chip-group__label--MaxWidth 18ch
--pf-c-chip-group__close--MarginTop calc(var(--pf-global--spacer--xs, 0.25rem) * -1)
--pf-c-chip-group__close--MarginBottom calc(var(--pf-global--spacer--xs, 0.25rem) * -1)
--pf-c-chip-group__list-item--MarginRight var(--pf-global--spacer--xs, 0.25rem)
--pf-c-chip-group__list-item--MarginBottom var(--pf-global--spacer--xs, 0.25rem)

CSS Parts on pf-chip-group

None

© 2018-2024 Red Hat, Inc. Deploys by Netlify