Prefix & Suffix Adornments
The TextArea provides configuration properties for adding items as prefix and suffix adornments. The component can display both built-in and custom adornments. Below you can find more details about the different configuration options.
Built-In Adornments
Validation Icon
The TextArea component provides the showValidationIcon prop that can be used in a combination with the inputClass or the valid properties. Configuring a combination of these properties we can show a validation icon that marks the TextArea value as valid or invalid.
Loading Icon
You can display a loading icon in the TextArea by setting its showLoadingIcon property to true.
Clear button
You can display the built-in clear button inside the TextArea by setting its showClearButton property to true. The clear button will appear once there is a value inside the TextArea.
Separator
In scenarios when we need to display a separator in the adornments, we can use the InputSeparator component as demonstrated in the following example.
Prefix Adornments Customization
The TextArea component allows you to define custom template that will be visualized as a prefix inside the component. To define a custom prefix, use the inputPrefix property as in the following example. The flow direction of the prefix, text element and the suffix elements is controlled by the flow prop.
Suffix Adornments Customization
The TextArea component allows you to define custom template that will be visualized as a suffix inside the component. To define a custom suffix, use the inputSuffix property as in the following example. The flow direction of the prefix, text element and the suffix elements is controlled by the flow prop.
Disabled Adornments
All adornments defined for the TextArea component are automatically enabled/disabled based on the disabled property. The property controls the enabled/disabled state of the whole TextArea.
