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
| Name | Type | Default | Description |
|---|
HelperTextItem
| Name | Type | Default | Description |
|---|
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
