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
| .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
