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

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

IconName

Using the iconName prop of the MaskedTextBox component, we can add the built-in Kendo UI Icons.

Example
View Source
Change Theme:

Validation Icon

The MaskedTextBox 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 MaskedTextBox value as valid or invalid.

Example
View Source
Change Theme:

Loading Icon

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

Example
View Source
Change Theme:

Clear button

You can display the built-in clear button inside the MaskedTextBox by setting its showClearButton property to true. The clear button will appear once there is a value inside the MaskedTextBox.

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 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 property as in the following example.

Example
View Source
Change Theme:

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 property as in the following example.

Example
View Source
Change Theme:

Disabled Adornments

All adornments defined for the MaskedTextBox component are automatically enabled/disabled based on the disabled property. The property controls the enabled/disabled state of the whole MaskedTextBox.

Example
View Source
Change Theme: