Adornments in EJ2 TypeScript NumericTextBox control

23 Dec 202512 minutes to read

Adornments allow you to add custom elements before or after the numeric textbox using the prependTemplate and appendTemplate properties. These elements can include currency symbols, unit labels, or action icons to provide context and quick actions without affecting numeric behavior or float label functionality.

Common Use Cases

  • Currency Symbols: Add indicators like $, €, ¥ for monetary inputs.
  • Unit Labels: Show measurement units (kg, cm, km).
  • Action Icons: Include buttons for clear, reset, or custom actions.
  • Visual Context: Display icons for input type or status.

Adding Adornments to NumericTextBox

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 numeric textbox.
appendTemplate: Renders elements after the numeric textbox.

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

import { NumericTextBox } from '@syncfusion/ej2-inputs';

/**
 * Adornments NumericTextBox sample
 */
let prependNumeric: NumericTextBox = new NumericTextBox({
    floatLabelType: "Auto",
    value: 1,
    placeholder: 'Enter the price',
    prependTemplate: '<span id="menu" class="e-icons e-menu" title="Menu"></span><span class="e-input-separator"></span><span id="search" class="e-icons e-search" title="Search"></span><span class="e-input-separator"></span>',
    change: () => {
        appendNumeric.value = prependNumeric.value * 5;
        appendNumeric.dataBind();
    }
});
prependNumeric.appendTo('#prepend');
let appendNumeric: NumericTextBox = new NumericTextBox({
    floatLabelType: "Auto",
    placeholder: 'Enter the kg',
    step: 1,
    value: 5,
    appendTemplate: '<span>kg</span>',
    change: () => {
        prependNumeric.value = appendNumeric.value / 5;
        prependNumeric.dataBind();
    }
});
appendNumeric.appendTo('#append');
let iconNumeric: NumericTextBox = new NumericTextBox({
    floatLabelType: "Auto",
    placeholder: 'Enter the Number',
    value: 10,
    showSpinButton: false,
    prependTemplate: '<span id="reset" class="e-icons e-reset" title="Reset"></span><span class="e-input-separator"></span>',
    appendTemplate: '<span class="e-input-separator"></span><span id="subract" class="e-icons e-horizontal-line"></span><span class="e-input-separator"></span><span id="plus" class="e-icons e-plus"></span>',
    created: () => {
        let resetSpan: HTMLElement = document.querySelector('#reset') as HTMLElement;
        if (resetSpan) {
            resetSpan.addEventListener('click', function () {
                iconNumeric.value = null;
                iconNumeric.dataBind();
            });
        }
        let subractSpan: HTMLElement = document.querySelector('#subract') as HTMLElement;
        if (subractSpan) {
            subractSpan.addEventListener('click', function () {
                iconNumeric.value = iconNumeric.value - 1;
                iconNumeric.dataBind();
            });
        }
        let plusSpan: HTMLElement = document.querySelector('#plus') as HTMLElement;
        if (plusSpan) {
            plusSpan.addEventListener('click', function () {
                iconNumeric.value = iconNumeric.value + 1;
                iconNumeric.dataBind();
            });
        }
    }
});
iconNumeric.appendTo('#icontemplate');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 NumericTextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript NumericTextBox Component" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/material3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/material3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class="col-lg-12 control-section">
            <div class="content-wrapper">
                <div class="row custom-margin e-prependtemplate">
                    <input id="prepend" type="text">
                </div>
                <div class="row custom-margin e-appendtemplate">
                    <input id="append" type="text">
                </div>
                <div class="row custom-margin custom-margin-row e-icontemplate">
                    <input id="icontemplate" type="text">
                </div>
            </div>
        </div>
    </div>
    <style>
        .content-wrapper {
            width: 35%;
            margin: 0 auto;
            min-width: 250px;
        }

        .custom-margin {
            margin: 25px 0;
        }

        .e-icons.e-search {
            background-color: rgba(0, 0, 0, 0) !important;
        }

        .e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
            background-color: rgba(0, 0, 0, 0) !important;
        }

        .bootstrap5\.3 .e-icontemplate .e-prepend-template,
        .bootstrap5\.3 .e-prependtemplate .e-prepend-template,
        .bootstrap5\.3-dark .e-icontemplate .e-prepend-template,
        .bootstrap5\.3-dark .e-prependtemplate .e-prepend-template,
        .tailwind3 .e-icontemplate .e-prepend-template,
        .tailwind3 .e-prependtemplate .e-prepend-template,
        .tailwind3-dark .e-icontemplate .e-prepend-template,
        .tailwind3-dark .e-prependtemplate .e-prepend-template {
            padding-right: 0 !important;
        }

        .fluent2 .e-icontemplate .e-prepend-template,
        .fluent2-dark .e-icontemplate .e-prepend-template,
        .fluent2-highcontrast .e-icontemplate .e-prepend-template,
        .fluent2 .e-prependtemplate .e-prepend-template,
        .fluent2-dark .e-prependtemplate .e-prepend-template,
        .fluent2-highcontrast .e-prependtemplate .e-prepend-template {
            padding-left: 8px !important;
        }

        .fluent2 .e-appendtemplate .e-numerictextbox,
        .fluent2-dark .e-appendtemplate .e-numerictextbox,
        .fluent2-highcontrast .e-appendtemplate .e-numerictextbox {
            padding-left: 8px !important;
        }

        .material3 .e-icontemplate .e-prepend-template,
        .material3-dark .e-icontemplate .e-prepend-template,
        .material3 .e-prependtemplate .e-prepend-template,
        .material3-dark .e-prependtemplate .e-prepend-template {
            padding-left: 0 !important;
        }

        .e-bigger.tailwind3 .e-prependtemplate .e-prepend-template,
        .e-bigger.tailwind3-dark .e-prependtemplate .e-prepend-template {
            padding-left: 11px !important;
        }

        .e-icontemplate .e-icons.e-reset,
        .e-icontemplate .e-icons.e-horizontal-line,
        .e-icontemplate .e-icons.e-plus {
            cursor: pointer;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue', 'calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}