## Adornments

The `TextBox` 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-develop/components/inputs/textbox/adornments#built-in-adornments)
* [Suffix and Prefix Custom Adornments](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/textbox/adornments#suffix-and-prefix-custom-adornments)

## Built-In Adornments

### Validation Icon

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

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

### Loading Icon

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

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

### Clear button

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

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

## Suffix and Prefix Custom Adornments

Render custom Vue Components like `Icon` and `Button` as `prefix` and `suffix` to the TextBox and implement custom functionality on top of them.

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

### Separator

To visually separate the specified adornments, you can add an [`InputSeparator`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/inputseparator).

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

### Clear TextBox Value with Custom Solution

The TextBox can be reset by rendering a custom clickable component which controls its current value.

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

## Suggested Links

* [API Reference of the TextBox](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/textboxprops)
* [API Reference of the Button](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/buttonprops)