Examples
Basic
This is default helper text
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;
With custom icons
This is default helper text
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;
Multiple items
You can pass multiple <HelperTextItem> components inside a single <Helpertext> container.
- This is default helper text
- This is another default helper text in the same HelperText block
- And this is more default text in the same HelperText block
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. |
| icon | React.ReactNode | Custom icon prefixing the helper text. This property will override the default icon when the variant property is passed in. | |
| 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. | |
| screenReaderText | string | `${variant} status` | Text that is only accessible to screen readers in order to announce the variant of a helper text item. This prop can only be used when the variant prop has a value other than "default". |
| variant | 'default' | 'indeterminate' | 'warning' | 'success' | 'error' | 'default' | Variant styling of the helper text item. Will also render a default icon, which can be overridden with the icon prop. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--Gap | 0.25rem | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-text--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-text--FontWeight | 400 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-icon--m-indeterminate--Color | (In light theme) #707070 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-text--m-indeterminate--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-icon--m-warning--Color | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-text--m-warning--FontWeight | 500 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-icon--m-success--Color | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-text--m-success--FontWeight | 500 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-icon--m-error--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text__item-text--m-error--FontWeight | 500 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--m-dynamic__item-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color | (In light theme) #707070 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--m-dynamic--m-warning__item-text--FontWeight | 500 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-helper-text | --pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color | (In light theme) #b1380b | ||
| ||||
| .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 | ||
| ||||
