# Prefix & Suffix Adornments

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

## Built-In Adornments

### Validation Icon

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

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

### Loading Icon

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

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

### Clear button

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/maskedtextbox/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/maskedtextbox/adornments/separator/source.txt)

## Prefix Adornments Customization

The `MaskedTextBox` 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-develop/components/inputs/api/maskedtextboxprops#inputprefix) property as in the following example.

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

## Suffix Adornments Customization

The `MaskedTextBox` 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-develop/components/inputs/api/maskedtextboxprops#inputprefix) property as in the following example.

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

## Disabled Adornments

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

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

## Suggested Links

* [API Reference of the MaskedTextBox](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/maskedtextboxprops)
* [MaskedTextBox Appearance Configuration](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/maskedtextbox/appearance)