Helper Text
Displays contextual feedback for form fields with optional icon and status color.
Overview
Installation
npm install @patternfly/elementsUsage
Slots
-
icon -
Optional custom icon to override the default icon.
- Default Slot
-
Default slot for the helper text content.
Attributes
variant-
Defines the helper text status and its corresponding color and icon.
- DOM Property
variant- Type
-
| 'default' | 'success' | 'warning' | 'error' | 'indeterminate' - Default
-
'default'
icon-
Custom icon name to override the default icon. Requires
<pf-icon>to be imported.- DOM Property
icon- Type
-
string - Default
-
unknown
icon-set-
Icon set for custom icons (e.g., 'fas', 'patternfly').
- DOM Property
iconSet- Type
-
string - Default
-
unknown
Methods
None
Events
icon-load-
Fired when the icon successfully loads.
Event Type:unknown icon-error-
Fired if loading the icon fails.
Event Type:unknown
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-c-helper-text--Gap |
0.25rem
|
|
--pf-c-helper-text--FontSize |
0.875rem
|
|
--pf-c-helper-text__item-text--Color |
#151515
|
|
--pf-c-helper-text__item-text--m-indeterminate--Color |
#6a6e73
|
|
--pf-c-helper-text__item-text--m-warning--Color |
#795600
|
|
--pf-c-helper-text__item-text--m-success--Color |
#1e4f18
|
|
--pf-c-helper-text__item-text--m-error--Color |
#a30000
|
CSS Shadow Parts
icon-
The container for the icon.
text-
The container for the text.
