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 be dismissable. You may also make the label group editable to allow users to edit an existing label or add a new label.

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 Beta

Editable labels, label active, dynamic label group Beta

Static labels, dynamic label group

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

Mixed labels (static / editable), dynamic label group Beta

  • 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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines