Helper text

Helper text is a text-based support method that adds additional context to field inputs.

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 columnSelectorVariableValue
: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