Skip to content
Patternfly Logo

Helper text

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.

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

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

Props

HelperText

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the helper text container.
classNamestringAdditional classes applied to the helper text container.
component'div' | 'ul''div'Component type of the helper text container

HelperTextItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the helper text item.
classNamestringAdditional classes applied to the helper text item.
component'div' | 'li''div'Sets the component type of the helper text item.
hasIconbooleanisDynamicFlag indicating the helper text should have an icon. Dynamic helper texts include icons by default while static helper texts do not.
iconReact.ReactNodeCustom icon prefixing the helper text. This property will override the default icon paired with each helper text variant.
isDynamicbooleanfalseFlag indicating the helper text item is dynamic.
variant'default' | 'indeterminate' | 'warning' | 'success' | 'error''default'Variant styling of the helper text item.

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