# 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](https://www.telerik.com/kendo-vue-ui/components/inputs/textarea/prefix-suffix-adornments#built-in-adornments)
* [Prefix Adornments](https://www.telerik.com/kendo-vue-ui/components/inputs/textarea/prefix-suffix-adornments#prefix-adornments-customization)
* [Suffix Adornments](https://www.telerik.com/kendo-vue-ui/components/inputs/textarea/prefix-suffix-adornments#suffix-adornments-customization)
* [Disabled Adornments](https://www.telerik.com/kendo-vue-ui/components/inputs/textarea/prefix-suffix-adornments#disabled-adornments)

## Built-In Adornments

### Validation Icon

The `TextArea` component provides the [showValidationIcon](https://www.telerik.com/kendo-vue-ui/components/inputs/api/textareaprops#showvalidationicon) prop that can be used in a combination with the [inputClass](https://www.telerik.com/kendo-vue-ui/components/inputs/api/textareaprops#inputclass) or the [valid](https://www.telerik.com/kendo-vue-ui/components/inputs/api/textareaprops#valid) properties. Configuring a combination of these properties we can show a validation icon that marks the `TextArea` value as valid or invalid.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/textarea/adornments/validation-icon/source.txt)

### Loading Icon

You can display a loading icon in the `TextArea` by setting its [showLoadingIcon](https://www.telerik.com/kendo-vue-ui/components/inputs/api/textareaprops#showloadingicon) property to `true`.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/textarea/adornments/loading-icon/source.txt)

### Clear button

You can display the built-in `clear` button inside the `TextArea` by setting its [showClearButton](https://www.telerik.com/kendo-vue-ui/components/inputs/api/textareaprops#showclearbutton) property to `true`. The `clear` button will appear once there is a value inside the `TextArea`.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/textarea/adornments/clear-button/source.txt)

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/textarea/adornments/separator/source.txt)

## 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](https://www.telerik.com/kendo-vue-ui/components/inputs/api/textareaprops#inputprefix) property as in the following example. The flow direction of the prefix, text element and the suffix elements is controlled by the [flow](https://www.telerik.com/kendo-vue-ui/components/inputs/api/textareaprops#flow) prop.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/textarea/adornments/prefix/source.txt)

## 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](https://www.telerik.com/kendo-vue-ui/components/inputs/api/textareaprops#inputprefix) property as in the following example. The flow direction of the prefix, text element and the suffix elements is controlled by the [flow](https://www.telerik.com/kendo-vue-ui/components/inputs/api/textareaprops#flow) prop.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/textarea/adornments/suffix/source.txt)

## Disabled Adornments

All adornments defined for the `TextArea` component are automatically **enabled/disabled** based on the [disabled](https://www.telerik.com/kendo-vue-ui/components/inputs/api/textareaprops#disabled) property. The property controls the **enabled/disabled** state of the whole `TextArea`.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/textarea/adornments/disabled/source.txt)

## Suggested Links

* [API Reference of the TextArea](https://www.telerik.com/kendo-vue-ui/components/inputs/api/textareaprops)
* [TextArea Appearance Configuration](https://www.telerik.com/kendo-vue-ui/components/inputs/numerictextbox/appearance)