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
Static with default icons
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
Static with custom icons
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: default status;
This is indeterminate helper text : indeterminate status;
This is warning helper text : warning status;
This is success helper text : success status;
This is error helper text : error status;
This is error helper text with a custom icon : error status;
This is error helper text with no icon : error status;
Dynamic list
- Must be at least 14 characters : success status;
- Cannot contain any variation of the word "redhat" : error status;
- Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols : success status;
Props
HelperText
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Adds an accessible label to the helper text when component is a "ul". | |
| children | React.ReactNode | Content rendered inside the helper text container. | |
| className | string | Additional classes applied to the helper text container. | |
| component | 'div' | 'ul' | 'div' | Component type of the helper text container |
| id | string | ID for the helper text container. The value of this prop can be passed into a form component's aria-describedby prop when you intend for all helper text items to be announced to assistive technologies. | |
| isLiveRegion | boolean | false | Flag for indicating whether the helper text container is a live region. Use this prop when you expect or intend for any helper text items within the container to be dynamically updated. |
HelperTextItem
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the helper text item. | |
| className | string | Additional classes applied to the helper text item. | |
| component | 'div' | 'li' | 'div' | Sets the component type of the helper text item. |
| hasIcon | boolean | isDynamic | Flag indicating the helper text should have an icon. Dynamic helper texts include icons by default while static helper texts do not. |
| icon | React.ReactNode | Custom icon prefixing the helper text. This property will override the default icon paired with each helper text variant. | |
| id | string | ID for the helper text item. The value of this prop can be passed into a form component's aria-describedby prop when you intend for only specific helper text items to be announced to assistive technologies. | |
| isDynamic | boolean | false | Flag indicating the helper text item is dynamic. This prop should be used when the text content of the helper text item will never change, but the icon and styling will be dynamically updated via the `variant` prop. |
| screenReaderText | string | `${variant} status` | Text that is only accessible to screen readers in order to announce the status of a helper text item. This prop can only be used when the isDynamic prop is also passed in. |
| variant | 'default' | 'indeterminate' | 'warning' | 'success' | 'error' | 'default' | Variant styling of the helper text item. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--Gap | 0.25rem | ||
--pf-v5-c-helper-text--Gap --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--FontSize | 0.875rem | ||
--pf-v5-c-helper-text--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-icon--Color | #151515 | ||
--pf-v5-c-helper-text__item-icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-text--Color | #151515 | ||
--pf-v5-c-helper-text__item-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-icon--m-indeterminate--Color | #6a6e73 | ||
--pf-v5-c-helper-text__item-icon--m-indeterminate--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-text--m-indeterminate--Color | #6a6e73 | ||
--pf-v5-c-helper-text__item-text--m-indeterminate--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-icon--m-warning--Color | #f0ab00 | ||
--pf-v5-c-helper-text__item-icon--m-warning--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-text--m-warning--Color | #795600 | ||
--pf-v5-c-helper-text__item-text--m-warning--Color --pf-v5-global--warning-color--200 $pf-v5-global--warning-color--200 $pf-v5-color-gold-600 #795600 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-icon--m-success--Color | #3e8635 | ||
--pf-v5-c-helper-text__item-icon--m-success--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-text--m-success--Color | #1e4f18 | ||
--pf-v5-c-helper-text__item-text--m-success--Color --pf-v5-global--success-color--200 $pf-v5-global--success-color--200 $pf-v5-color-green-600 #1e4f18 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-icon--m-error--Color | #c9190b | ||
--pf-v5-c-helper-text__item-icon--m-error--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-text--m-error--Color | #a30000 | ||
--pf-v5-c-helper-text__item-text--m-error--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic__item-icon--Color | #151515 | ||
--pf-v5-c-helper-text--m-dynamic__item-icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic__item-text--Color | #151515 | ||
--pf-v5-c-helper-text--m-dynamic__item-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color | #6a6e73 | ||
--pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-text--Color | #6a6e73 | ||
--pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-text--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-warning__item-icon--Color | #f0ab00 | ||
--pf-v5-c-helper-text--m-dynamic--m-warning__item-icon--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-warning__item-text--Color | #6a6e73 | ||
--pf-v5-c-helper-text--m-dynamic--m-warning__item-text--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-success__item-icon--Color | #3e8635 | ||
--pf-v5-c-helper-text--m-dynamic--m-success__item-icon--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-success__item-text--Color | #6a6e73 | ||
--pf-v5-c-helper-text--m-dynamic--m-success__item-text--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-error__item-icon--Color | #c9190b | ||
--pf-v5-c-helper-text--m-dynamic--m-error__item-icon--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text--m-dynamic--m-error__item-text--Color | #151515 | ||
--pf-v5-c-helper-text--m-dynamic--m-error__item-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-helper-text | --pf-v5-c-helper-text__item-icon--MarginRight | 0.25rem | ||
--pf-v5-c-helper-text__item-icon--MarginRight --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-helper-text__item.pf-m-indeterminate | --pf-v5-c-helper-text__item-icon--Color | #6a6e73 | ||
--pf-v5-c-helper-text__item-icon--Color --pf-v5-c-helper-text__item-icon--m-indeterminate--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text__item.pf-m-indeterminate | --pf-v5-c-helper-text__item-text--Color | #6a6e73 | ||
--pf-v5-c-helper-text__item-text--Color --pf-v5-c-helper-text__item-text--m-indeterminate--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text__item.pf-m-indeterminate | --pf-v5-c-helper-text--m-dynamic__item-icon--Color | #6a6e73 | ||
--pf-v5-c-helper-text--m-dynamic__item-icon--Color --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text__item.pf-m-indeterminate | --pf-v5-c-helper-text--m-dynamic__item-text--Color | #6a6e73 | ||
--pf-v5-c-helper-text--m-dynamic__item-text--Color --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-text--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text__item.pf-m-warning | --pf-v5-c-helper-text__item-icon--Color | #f0ab00 | ||
--pf-v5-c-helper-text__item-icon--Color --pf-v5-c-helper-text__item-icon--m-warning--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-helper-text__item.pf-m-warning | --pf-v5-c-helper-text__item-text--Color | #795600 | ||
--pf-v5-c-helper-text__item-text--Color --pf-v5-c-helper-text__item-text--m-warning--Color --pf-v5-global--warning-color--200 $pf-v5-global--warning-color--200 $pf-v5-color-gold-600 #795600 | ||||
| .pf-v5-c-helper-text__item.pf-m-warning | --pf-v5-c-helper-text--m-dynamic__item-icon--Color | #f0ab00 | ||
--pf-v5-c-helper-text--m-dynamic__item-icon--Color --pf-v5-c-helper-text--m-dynamic--m-warning__item-icon--Color --pf-v5-global--warning-color--100 $pf-v5-global--warning-color--100 $pf-v5-color-gold-400 #f0ab00 | ||||
| .pf-v5-c-helper-text__item.pf-m-warning | --pf-v5-c-helper-text--m-dynamic__item-text--Color | #6a6e73 | ||
--pf-v5-c-helper-text--m-dynamic__item-text--Color --pf-v5-c-helper-text--m-dynamic--m-warning__item-text--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text__item.pf-m-success | --pf-v5-c-helper-text__item-icon--Color | #3e8635 | ||
--pf-v5-c-helper-text__item-icon--Color --pf-v5-c-helper-text__item-icon--m-success--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-helper-text__item.pf-m-success | --pf-v5-c-helper-text__item-text--Color | #1e4f18 | ||
--pf-v5-c-helper-text__item-text--Color --pf-v5-c-helper-text__item-text--m-success--Color --pf-v5-global--success-color--200 $pf-v5-global--success-color--200 $pf-v5-color-green-600 #1e4f18 | ||||
| .pf-v5-c-helper-text__item.pf-m-success | --pf-v5-c-helper-text--m-dynamic__item-icon--Color | #3e8635 | ||
--pf-v5-c-helper-text--m-dynamic__item-icon--Color --pf-v5-c-helper-text--m-dynamic--m-success__item-icon--Color --pf-v5-global--success-color--100 $pf-v5-global--success-color--100 $pf-v5-color-green-500 #3e8635 | ||||
| .pf-v5-c-helper-text__item.pf-m-success | --pf-v5-c-helper-text--m-dynamic__item-text--Color | #6a6e73 | ||
--pf-v5-c-helper-text--m-dynamic__item-text--Color --pf-v5-c-helper-text--m-dynamic--m-success__item-text--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-helper-text__item.pf-m-error | --pf-v5-c-helper-text__item-icon--Color | #c9190b | ||
--pf-v5-c-helper-text__item-icon--Color --pf-v5-c-helper-text__item-icon--m-error--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-helper-text__item.pf-m-error | --pf-v5-c-helper-text__item-text--Color | #a30000 | ||
--pf-v5-c-helper-text__item-text--Color --pf-v5-c-helper-text__item-text--m-error--Color --pf-v5-global--danger-color--200 $pf-v5-global--danger-color--200 $pf-v5-color-red-200 #a30000 | ||||
| .pf-v5-c-helper-text__item.pf-m-error | --pf-v5-c-helper-text--m-dynamic__item-icon--Color | #c9190b | ||
--pf-v5-c-helper-text--m-dynamic__item-icon--Color --pf-v5-c-helper-text--m-dynamic--m-error__item-icon--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-helper-text__item.pf-m-error | --pf-v5-c-helper-text--m-dynamic__item-text--Color | #151515 | ||
--pf-v5-c-helper-text--m-dynamic__item-text--Color --pf-v5-c-helper-text--m-dynamic--m-error__item-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-helper-text__item.pf-m-dynamic | --pf-v5-c-helper-text__item-text--Color | #151515 | ||
--pf-v5-c-helper-text__item-text--Color --pf-v5-c-helper-text--m-dynamic__item-text--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-helper-text__item.pf-m-dynamic | --pf-v5-c-helper-text__item-icon--Color | #151515 | ||
--pf-v5-c-helper-text__item-icon--Color --pf-v5-c-helper-text--m-dynamic__item-icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
View source on GitHub
