Example of Default Functionalities in ASP.NET Core TextBox Control

This example demonstrates the default functionalities of the TextBox control. Type a character in the TextBox element or focus-in to the TextBox for floating the label text. The label will be positioned back to TextBox on focus-out without value.

DEMO

SOURCE

Outlined and Filled

Floating Label

Country

Inputs

Validation States

Sizing

Input & Elements

A TextBoxes are an input element that allows to get input from the user. It allows the user either to edit or display the input values.

Types	Description
Outlined & Filled textbox	You can render the following two types of text fields in the material theme by adding e-outline and e-filled class to cssClass API. Filled text fields Outlined text fields
Floating Label	You can render floating textbox with e-float-input class added and need to maintain the following structure of elements. Create group element with e-float-input class added. Input element with required attribute. Span element with e-float-line class. Label element with e-float-text class.
Floating Label & Elements	You can render floating textbox with icons added with in group element e-input-group and need to maintain the following structure of elements. Create group element with e-float-input class added. Input element with required attribute. Span element with e-float-line class. Label element with e-float-text class. Append or prepend the span element with class e-input-group-icon added.
Default TextBox	You can render textbox by adding class as e-input.You can also render textbox as group by adding parent element with e-input-group class added.
RTL TextBox	Set e-input and e-rtl classes to render textbox in right to left direction. For rendering group in RTL mode , class list will be like e-input-group e-rtl.
Disabled TextBox	You set html disabled attribute to textbox. For parent group element , you can disable it by adding e-disabled class.
Readonly TextBox	You set html readonly attribute to textbox.
Validation states	You can apply validation states success, warning, error to the textbox with the corresponding classes added to the input element such as e-success, e-warning, e-error.
Sizing	You can render small sizing textbox by adding e-small class to the input element. By default normal size considered.
Input & elements	You can render textbox with icons in the below format, Create group element with e-input-group class added. Add input element with e-input and span element with e-input-group-icon inside the input group element. You can add the icon either before or after the textbox by placing e-input-group-icon class named element in specific place.