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