Skip to content
PatternFly logo

Label group

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