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
Installation
npm install @patternfly/elementsUsage
Default
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
View HTML Source
<pf-chip readonly>Read-only chip</pf-chip>
Overflow chip
View HTML Source
<pf-chip overflow-chip>Overflow-chip</pf-chip>
Max-width
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.
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
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
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
None
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
-
Should be
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: HTMLElement)-
Activates the specified chip and sets focus on it
Events on pf-chip-group
None
CSS Custom Properties on pf-chip
None
CSS Parts on pf-chip-group
None
