PatternFly

Helper text

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

Static with default icons

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

Static with custom icons

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: default status;
This is indeterminate helper text : indeterminate status;
This is warning helper text : warning status;
This is success helper text : success status;
This is error helper text : error status;
This is error helper text with a custom icon : error status;
This is error helper text with no icon : error status;

Dynamic list

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

Props

HelperText

*required
NameTypeDefaultDescription

HelperTextItem

*required
NameTypeDefaultDescription

CSS variables

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

View source on GitHub