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
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.
Loading Icon
You can display a loading icon in the MaskedTextBox by setting its showLoadingIcon property to true.
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.
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.
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.
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.
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.
