Examples
Basic
This is default helper text
Indeterminate:
This is indeterminate helper text
Warning:
This is warning helper text
Success:
This is success helper text
Error:
This is error helper text
Multiple items
You can include multiple HelperTextItem components inside a single HelperText container.
- 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
If the HelperTextItem components are expected or intended to dynamically update in some way, you should use a dynamic HelperText container.
This is default helper text
Indeterminate:
This is indeterminate helper text
Warning:
This is warning helper text
Success:
This is success helper text
Error:
This is error helper text
Dynamic list
- Success: Must be at least 14 characters
- Error: Cannot contain any variation of the word "redhat"
- Success: 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 | |
|---|---|---|---|---|
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--Gap | 0.25rem | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-text--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-text--FontWeight | 400 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-icon--m-indeterminate--Color | (In light theme) #707070 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-text--m-indeterminate--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-icon--m-warning--Color | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-text--m-warning--FontWeight | 500 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-icon--m-success--Color | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-text--m-success--FontWeight | 500 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-icon--m-error--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-text--m-error--FontWeight | 500 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity | 200ms | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity | cubic-bezier(.4, 0, .2, 1) | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--m-dynamic__item-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color | (In light theme) #707070 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--m-dynamic--m-warning__item-text--FontWeight | 500 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color | (In light theme) #b1380b | ||
| ||||
| .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 | ||
| ||||