Helper text

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

Examples

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

You can include multiple HelperTextItem components inside a single HelperText container.

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

This is indeterminate helper text

This is warning helper text

This is success helper text

This is error helper text

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

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.