Chip

Installation

npm install @patternfly/elements

Usage

Default

<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

<pf-chip readonly>Read-only chip</pf-chip>

Overflow chip

<pf-chip overflow-chip>Overflow-chip</pf-chip>

Max-width

<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.

<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

<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

<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:

Chip groups

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