Skip to content
Patternfly Logo

Label group

Use a label group when you have multiple labels to display at once. Label groups can be oriented either horizontally or vertically and can optionally be named and dismissable.

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Examples

Basic

  • Label
  • Label 2
  • Label 3

Overflow

  • Label
  • Label 2
  • Label 3

Overflow expanded

  • Label
  • Label 2
  • Label 3
  • Label 3
  • Label 3

Add label

  • Label
  • Label 2
  • Label 3

Category

  • Label
  • Label 2
  • Label 3

Category removable

  • Label
  • Label 2
  • Label 3
  • Label 4
  • Label 5
  • Label 6

Vertical

  • Label
  • Label 2
  • Label 3

Vertical overflow

  • Label
  • Label 2
  • Label 3

Vertical overflow expanded

  • Label
  • Label 2
  • Label 3
  • Label 3
  • Label 3

Vertical category

  • Label
  • Label 2
  • Label 3

Vertical category removable

  • Label
  • Label 2
  • Label 3

In addition to the JavaScript management of editable labels, dynamic label groups also need:

  • .pf-c-label-group.pf-m-editable onClick event should (excluding labels within) set focus on .pf-c-label-group__textarea

Editable labels, dynamic label group

Editable labels, label active, dynamic label group

Static labels, dynamic label group

  • Static label 1
  • Static label 2
  • Static label 3

Mixed labels (static / editable), dynamic label group

  • Static label 1
  • Static label 2

Compact labels

  • Label
  • Label 2
  • Label 3

Compact labels, overflow

  • Label
  • Label 2
  • Label 3

Compact labels, vertical

  • Label
  • Label 2
  • Label 3

Documentation

Accessibility

Attribute
Applied to
Outcome
role="list"
.pf-c-label-group__list
Indicates that the label group list is a list element. This role is redundant since .pf-c-label-group__list is a <ul> but is required for screen readers to announce the list propertly. Required
aria-label="[button label text]"
.pf-c-label-group__close > button
Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. Required
aria-labelledby="[id value of .pf-c-label-group__close > button] [id value of .pf-c-label-group__label]"
.pf-c-label-group__close > button
Provides an accessible name for the button. Required
aria-label="[label text]"
.pf-c-label-group__textarea
Provides an accessible name for the textarea. Required
row="1"
.pf-c-label-group__textarea
Indicates that the label group textarea is one row. Required
tabindex="0"
.pf-c-label-group__textarea
Inserts the label group textarea into the tab order of the page so that it is focusable. Required

Usage

Class
Applied to
Outcome
.pf-c-label-group
<div>
Initiates the label group component. Required.
.pf-c-label-group__list
<ul>
Initiates the container for a list of labels. Required.
.pf-c-label-group__list-item
<li>
Initiates the list item inside of the label group. Required.
.pf-c-label-group__main
<div>
Initiates the main element in the label group. Required when label and list are present
.pf-c-label-group__textarea
<textarea>
Initiates the textarea element in the label group. Required when label group is editable
.pf-c-label-group__label
<span>
Initiates the label to be used in the label group.
.pf-c-label-group__close
<div>
Initiates the container used for the button to remove the label group.
.pf-c-button
.pf-c-label-group__close <button>
Initiates the button used to remove the label group.
.pf-m-editable
.pf-c-label-group
Modifies the label group to support editable styling.
.pf-m-category
.pf-c-label-group
Modifies the label group to support category styling.
.pf-m-textarea
.pf-c-label-group__list-item
Modifies the label group list item to support textarea.

CSS variables

.pf-c-label-group--pf-c-label-group__list--MarginBottom
calc(0.25rem * -1)
.pf-c-label-group--pf-c-label-group__list--MarginRight
calc(0.25rem * -1)
.pf-c-label-group--pf-c-label-group--m-category--PaddingTop
0.25rem
.pf-c-label-group--pf-c-label-group--m-category--PaddingRight
0.25rem
.pf-c-label-group--pf-c-label-group--m-category--PaddingBottom
0.25rem
.pf-c-label-group--pf-c-label-group--m-category--PaddingLeft
0.5rem
.pf-c-label-group--pf-c-label-group--m-vertical--m-category--PaddingRight
0.5rem
.pf-c-label-group--pf-c-label-group--m-category--BorderRadius
3px
.pf-c-label-group--pf-c-label-group--m-category--BorderWidth
1px
.pf-c-label-group--pf-c-label-group--m-category--BorderColor
#f0f0f0
.pf-c-label-group--pf-c-label-group--m-category--BackgroundColor
#fff
.pf-c-label-group--pf-c-label-group__label--MarginRight
0.5rem
.pf-c-label-group--pf-c-label-group__label--MarginBottom
0
.pf-c-label-group--pf-c-label-group--m-vertical__label--MarginBottom
0.5rem
.pf-c-label-group--pf-c-label-group__label--FontSize
0.875rem
.pf-c-label-group--pf-c-label-group__label--MaxWidth
18ch
.pf-c-label-group--pf-c-label-group__close--MarginTop
calc(0.25rem * -1)
.pf-c-label-group--pf-c-label-group__close--MarginBottom
calc(0.25rem * -1)
.pf-c-label-group--pf-c-label-group--m-vertical__close--MarginTop
calc(0.375rem * -1)
.pf-c-label-group--pf-c-label-group--m-vertical__close--MarginRight
calc(0.375rem * -1)
.pf-c-label-group--pf-c-label-group--m-vertical__close--MarginLeft
0.5rem
.pf-c-label-group--pf-c-label-group--m-vertical__close--c-button--PaddingRight
0.5rem
.pf-c-label-group--pf-c-label-group--m-vertical__close--c-button--PaddingLeft
0.5rem
.pf-c-label-group--pf-c-label-group__list-item--MarginRight
0.25rem
.pf-c-label-group--pf-c-label-group__list-item--MarginBottom
0.25rem
.pf-c-label-group--pf-c-label-group__textarea--MinWidth
12.5rem
.pf-c-label-group--pf-c-label-group__textarea--PaddingTop
0.125rem
.pf-c-label-group--pf-c-label-group__textarea--PaddingRight
0.25rem
.pf-c-label-group--pf-c-label-group__textarea--PaddingBottom
0
.pf-c-label-group--pf-c-label-group__textarea--PaddingLeft
0.25rem
.pf-c-label-group.pf-m-vertical--pf-c-label-group__list--MarginRight
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__list--MarginBottom
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__list-item--MarginRight
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__label--MarginRight
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__label--MarginBottom
0.5rem
.pf-c-label-group.pf-m-vertical--pf-c-label-group__close--MarginTop
calc(0.375rem * -1)
.pf-c-label-group.pf-m-vertical--pf-c-label-group__close--MarginLeft
0.5rem
.pf-c-label-group.pf-m-vertical--pf-c-label-group__close--MarginBottom
0
.pf-c-label-group.pf-m-vertical--pf-c-label-group__close--MarginRight
calc(0.375rem * -1)
.pf-c-label-group.pf-m-vertical--pf-c-label-group--m-category--PaddingRight
0.5rem
.pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child--pf-c-label-group__list-item--MarginBottom
0
.pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button--pf-c-button--PaddingLeft
0.5rem
.pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button--pf-c-button--PaddingRight
0.5rem

View source on GitHub