Adornments in ASP.NET CORE MaskedTextBox control

22 Dec 20253 minutes to read

Adornments in the MaskedTextBox control allow you to add custom elements before or after the masked input using the prependTemplate and appendTemplate properties. These elements can include prefixes, suffix labels, or action icons to provide context, guide user input, and offer quick actions while preserving mask validation and float label behavior.

Common Use Cases

  • Entry Guidance: Add icons/text to hint the expected input (e.g., user icon for username/login).
  • Quick Actions: Include buttons to submit, clear, or copy the masked value.
  • Context Labels: Add static prefixes/suffixes like country code, domain, or unit suffix.
  • Visual Feedback: Show status indicators without interfering with the mask.

Adding Adornments to MaskedTextBox

Use prependTemplate and appendTemplate to inject HTML content before and after the masked input respectively. These templates do not alter mask behavior and support any inline HTML or icon.

  • prependTemplate: Renders elements before the masked input.
  • appendTemplate: Renders elements after the masked input.

The following example demonstrates how to add adornments in the MaskedTextBox control.

@page
@using EJ2CoreSampleBrowser.Models
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="col-lg-12 control-section">
        <div class="content-wrapper">
            <div class="mask-row">
                <ejs-maskedtextbox id="maskTemplate" mask="0000-000-000" promptChar="#" placeholder="Enter phone number" floatLabelType="Auto"
                    prependTemplate="@Html.Raw("<span id='user' class='e-icons e-user' title='User'></span><span class='e-input-separator'></span>")"
                    appendTemplate="@Html.Raw("<span class='e-input-separator'></span><span id='sendIcon' class='e-icons e-send'></span>")">
                </ejs-maskedtextbox>
            </div>
        </div>
    </div>
}
@*custom code start*@
<style>
    .content-wrapper {
        width: 30%;
        margin: 0 auto;
        min-width: 250px;
    }
    .control-label {
        padding: 10px 0px 5px 0px;
        font-size: 12px;
    }
    .material .e-prepend-mask .e-append-template .e-icons.e-send:before,
    .material-dark .e-prepend-mask .e-append-template .e-icons.e-send:before,
    .fabric .e-prepend-mask .e-append-template .e-icons.e-send:before,
    .fabric-dark .e-prepend-mask .e-append-template .e-icons.e-send:before,
    .bootstrap .e-prepend-mask .e-append-template .e-icons.e-send:before,
    .bootstrap-dark .e-prepend-mask .e-append-template .e-icons.e-send:before,
    .bootstrap4 .e-prepend-mask .e-append-template .e-icons.e-send:before,
    .highcontrast .e-prepend-mask .e-append-template .e-icons.e-send:before {
        content: '\e816' !important;
    }
    .mask-row label.e-float-text,
    .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
    .mask-row .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
        margin-top: -2px;
    }
    .bootstrap5\.3 .mask-row .e-prepend-template,
    .bootstrap5\.3-dark .mask-row .e-prepend-template,
    .tailwind3 .mask-row .e-prepend-template,
    .tailwind3-dark .mask-row .e-prepend-template {
        padding-right: 0 !important;
    }
    .fluent2 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
    .fluent2-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
    .fluent2-highcontrast .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
        top: -8px !important;
    }
    .e-bigger.material3 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
    .e-bigger.material3-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
        top: -3px !important;
    }
    .e-bigger.bootstrap5\.3 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
    .e-bigger.bootstrap5\.3-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
        top: 20px !important;
    }
    .e-bigger.fluent2 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
    .e-bigger.fluent2-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
    .e-bigger.fluent2-highcontrast .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
        margin-top: 0 !important;
    }
</style>
@*custom code end*@

Output be like the below.

MaskedTextBox