PatternFly

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

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
aria-labelstringAdds an accessible label to the helper text when component is a "ul".
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
idstringID for the helper text container. The value of this prop can be passed into a form component's aria-describedby prop when you intend for all helper text items to be announced to assistive technologies.
isLiveRegionbooleanfalseFlag for indicating whether the helper text container is a live region. Use this prop when you expect or intend for any helper text items within the container to be dynamically updated.

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.
idstringID for the helper text item. The value of this prop can be passed into a form component's aria-describedby prop when you intend for only specific helper text items to be announced to assistive technologies.
isDynamicbooleanfalseFlag indicating the helper text item is dynamic. This prop should be used when the text content of the helper text item will never change, but the icon and styling will be dynamically updated via the `variant` prop.
screenReaderTextstring`${variant} status`Text that is only accessible to screen readers in order to announce the status of a helper text item. This prop can only be used when the isDynamic prop is also passed in.
variant'default' | 'indeterminate' | 'warning' | 'success' | 'error''default'Variant styling of the helper text item.

CSS variables

Expand or collapse columnSelectorVariableValue
.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