Groups in ASP.NET Core TextBox component

24 Oct 202413 minutes to read

The following section explains you the steps required to create TextBox with icon and floating label.

Floating label:

To add the Floating label by using FloatLabelType property. Specifies the floating label behavior of the TextBox that the placeholder text floats above the TextBox based on the below values. Possible values are:

Never - The placeholder text should not be float ever.
Always - The placeholder text floats above the TextBox always.
Auto - The placeholder text floats above the TextBox while focusing or enter a value in TextBox.

      <ejs-textbox id="float-icon-textbox" placeholder="Enter Name" floatLabelType="Auto"></ejs-textbox>

And refer to the following sections to add the icons to the TextBox.

With icon and floating label

Create an icon in the TextBox using the addIcon method and enable the float label using the FloatLabelType property. The user can place the icon on either side of the TextBox by specifying “append” or “prepend” in the addIcon method.

CSHTML
Icon.cs
<div class="control-section">
    <div class="control_wrapper accordion-control-section">
        <h4> TextBox with icons </h4>
        <div class="e-input-group">
            <input class="e-input" type="text" placeholder="Enter Date" />
            <span class="e-input-group-icon e-input-popup-date"></span>
        </div>

        <div class="e-input-group e-float-icon-left">
            <span class="e-input-group-icon e-input-date"></span>
            <div class="e-input-in-wrap">
                <input class="e-input" type="text" placeholder="Enter Date" />
            </div>
        </div>

        <div class="e-input-group e-float-icon-left">
            <span class="e-input-group-icon e-input-date"></span>
            <div class="e-input-in-wrap">
                <input class="e-input" type="text" placeholder="Enter Date" />
                <span class="e-input-group-icon e-input-down"></span>
            </div>
        </div>

        <h4> Floating label with icons </h4>

        <div class="e-float-input e-input-group">
            <input required type="text" />
            <span class="e-float-line"></span>
            <label class="e-float-text"> Enter Date </label>
            <span class="e-input-group-icon e-input-popup-date"></span>
        </div>

        <div class="e-float-input e-input-group e-float-icon-left">
            <span class="e-input-group-icon e-input-date"></span>
            <div class="e-input-in-wrap">
                <input required type="text" />
                <span class="e-float-line"></span>
                <label class="e-float-text"> Enter Date </label>
            </div>
        </div>

        <div class="e-float-input e-input-group e-float-icon-left">
            <span class="e-input-group-icon e-input-date"></span>
            <div class="e-input-in-wrap">
                <input required type="text" />
                <span class="e-float-line"></span>
                <label class="e-float-text"> Enter Date </label>
                <span class="e-input-group-icon e-input-down"></span>
            </div>
        </div>
    </div>
</div>
<script>
    ej.base.enableRipple(true);
    var inputObject = {};
    var input = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');
    var inputIcon = document.querySelectorAll('.e-input-group-icon');
    var focusFn = function (index) {
        return function () {
            getParentNode(input[index]).classList.add('e-input-focus');
        };
    };
    var blurFn = function (index) {
        return function () { getParentNode(input[index]).classList.remove('e-input-focus'); };
    };
    var mouseupFn = function () {
        var ele = this; setTimeout(function () {
            ele.classList.remove('e-input-btn-ripple');
        }, 500);
    };
    for (var i = 0; i < input.length; i++) {
        input[i].addEventListener('focus', focusFn(i));
        input[i].addEventListener('blur', blurFn(i));
    }
    for (var j = 0; j < inputIcon.length; j++) {
        inputIcon[j].addEventListener('mousedown', function () {
            this.classList.add('e-input-btn-ripple');
        });
        inputIcon[j].addEventListener('mouseup', mouseupFn);
    }
    function getParentNode(element) {
        var parentNode = element.parentNode;
        if (parentNode.classList.contains('e-input-in-wrap')) {
            return parentNode.parentNode;
        }
        return parentNode;
    }
</script>
<style>
    .e-input-group-icon:before {
        font-family: e-icons;
    }

    .e-input-group .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
        font-size: 16px;
    }

    .e-input-group.e-small .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
        font-size: 14px;
    }

    .e-input-group-icon.e-input-popup-date:before { /* csslint allow: adjoining-classes */
        content: "";
    }
    .e-input-group-icon.e-input-down:before { /* csslint allow: adjoining-classes */
        content: "";
    }
    .e-input-group-icon.e-input-date:before { /* csslint allow: adjoining-classes */
        content: "";
    }
</style>
public ActionResult Index()
{
    return View();
}

Output be like the below.

With clear button and floating label

The clear button is added to the input for clearing the value given in the TextBox.
It is shown only when the input field has a value, otherwise not shown.

You can add the clear button to the TextBox by enabling showClearButton API.

CSHTML
Clear.cs
<div class="control-section">
    <div class="control_wrapper accordion-control-section">
        <h4> TextBox with clear button </h4>
        @Html.EJS().TextBox("firstname").Placeholder("First Name").ShowClearButton(true).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Never).Render()
        <h4> Floating TextBox with clear button </h4>
        @Html.EJS().TextBox("lastname").Placeholder("Last Name").ShowClearButton(true).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render()
    </div>
</div>
public ActionResult Index()
{
    return View();
}

Output be like the below.

textbox

Multi-line input with floating label

To create a multiline input using the multiline API, it will act as a TextArea component. You can also resize the rows.

CSHTML
Multiline.cs
<div class="control-section">
        <div class="control_wrapper accordion-control-section">
            <textarea class="e-input"> Address </textarea>
            <div class="e-float-input">
                <textarea required></textarea>
                <span class="e-float-line"></span>
                <label class="e-float-text"> Address </label>
            </div>
        </div>
    </div>
    <script>
        ej.base.enableRipple(true);

        // To get the all input fields and its container.

        var inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

        // Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

        for (var i = 0; i < inputElement.length; i++) {
            inputElement[i].addEventListener('focus', function () {
                var parentElement = this.parentNode;
                if (parentElement.classList.contains('e-input-in-wrap')) {
                    parentElement.parentNode.classList.add('e-input-focus');
                } else {
                    this.parentNode.classList.add('e-input-focus');
                }
            });
            inputElement[i].addEventListener('blur', function () {
                var parentElement = this.parentNode;
                if (parentElement.classList.contains('e-input-in-wrap')) {
                    parentElement.parentNode.classList.remove('e-input-focus');
                } else {
                    this.parentNode.classList.remove('e-input-focus');
                }
            });
        }

    </script>
public ActionResult Index()
{
    return View();
}

Groups in ASP.NET Core TextBox component

With icon and floating label

With clear button and floating label

Multi-line input with floating label

See Also