New to Kendo UI for Vue? Start a free 30-day trial

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

IconName

Using the iconName prop of the Kendo UI Icons.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

Loading Icon

You can display a loading icon in the TextArea by setting its showLoadingIcon property to true.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme: