This example demonstrates the default functionalities of the
TextBox component. 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.
|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.
|Floating Label||You can render floating textbox with e-float-input class added and need to maintain the following structure
|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.
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.
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.
You set html disabled attribute to textbox. For parent group element , you can disable it by adding e-disabled class.
You set html readonly attribute to textbox.
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.
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,