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

Variants

Single Input

127 Characters left

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

Multiple Inputs

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

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