Adornments in EJ2 TypeScript TextBox control

23 Dec 202512 minutes to read

Adornments allow you to add custom elements before or after the TextBox using prependTemplate and appendTemplate. These elements can include icons, text labels, or action buttons to improve usability and provide visual context.

Overview

Adornments are useful for:

  • Visual Context: Adding icons that indicate the expected input type (e.g., user icon for username, envelope icon for email)
  • Functional Enhancement: Including action buttons such as password visibility toggles or clear buttons
  • Input Validation: Displaying validation status icons or error indicators
  • Unit Indicators: Showing currency symbols, temperature units, domain extensions, or measurement units
  • Accessibility: Providing visual and interactive guidance to help users input and improve discoverability

Common Use Cases

  • Visual Indicators: Icons for expected input type (e.g., user icon for username, envelope icon for email).
  • Functional Enhancements: Buttons for password visibility toggle or clear input.
  • Validation Status: Icons for error or success indicators.
  • Unit Indicators: Currency symbols, measurement units, or domain extensions.

Adding Adornments to TextBox

Use prependTemplate and appendTemplate properties to add custom HTML content before and after the TextBox.

  • prependTemplate: Renders elements before the TextBox.
  • appendTemplate: Renders elements after the TextBox.

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

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

let prependTextbox: TextBox = new TextBox({
    placeholder: 'Enter your Name',
    floatLabelType: 'Auto',
    cssClass: 'e-prepend-textbox',
    prependTemplate: '<span class="e-icons e-user"></span><span class="e-input-separator"></span>',
});
prependTextbox.appendTo('#prepend');

let appendTextbox: TextBox = new TextBox({
    placeholder: 'Password',
    floatLabelType: 'Auto',
    cssClass: 'e-eye-icon',
    appendTemplate: '<span class="e-input-separator"></span><span id="text-icon" class="e-icons e-eye"></span>',
    created: () => {
        let textIcon: HTMLElement = document.querySelector('#text-icon') as HTMLElement;
        if (textIcon) {
            textIcon.addEventListener('click', function () {
                if (appendTextbox.type === 'text') {
                    appendTextbox.type = 'Password';
                    textIcon.className = 'e-icons e-eye-slash';
                } else {
                    appendTextbox.type = 'text';
                    textIcon.className = 'e-icons e-eye';
                }
                appendTextbox.dataBind();
            });
        }
    }
});
appendTextbox.appendTo('#append');

let iconTextbox: TextBox = new TextBox({
    placeholder: 'Enter the Mail Address',
    floatLabelType: 'Auto',
    cssClass: 'e-icon-textbox',
    prependTemplate: '<span class="e-icons e-people"></span><span class="e-input-separator"></span>',
    appendTemplate: '<span>.com</span><span class="e-input-separator"></span><span id="delete-text" class="e-icons e-trash"></span>',
    created: () => {
        let deleteIcon: HTMLElement = document.querySelector('#delete-text') as HTMLElement;
        if (deleteIcon) {
            deleteIcon.addEventListener('click', function () {
                iconTextbox.value = '';
                iconTextbox.dataBind();
            });
        }
    }
});
iconTextbox.appendTo('#iconTextbox');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 TextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 TextBox Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.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 ador-textbox">
                <div class="row">
                    <input id="prepend">
                </div>
                <div class="row">
                    <input id="append">
                </div>
                <div class="row">
                    <input id="iconTextbox">
                </div>
            </div>
        </div>
    </div>
    <style>
        .content-wrapper {
            width: 35%;
            margin: 5% auto;
            min-width: 250px;
        }

        .ador-textbox .row {
            margin: 7% 0;
        }

        .e-float-input span:not([class]):not(.e-float-text):not(.e-input-separator):not(.e-delete-text) {
            line-height: 1;
            padding-right: 5px;
        }

        .material3 .e-eye-icon label.e-float-text,
        .material3-dark .e-eye-icon label.e-float-text {
            top: -3px !important;
        }

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

        .tailwind3 .ador-textbox .e-icon-textbox.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
        .tailwind3 .ador-textbox .e-prepend-textbox.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
        .tailwind3-dark .ador-textbox .e-icon-textbox.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
        .tailwind3-dark .ador-textbox .e-prepend-textbox.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
            top: 50% !important;
        }

        .e-bigger.material3 .ador-textbox .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 .ador-textbox .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
            top: -5px !important;
        }

        .e-bigger.fluent2 .ador-textbox .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 .ador-textbox .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 .ador-textbox .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
            top: -8px !important;
        }

        .ador-textbox .e-eye-icon .e-icons.e-eye,
        .ador-textbox .e-eye-icon .e-icons.e-eye-slash,
        .ador-textbox .e-icon-textbox .e-icons.e-trash {
            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%;
}