Skip to content
PatternFly logo

Helper text

Helper text is an on-screen field guideline that helps provide context regarding field inputs.

Examples

Static

This is default helper text
This is indeterminate helper text
This is warning helper text
This is success helper text
This is error helper text

Icon

This is default helper text
This is indeterminate helper text
This is warning helper text
This is success helper text
This is error helper text

Multiple static

This is default helper text
This is another default helper text in the same block
And this is more default text in the same block

Dynamic

This is default helper text
This is indeterminate helper text
This is warning helper text
This is success helper text
This is error helper text

Dynamic list

  • Must be at least 14 characters
  • Cannot contain any variation of the word "redhat"
  • Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols

Usage

Class
Applied to
Outcome
.pf-c-helper-text
<div>, <ul>
Initiates the helper text component. Required
.pf-c-helper-text__item
<div>, <li>
Initiates a helper text item. Required
.pf-c-helper-text__item-icon
<span>
Initiates a helper text item icon. Required when used in .pf-c-helper-text__item.pf-m-dynamic
.pf-c-helper-text__item-text
<span>
Initiates a helper text item text. Required
.pf-m-dynamic
.pf-c-helper-text__item
Modifies a helper text item to be dynamic. For use when the item changes state as the form field the text is associated with is updated.
.pf-m-indeterminate
.pf-c-helper-text__item
Modifies a helper text item for indeterminate state styles.
.pf-m-warning
.pf-c-helper-text__item
Modifies a helper text item for warning state styles.
.pf-m-success
.pf-c-helper-text__item
Modifies a helper text item for success state styles.
.pf-m-error
.pf-c-helper-text__item
Modifies a helper text item for error state styles.

CSS variables

.pf-c-helper-text--pf-c-helper-text--Gap
0.25rem
.pf-c-helper-text--pf-c-helper-text--FontSize
0.875rem
.pf-c-helper-text--pf-c-helper-text__item-icon--Color
#151515
.pf-c-helper-text--pf-c-helper-text__item-text--Color
#151515
.pf-c-helper-text--pf-c-helper-text__item-icon--m-indeterminate--Color
#6a6e73
.pf-c-helper-text--pf-c-helper-text__item-text--m-indeterminate--Color
#6a6e73
.pf-c-helper-text--pf-c-helper-text__item-icon--m-warning--Color
#f0ab00
.pf-c-helper-text--pf-c-helper-text__item-text--m-warning--Color
#795600
.pf-c-helper-text--pf-c-helper-text__item-icon--m-success--Color
#3e8635
.pf-c-helper-text--pf-c-helper-text__item-text--m-success--Color
#1e4f18
.pf-c-helper-text--pf-c-helper-text__item-icon--m-error--Color
#c9190b
.pf-c-helper-text--pf-c-helper-text__item-text--m-error--Color
#a30000
.pf-c-helper-text--pf-c-helper-text--m-dynamic__item-icon--Color
#151515
.pf-c-helper-text--pf-c-helper-text--m-dynamic__item-text--Color
#151515
.pf-c-helper-text--pf-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color
#6a6e73
.pf-c-helper-text--pf-c-helper-text--m-dynamic--m-indeterminate__item-text--Color
#6a6e73
.pf-c-helper-text--pf-c-helper-text--m-dynamic--m-warning__item-icon--Color
#f0ab00
.pf-c-helper-text--pf-c-helper-text--m-dynamic--m-warning__item-text--Color
#6a6e73
.pf-c-helper-text--pf-c-helper-text--m-dynamic--m-success__item-icon--Color
#3e8635
.pf-c-helper-text--pf-c-helper-text--m-dynamic--m-success__item-text--Color
#6a6e73
.pf-c-helper-text--pf-c-helper-text--m-dynamic--m-error__item-icon--Color
#c9190b
.pf-c-helper-text--pf-c-helper-text--m-dynamic--m-error__item-text--Color
#151515
.pf-c-helper-text--pf-c-helper-text__item-icon--MarginRight
0.25rem
.pf-c-helper-text__item.pf-m-indeterminate--pf-c-helper-text__item-icon--Color
#6a6e73
.pf-c-helper-text__item.pf-m-indeterminate--pf-c-helper-text__item-text--Color
#6a6e73
.pf-c-helper-text__item.pf-m-indeterminate--pf-c-helper-text--m-dynamic__item-icon--Color
#6a6e73
.pf-c-helper-text__item.pf-m-indeterminate--pf-c-helper-text--m-dynamic__item-text--Color
#6a6e73
.pf-c-helper-text__item.pf-m-warning--pf-c-helper-text__item-icon--Color
#f0ab00
.pf-c-helper-text__item.pf-m-warning--pf-c-helper-text__item-text--Color
#795600
.pf-c-helper-text__item.pf-m-warning--pf-c-helper-text--m-dynamic__item-icon--Color
#f0ab00
.pf-c-helper-text__item.pf-m-warning--pf-c-helper-text--m-dynamic__item-text--Color
#6a6e73
.pf-c-helper-text__item.pf-m-success--pf-c-helper-text__item-icon--Color
#3e8635
.pf-c-helper-text__item.pf-m-success--pf-c-helper-text__item-text--Color
#1e4f18
.pf-c-helper-text__item.pf-m-success--pf-c-helper-text--m-dynamic__item-icon--Color
#3e8635
.pf-c-helper-text__item.pf-m-success--pf-c-helper-text--m-dynamic__item-text--Color
#6a6e73
.pf-c-helper-text__item.pf-m-error--pf-c-helper-text__item-icon--Color
#c9190b
.pf-c-helper-text__item.pf-m-error--pf-c-helper-text__item-text--Color
#a30000
.pf-c-helper-text__item.pf-m-error--pf-c-helper-text--m-dynamic__item-icon--Color
#c9190b
.pf-c-helper-text__item.pf-m-error--pf-c-helper-text--m-dynamic__item-text--Color
#151515
.pf-c-helper-text__item.pf-m-dynamic--pf-c-helper-text__item-text--Color
#151515
.pf-c-helper-text__item.pf-m-dynamic--pf-c-helper-text__item-icon--Color
#151515

View source on GitHub