Helper text

Helper text is an on-screen field guideline that helps provide context regarding field inputs.

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

*required
NameTypeDefaultDescription

HelperTextItem

*required
NameTypeDefaultDescription

CSS variables

Expand or collapse columnSelectorVariableValue

View source on GitHub