PF Next

Chip Group

Chip Group Toolbar (Collapsed)

Preview

Category One

Chip One
Chip Two
Chip Three
Chip Four
<div class="pf-c-chip-group pf-m-toolbar">
  <h4 class="pf-c-chip-group__label">
    Category One
  </h4>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="toolbar-collapsedchip_one">
            Chip One
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="toolbar-collapsedremove_chip_one toolbar-collapsedchip_one" aria-label="Remove" id="toolbar-collapsedremove_chip_one">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="toolbar-collapsedchip_two">
            Chip Two
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="toolbar-collapsedremove_chip_two toolbar-collapsedchip_two" aria-label="Remove" id="toolbar-collapsedremove_chip_two">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="toolbar-collapsedchip_three">
            Chip Three
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="toolbar-collapsedremove_chip_three toolbar-collapsedchip_three" aria-label="Remove" id="toolbar-collapsedremove_chip_three">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="toolbar-collapsedchip_four">
            Chip Four
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="toolbar-collapsedremove_chip_four toolbar-collapsedchip_four" aria-label="Remove" id="toolbar-collapsedremove_chip_four">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
</div>
<div class="pf-c-chip pf-m-overflow">
  <button class="pf-c-button pf-m-plain">
    <span class="pf-c-chip__text">
              3 more
    </span>
  </button>
</div>

Chip Group Toolbar (Expanded)

Preview

Category One

Chip One
Chip Two
Chip Three
Chip Four

Category Two

Chip One
Chip Two
Chip Three
<div class="pf-c-chip-group pf-m-toolbar">
  <h4 class="pf-c-chip-group__label">
    Category One
  </h4>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="toolbar-expanded-chip_one">
            Chip One
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="toolbar-expandedremove_chip_one toolbar-expandedchip_one" aria-label="Remove" id="toolbar-expandedremove_chip_one">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="toolbar-expandedchip_two">
            Chip Two
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="toolbar-expandedremove_chip_two toolbar-expandedchip_two" aria-label="Remove" id="toolbar-expandedremove_chip_two">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="toolbar-expandedchip_three">
            Chip Three
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="toolbar-expandedremove_chip_three toolbar-expandedchip_three" aria-label="Remove" id="toolbar-expandedremove_chip_three">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="toolbar-expandedchip_four">
            Chip Four
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="toolbar-expandedremove_chip_four toolbar-expandedchip_four" aria-label="Remove" id="toolbar-expandedremove_chip_four">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
</div>
<div class="pf-c-chip-group pf-m-toolbar">
  <h4 class="pf-c-chip-group__label">
    Category Two
  </h4>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="chip_five">
            Chip One
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="remove_chip_five chip_five" aria-label="Remove" id="remove_chip_five">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="chip_six">
            Chip Two
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="remove_chip_six chip_six" aria-label="Remove" id="remove_chip_six">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="chip_seven">
            Chip Three
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="remove_chip_seven chip_seven" aria-label="Remove" id="remove_chip_seven">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
</div>

Overview

A chip-group used in a toolbar require the modifier .pf-m-toolbar which styles the group's background-color and border-radius. Multiple chip-groups can exist in the toolbar depending on the size of the group that is being filtered from and its parent container should handle the spacing between the chip groups. Categories can be labelled by using .pf-c-chip-group__label and its heading level should be based on the context in which this component exists on the page. When groups of chips overflow they will wrap to the next line. This overflow is indicated by a chip with the modifier .pf-m-overflow that acts as a button to show/hide the overflown chips by expanding the height of the container they belong to.

Accessibility

All single chip accessibility and usage requirements apply.

Usage

Class Applied To Outcome
.pf-c-chip-group <div> Initiates the container used to group chips. Required
.pf-c-chip-group__label <h4> Initiates the label for a group of chips.
.pf-c-button <button> Initiates the button used to show overflown chips.
.pf-m-toolbar .pf-c-chip-group Modifies .pf-c-chip-group to be used in a toolbar. Required

Chip Group Multi-Select (Collapsed)

Preview

Chip One
Chip Two
Chip Three
<div class="pf-c-chip-group">
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="select-collapsedchip_one">
            Chip One
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="select-collapsedremove_chip_one select-collapsedchip_one" aria-label="Remove" id="select-collapsedremove_chip_one">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="select-collapsedchip_two">
            Chip Two
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="select-collapsedremove_chip_two select-collapsedchip_two" aria-label="Remove" id="select-collapsedremove_chip_two">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="select-collapsedchip_three">
            Chip Three
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="select-collapsedremove_chip_three select-collapsedchip_three" aria-label="Remove" id="select-collapsedremove_chip_three">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-chip pf-m-overflow">
    <button class="pf-c-button pf-m-plain">
      <span class="pf-c-chip__text">
              	2 more
      </span>
    </button>
  </div>
</div>

Chip Group Multi-Select (Expanded)

Preview

Chip One
Chip Two
Chip Three
Chip Four
Chip Five
<div class="pf-c-chip-group">
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="select-expandedchip_one">
            Chip One
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="select-expandedremove_chip_one select-expandedchip_one" aria-label="Remove" id="select-expandedremove_chip_one">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="select-expandedchip_two">
            Chip Two
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="select-expandedremove_chip_two select-expandedchip_two" aria-label="Remove" id="select-expandedremove_chip_two">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="select-expandedchip_three">
            Chip Three
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="select-expandedremove_chip_three select-expandedchip_three" aria-label="Remove" id="select-expandedremove_chip_three">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="select-expandedchip_four">
            Chip Four
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="select-expandedremove_chip_four select-expandedchip_four" aria-label="Remove" id="select-expandedremove_chip_four">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-chip">
    <span class="pf-c-chip__text" id="select-expandedchip_five">
            Chip Five
    </span>
    <button class="pf-c-button pf-m-plain" aria-labelledby="select-expandedremove_chip_five select-expandedchip_five" aria-label="Remove" id="select-expandedremove_chip_five">
      <i class="fas fa-times-circle" aria-hidden="true"></i>
    </button>
  </div>
</div>

Overview

A chip-group used in a multi-select do not require a modifier as its parent will handle its styles. When it overflows outside of the group, the chips will wrap to the next line. This overflow is indicated by a chip with the modifier .pf-m-overflow that acts as a button to show/hide the overflown chips by expanding the height of the container they belong to.

Accessibility

All single chip accessibility and usage requirements apply.

Usage

Class Applied To Outcome
.pf-c-chip-group <div> Initiates the container used to group chips. Required.
.pf-c-button <button> Initiates the button used to expand overflown chips.

Documentation