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-v5-c-helper-text | <div>, <ul> | Initiates the helper text component. Required |
.pf-v5-c-helper-text__item | <div>, <li> | Initiates a helper text item. Required |
.pf-v5-c-helper-text__item-icon | <span> | Initiates a helper text item icon. Required when used in .pf-v5-c-helper-text__item.pf-m-dynamic |
.pf-v5-c-helper-text__item-text | <span> | Initiates a helper text item text. Required |
.pf-m-dynamic | .pf-v5-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-v5-c-helper-text__item | Modifies a helper text item for indeterminate state styles. |
.pf-m-warning | .pf-v5-c-helper-text__item | Modifies a helper text item for warning state styles. |
.pf-m-success | .pf-v5-c-helper-text__item | Modifies a helper text item for success state styles. |
.pf-m-error | .pf-v5-c-helper-text__item | Modifies a helper text item for error state styles. |
.pf-m-hidden | .pf-v5-c-helper-text | Hides helper text. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--Gap | 0.25rem | ||
--pf-v5-c-helper-text--Gap --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--FontSize | 0.875rem | ||
--pf-v5-c-helper-text--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-icon--Color | #151515 | ||
--pf-v5-c-helper-text__item-icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-text--Color | #151515 | ||
--pf-v5-c-helper-text__item-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-icon--m-indeterminate--Color | #6a6e73 | ||
--pf-v5-c-helper-text__item-icon--m-indeterminate--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-text--m-indeterminate--Color | #6a6e73 | ||
--pf-v5-c-helper-text__item-text--m-indeterminate--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-icon--m-warning--Color | #f0ab00 | ||
--pf-v5-c-helper-text__item-icon--m-warning--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-text--m-warning--Color | #795600 | ||
--pf-v5-c-helper-text__item-text--m-warning--Color --pf-v5-global--warning-color--200 $pf-v5-global--warning-color--200 $pf-v5-color-gold-600 #795600 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-icon--m-success--Color | #3e8635 | ||
--pf-v5-c-helper-text__item-icon--m-success--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-text--m-success--Color | #1e4f18 | ||
--pf-v5-c-helper-text__item-text--m-success--Color --pf-v5-global--success-color--200 $pf-v5-global--success-color--200 $pf-v5-color-green-600 #1e4f18 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-icon--m-error--Color | #c9190b | ||
--pf-v5-c-helper-text__item-icon--m-error--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-text--m-error--Color | #a30000 | ||
--pf-v5-c-helper-text__item-text--m-error--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic__item-icon--Color | #151515 | ||
--pf-v5-c-helper-text--m-dynamic__item-icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic__item-text--Color | #151515 | ||
--pf-v5-c-helper-text--m-dynamic__item-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color | #6a6e73 | ||
--pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-text--Color | #6a6e73 | ||
--pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-text--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-warning__item-icon--Color | #f0ab00 | ||
--pf-v5-c-helper-text--m-dynamic--m-warning__item-icon--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-warning__item-text--Color | #6a6e73 | ||
--pf-v5-c-helper-text--m-dynamic--m-warning__item-text--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-success__item-icon--Color | #3e8635 | ||
--pf-v5-c-helper-text--m-dynamic--m-success__item-icon--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-success__item-text--Color | #6a6e73 | ||
--pf-v5-c-helper-text--m-dynamic--m-success__item-text--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-error__item-icon--Color | #c9190b | ||
--pf-v5-c-helper-text--m-dynamic--m-error__item-icon--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-error__item-text--Color | #151515 | ||
--pf-v5-c-helper-text--m-dynamic--m-error__item-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-icon--MarginRight | 0.25rem | ||
--pf-v5-c-helper-text__item-icon--MarginRight --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 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-icon--Color --pf-v5-c-helper-text__item-icon--m-indeterminate--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #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-text--Color --pf-v5-c-helper-text__item-text--m-indeterminate--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #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--m-dynamic__item-icon--Color --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #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--m-dynamic__item-text--Color --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-text--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #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-icon--Color --pf-v5-c-helper-text__item-icon--m-warning--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #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-text--Color --pf-v5-c-helper-text__item-text--m-warning--Color --pf-v5-global--warning-color--200 $pf-v5-global--warning-color--200 $pf-v5-color-gold-600 #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--m-dynamic__item-icon--Color --pf-v5-c-helper-text--m-dynamic--m-warning__item-icon--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #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--m-dynamic__item-text--Color --pf-v5-c-helper-text--m-dynamic--m-warning__item-text--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #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-icon--Color --pf-v5-c-helper-text__item-icon--m-success--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #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-text--Color --pf-v5-c-helper-text__item-text--m-success--Color --pf-v5-global--success-color--200 $pf-v5-global--success-color--200 $pf-v5-color-green-600 #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--m-dynamic__item-icon--Color --pf-v5-c-helper-text--m-dynamic--m-success__item-icon--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #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--m-dynamic__item-text--Color --pf-v5-c-helper-text--m-dynamic--m-success__item-text--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #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-icon--Color --pf-v5-c-helper-text__item-icon--m-error--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #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-text--Color --pf-v5-c-helper-text__item-text--m-error--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #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--m-dynamic__item-icon--Color --pf-v5-c-helper-text--m-dynamic--m-error__item-icon--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #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--m-dynamic__item-text--Color --pf-v5-c-helper-text--m-dynamic--m-error__item-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #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-text--Color --pf-v5-c-helper-text--m-dynamic__item-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-helper-text__item.pf-m-dynamic | --pf-v5-c-helper-text__item-icon--Color | #151515 | ||
--pf-v5-c-helper-text__item-icon--Color --pf-v5-c-helper-text--m-dynamic__item-icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
View source on GitHub
