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-v6-c-helper-text | <div>, <ul> | Initiates the helper text component. Required |
.pf-v6-c-helper-text__item | <div>, <li> | Initiates a helper text item. Required |
.pf-v6-c-helper-text__item-icon | <span> | Initiates a helper text item icon. Required when used in .pf-v6-c-helper-text__item.pf-m-dynamic |
.pf-v6-c-helper-text__item-text | <span> | Initiates a helper text item text. Required |
.pf-m-dynamic | .pf-v6-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-v6-c-helper-text__item | Modifies a helper text item for indeterminate state styles. |
.pf-m-warning | .pf-v6-c-helper-text__item | Modifies a helper text item for warning state styles. |
.pf-m-success | .pf-v6-c-helper-text__item | Modifies a helper text item for success state styles. |
.pf-m-error | .pf-v6-c-helper-text__item | Modifies a helper text item for error state styles. |
.pf-m-hidden | .pf-v6-c-helper-text | Hides helper text. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text--Gap | 0.25rem | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text--FontSize | 0.75rem | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text__item-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text__item-text--Color | (In light theme) #151515 | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text__item-text--FontWeight | 400 | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text__item-icon--m-indeterminate--Color | (In light theme) #707070 | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text__item-text--m-indeterminate--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text__item-icon--m-warning--Color | (In light theme) #dca614 | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text__item-text--m-warning--FontWeight | 500 | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text__item-icon--m-success--Color | (In light theme) #3d7317 | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text__item-text--m-success--FontWeight | 500 | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text__item-icon--m-error--Color | (In light theme) #b1380b | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text__item-text--m-error--FontWeight | 500 | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text--m-dynamic__item-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color | (In light theme) #707070 | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color | (In light theme) #4d4d4d | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color | (In light theme) #dca614 | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text--m-dynamic--m-warning__item-text--FontWeight | 500 | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color | (In light theme) #3d7317 | ||
| ||||
| :where(:root, .pf-v6-c-helper-text) | --pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color | (In light theme) #b1380b | ||
| ||||
| :where(:root, .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 | ||
| ||||
