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
This is indeterminate helper text
This is warning helper text
This is success helper text
This is error helper text
This is error helper text with a custom icon
This is error helper text with no icon
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
Props
HelperText
| Name | Type | Default | Description |
|---|---|---|---|
| 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. |
| variant | 'default' | 'indeterminate' | 'warning' | 'success' | 'error' | 'default' | Variant styling of the helper text item. |
CSS variables
| .pf-c-helper-text | --pf-c-helper-text--Gap | 0.25rem | |
| .pf-c-helper-text | --pf-c-helper-text--FontSize | 0.875rem | |
| .pf-c-helper-text | --pf-c-helper-text__item-icon--Color | #151515 | |
| .pf-c-helper-text | --pf-c-helper-text__item-text--Color | #151515 | |
| .pf-c-helper-text | --pf-c-helper-text__item-icon--m-indeterminate--Color | #6a6e73 | |
| .pf-c-helper-text | --pf-c-helper-text__item-text--m-indeterminate--Color | #6a6e73 | |
| .pf-c-helper-text | --pf-c-helper-text__item-icon--m-warning--Color | #f0ab00 | |
| .pf-c-helper-text | --pf-c-helper-text__item-text--m-warning--Color | #795600 | |
| .pf-c-helper-text | --pf-c-helper-text__item-icon--m-success--Color | #3e8635 | |
| .pf-c-helper-text | --pf-c-helper-text__item-text--m-success--Color | #1e4f18 | |
| .pf-c-helper-text | --pf-c-helper-text__item-icon--m-error--Color | #c9190b | |
| .pf-c-helper-text | --pf-c-helper-text__item-text--m-error--Color | #a30000 | |
| .pf-c-helper-text | --pf-c-helper-text--m-dynamic__item-icon--Color | #151515 | |
| .pf-c-helper-text | --pf-c-helper-text--m-dynamic__item-text--Color | #151515 | |
| .pf-c-helper-text | --pf-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color | #6a6e73 | |
| .pf-c-helper-text | --pf-c-helper-text--m-dynamic--m-indeterminate__item-text--Color | #6a6e73 | |
| .pf-c-helper-text | --pf-c-helper-text--m-dynamic--m-warning__item-icon--Color | #f0ab00 | |
| .pf-c-helper-text | --pf-c-helper-text--m-dynamic--m-warning__item-text--Color | #6a6e73 | |
| .pf-c-helper-text | --pf-c-helper-text--m-dynamic--m-success__item-icon--Color | #3e8635 | |
| .pf-c-helper-text | --pf-c-helper-text--m-dynamic--m-success__item-text--Color | #6a6e73 | |
| .pf-c-helper-text | --pf-c-helper-text--m-dynamic--m-error__item-icon--Color | #c9190b | |
| .pf-c-helper-text | --pf-c-helper-text--m-dynamic--m-error__item-text--Color | #151515 | |
| .pf-c-helper-text | --pf-c-helper-text__item-icon--MarginRight | 0.25rem | |
| .pf-c-helper-text__item.pf-m-indeterminate | --pf-c-helper-text__item-icon--Color | #6a6e73 | |
| .pf-c-helper-text__item.pf-m-indeterminate | --pf-c-helper-text__item-text--Color | #6a6e73 | |
| .pf-c-helper-text__item.pf-m-indeterminate | --pf-c-helper-text--m-dynamic__item-icon--Color | #6a6e73 | |
| .pf-c-helper-text__item.pf-m-indeterminate | --pf-c-helper-text--m-dynamic__item-text--Color | #6a6e73 | |
| .pf-c-helper-text__item.pf-m-warning | --pf-c-helper-text__item-icon--Color | #f0ab00 | |
| .pf-c-helper-text__item.pf-m-warning | --pf-c-helper-text__item-text--Color | #795600 | |
| .pf-c-helper-text__item.pf-m-warning | --pf-c-helper-text--m-dynamic__item-icon--Color | #f0ab00 | |
| .pf-c-helper-text__item.pf-m-warning | --pf-c-helper-text--m-dynamic__item-text--Color | #6a6e73 | |
| .pf-c-helper-text__item.pf-m-success | --pf-c-helper-text__item-icon--Color | #3e8635 | |
| .pf-c-helper-text__item.pf-m-success | --pf-c-helper-text__item-text--Color | #1e4f18 | |
| .pf-c-helper-text__item.pf-m-success | --pf-c-helper-text--m-dynamic__item-icon--Color | #3e8635 | |
| .pf-c-helper-text__item.pf-m-success | --pf-c-helper-text--m-dynamic__item-text--Color | #6a6e73 | |
| .pf-c-helper-text__item.pf-m-error | --pf-c-helper-text__item-icon--Color | #c9190b | |
| .pf-c-helper-text__item.pf-m-error | --pf-c-helper-text__item-text--Color | #a30000 | |
| .pf-c-helper-text__item.pf-m-error | --pf-c-helper-text--m-dynamic__item-icon--Color | #c9190b | |
| .pf-c-helper-text__item.pf-m-error | --pf-c-helper-text--m-dynamic__item-text--Color | #151515 | |
| .pf-c-helper-text__item.pf-m-dynamic | --pf-c-helper-text__item-text--Color | #151515 | |
| .pf-c-helper-text__item.pf-m-dynamic | --pf-c-helper-text__item-icon--Color | #151515 | |
View source on GitHub
