Helper text

Helper text is a text-based support method that adds additional context to field inputs.

Examples

Basic

This is default helper text
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;

With custom icons

This is default helper text
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;

Multiple items

You can pass multiple <HelperTextItem> components inside a single <Helpertext> container.

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

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.
iconReact.ReactNodeCustom icon prefixing the helper text. This property will override the default icon when the variant property is passed in.
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.
screenReaderTextstring`${variant} status`Text that is only accessible to screen readers in order to announce the variant of a helper text item. This prop can only be used when the variant prop has a value other than "default".
variant'default' | 'indeterminate' | 'warning' | 'success' | 'error''default'Variant styling of the helper text item. Will also render a default icon, which can be overridden with the icon prop.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-helper-text--pf-v6-c-helper-text--Gap
0.25rem
.pf-v6-c-helper-text--pf-v6-c-helper-text--FontSize
0.75rem
.pf-v6-c-helper-text--pf-v6-c-helper-text__item-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-helper-text--pf-v6-c-helper-text__item-text--Color
(In light theme) #151515
.pf-v6-c-helper-text--pf-v6-c-helper-text__item-text--FontWeight
400
.pf-v6-c-helper-text--pf-v6-c-helper-text__item-icon--m-indeterminate--Color
(In light theme) #707070
.pf-v6-c-helper-text--pf-v6-c-helper-text__item-text--m-indeterminate--Color
(In light theme) #4d4d4d
.pf-v6-c-helper-text--pf-v6-c-helper-text__item-icon--m-warning--Color
(In light theme) #dca614
.pf-v6-c-helper-text--pf-v6-c-helper-text__item-text--m-warning--FontWeight
500
.pf-v6-c-helper-text--pf-v6-c-helper-text__item-icon--m-success--Color
(In light theme) #3d7317
.pf-v6-c-helper-text--pf-v6-c-helper-text__item-text--m-success--FontWeight
500
.pf-v6-c-helper-text--pf-v6-c-helper-text__item-icon--m-error--Color
(In light theme) #b1380b
.pf-v6-c-helper-text--pf-v6-c-helper-text__item-text--m-error--FontWeight
500
.pf-v6-c-helper-text--pf-v6-c-helper-text--m-dynamic__item-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-helper-text--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color
(In light theme) #707070
.pf-v6-c-helper-text--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color
(In light theme) #4d4d4d
.pf-v6-c-helper-text--pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color
(In light theme) #dca614
.pf-v6-c-helper-text--pf-v6-c-helper-text--m-dynamic--m-warning__item-text--FontWeight
500
.pf-v6-c-helper-text--pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color
(In light theme) #3d7317
.pf-v6-c-helper-text--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color
(In light theme) #b1380b
.pf-v6-c-helper-text--pf-v6-c-helper-text__item-icon--MarginInlineEnd
0.25rem
.pf-v6-c-helper-text__item.pf-m-indeterminate--pf-v6-c-helper-text__item-icon--Color
(In light theme) #707070
.pf-v6-c-helper-text__item.pf-m-indeterminate--pf-v6-c-helper-text__item-text--Color
(In light theme) #4d4d4d
.pf-v6-c-helper-text__item.pf-m-indeterminate--pf-v6-c-helper-text--m-dynamic__item-icon--Color
(In light theme) #707070
.pf-v6-c-helper-text__item.pf-m-indeterminate--pf-v6-c-helper-text--m-dynamic__item-text--Color
(In light theme) #4d4d4d
.pf-v6-c-helper-text__item.pf-m-warning--pf-v6-c-helper-text__item-text--FontWeight
500
.pf-v6-c-helper-text__item.pf-m-warning--pf-v6-c-helper-text__item-icon--Color
(In light theme) #dca614
.pf-v6-c-helper-text__item.pf-m-warning--pf-v6-c-helper-text--m-dynamic__item-icon--Color
(In light theme) #dca614
.pf-v6-c-helper-text__item.pf-m-success--pf-v6-c-helper-text__item-text--FontWeight
500
.pf-v6-c-helper-text__item.pf-m-success--pf-v6-c-helper-text__item-icon--Color
(In light theme) #3d7317
.pf-v6-c-helper-text__item.pf-m-success--pf-v6-c-helper-text--m-dynamic__item-icon--Color
(In light theme) #3d7317
.pf-v6-c-helper-text__item.pf-m-error--pf-v6-c-helper-text__item-text--FontWeight
500
.pf-v6-c-helper-text__item.pf-m-error--pf-v6-c-helper-text__item-icon--Color
(In light theme) #b1380b
.pf-v6-c-helper-text__item.pf-m-error--pf-v6-c-helper-text--m-dynamic__item-icon--Color
(In light theme) #b1380b
.pf-v6-c-helper-text__item.pf-m-dynamic--pf-v6-c-helper-text__item-icon--Color
(In light theme) #1f1f1f