Blazor TextBox - Default Functionalities

This example demonstrates the default functionalities of the TextBox component. Type a character in the TextBox element or focus-in to the TextBox to float the label text. The label will return to its original position on focus-out if the TextBox is empty.

TextBoxes are input elements that allow users to edit or display input values. They provide a user-friendly interface for text entry.

TextBox Rendering Styles:

You can render two types of text fields in the material theme by adding e-outline and e-filled classes to the CssClass API:

• Filled text fields
• Outlined text fields

Floating Label Feature:

The floating label TextBox floats the label above the TextBox after focusing or filling with a value. Create floating label TextBox using the FloatLabelType API with options:

• Never - The placeholder text should never float.
• Always - The placeholder text floats above the TextBox continuously.
• Auto - The placeholder text floats above the TextBox while focusing or entering a value.

Floating Label with Elements:

You can render floating TextBox with icons by adding the icon using the AddIconAsync method.

RTL TextBox:

Render the TextBox in right-to-left direction by enabling the EnableRtl API.

Disabled TextBox:

Render the TextBox in disabled state using the Enabled API.

Read-only TextBox:

Render read-only TextBox by enabling the Readonly API.

Validation States:

Apply validation styles to the TextBox by adding e-success, e-warning, e-error classes to the CssClass API.

Sizing:

Render the TextBox in small size by adding the e-small class to the CssClass API. Set custom width using the Width API.

Input Elements:

Append or prepend icons to the TextBox using the AddIconAsync method.

See also

• Getting started with Blazor TextBox