HelperText

This component is a support for Input, Textarea and Dropdown components to display error feedback for an users action or to provide further information in advance.

  • HelperText could be shown either for a single or a cluster of sources (e.g. displaying an error message for two inputs)
  • Occurring error message will replace existing hint notifications
  • They are placed underneath its regarding source and they are left align
  • In case of multiple error notifications you should additionally show an error banner to provide global feedback

Properties

NameTypeDefault
variant

"info"| "danger"

Set the appropriate colors for component
"info"
inverted

boolean

Adjust component for display on a dark background
false

HelperText also supports all the properties of the Text.

Variants

Single Input

127 Characters left
127 Characters left
<Input placeholder="Enter something" />
<HelperText mt="1">127 Characters left</HelperText>

Multiple Inputs

Additional info that spans multiple input sources
Additional info that spans multiple input sources
<Input mr="1" placeholder="First name" />
<Input placeholder="Last name" />
<HelperText mt="1">Additional info that spans multiple input sources</HelperText>

Error

127 Characters left
127 Characters left
<Input placeholder="Enter something" />
<HelperText mt="1" variant="danger">127 Characters left</HelperText>
Table of contents
PropertiesVariants