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>