Example of Default Functionalities in Blazor TextBox Component
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.
TextBoxes are the input elements that allow 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.
- Filled text fields
- Outlined text fields
Floating Label :
The floating label textbox floats the label above the textbox after focusing or filling with value in the textbox. You can create the floating label textbox by using the FloatLabelType API.
- Never - The placeholder text should never float.
- Always - The placeholder text floats above the textbox always.
- Auto - The placeholder text floats above the textbox while focusing or entering a value in the textbox.
Floating Label & Elements :
You can render the floating textbox with icons by adding the icon using the AddIconAsync method.
RTL TextBox :
You can render the textbox in right to left direction by enabling the EnableRtl API.
Disabled TextBox :
You can render the textbox with disabled state using Enabled API.
Readonly TextBox :
You can render the readonly textbox by enabling Readonly API.
Validation states :
You can apply the validation styles to the textbox by adding e-success, e-warning, e-error class to the CssClass API.
Sizing :
You can render the textbox in a small size by adding e-small class to the CssClass API. Also, you can set the custom width to the textbox by using Width API.
Input & elements :
You can append or prepend the icons to the textbox using the AddIconAsync method.
See also