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