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.
| 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.
|
| Floating Label | You can render floating textbox with e-float-input class added and need to maintain the following structure of elements.
|
| 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.
|
| 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,
|