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 |
|---|
