Groups
21 Dec 202219 minutes to read
The following section explains you the steps required to create TextBox with icon
and floating label
.
TextBox:
-
Create a parent div element with the class
e-input-group
-
Place input element with the class
e-input
inside the parent div element.
<div class="e-input-group">
<input class="e-input" name='input' type="text" placeholder="Enter Date"/>
</div>
Floating label:
-
Add the
e-float-input
class to the parent div element. -
Remove the e-input class and add
required
attribute to the input element. -
Place the span element with class
e-float-line
after the input element. -
Place the label element with class
e-float-text
after the above created span element. When you focus or filled with value in the TextBox, the label floats above the TextBox.
NOTE
Creating the Floating label TextBox, you have to set the
required
attribute to the Input element to achieve the floating label functionality which is used for validating the value existence in TextBox. If you want to render the Floating label TextBox withoutrequired
attribute then refer to the Floating label without required attribute section.
<div class="e-float-input e-input-group">
<input type="text" required/>
<span class="e-float-line"></span>
<label class="e-float-text">Enter Name </label>
</div>
And refer to the following sections to add the icons to the TextBox.
With icon and floating label
Create an icon element as a span with the class e-input-group-icon
, and the user can place the icon in either side of TextBox by adding the created icon element before/after the input.
For the floating label enabled TextBox add the icon element as first or last element inside the TextBox wrapper,and based on the element position it will act as prefix or suffix icon.
<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.
<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.
Floating label without required attribute
You can render the Floating label TextBox
without required
attribute by manually float the label above of the TextBox using input events. You can manually float the label above of the TextBox by adding the below list of classes to the floating label element. The classes are:
Class Name | Description |
---|---|
e-label-top | Floats the label above of the TextBox. |
e-label-bottom | Label to be placed as placeholder for the TextBox. |
<div class="control-section">
<div class="control_wrapper accordion-control-section">
<div class="e-float-input">
<input type="text" id='inpt1' />
<span class="e-float-line"></span>
<label class="e-float-text"> Enter Value </label>
</div>
</div>
</div>
<script>
ej.base.enableRipple(true);
/* To get the Input element */
var inputElement = document.getElementById('inpt1');
/* Update the label position based on Input value */
updateLabelState(inputElement.value, inputElement.parentElement.querySelector('.e-float-text'));
inputElement.addEventListener("focus", function () {
var label = this.parentElement.querySelector('.e-float-text');
label.classList.add('e-label-bottom');
label.classList.remove('e-label-top');
});
inputElement.addEventListener("blur", function () {
updateLabelState(this.value, this.parentElement.querySelector('.e-float-text'));
});
inputElement.addEventListener("input", function () {
updateLabelState(this.value, this.parentElement.querySelector('.e-float-text'));
});
/* Update the label position based on Input value */
/* e-label-top - Floats the label above of the TextBox */
/* e-label-bottom - Label to be placed as placeholder for the TextBox */
function updateLabelState(value, label) {
if (value) {
label.classList.add('e-label-top');
label.classList.remove('e-label-bottom');
} else {
label.classList.add('e-label-bottom');
label.classList.remove('e-label-top');
}
}
</script>
<style>
.control-section {
box-sizing: border-box;
margin: 0 auto;
padding: 20px 10px;
width: 260px;
}
</style>
public ActionResult Index()
{
return View();
}
Multi-line input with floating label
Add the HTMLtextarea
element with the e-input
class to create default multi-line input.
Add the floating label support to the multi-line input
by creating the floating label structure as defined in the initial section.
<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();
}