• Material
  • Fabric
  • Bootstrap
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse

Chart

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

DEMO
SOURCE
Floating Label
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
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.