Skip to content
Patternfly Logo

Helper text

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

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


View source on GitHub