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

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

Multiple Inputs

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

Error

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