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.
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.