Textarea
Text areas serve as expansive fields for text input, facilitating detailed user expressions within digital platforms. These essential elements accommodate extensive written content, where detailed communication is key.
Examples
Default
Default Textarea.
Labeled Textarea
Add a label by passing the label prop to the component.
Add a helper by passing the helper prop to the component.
Mark as required by passing the required prop to the component.
Hint Input
Add a hint by passing the hint prop to the component.
Add an icon to the hint by passing the showHintIcon prop to the component.
Will be reviewed by team
Will be reviewed by team
Character Count Textarea
Add a character counter by passing the showCount and maxLength prop to the component.
Errored Textarea
Display in error state by passing the error prop to the component.
Combine with the hint and showHint props to show an error message.
select date in the future
Installation
Properties
In addition to default HTML properties, the Textarea component has the following properties:
Label displayed above the Input.
Additional helper text displayed to the right of the label. Only shown when label is set.
Hint text, displayed below the Input.
Toggle whether to display info icon next to the hint. Only shown when hint is set.
Toggle whether to show character counter in the bottom right of the Textarea. Make sure to set the maxLength prop on
the Textarea.
Toggle whether there is an error in the Input. Note, that this only adds a visual indicator. This also affects the
styling of the label and hint.
Classname to style the container of the Input.