ASP.NET Core Blazor [Preview]
Search results

Getting Started

This section briefly explains about how to include a simple TextBox in your ASP.NET Core Razor application. You can refer ASP.NET Core Razor Getting Started documentation page for introduction part of the system requirements and configure the common specifications.

Adding component package to the application

Open ~/_Imports.razor file and import the Syncfusion.EJ2.RazorComponents.Inputs packages.

@using Syncfusion.EJ2.RazorComponents
@using Syncfusion.EJ2.RazorComponents.Inputs

Adding TextBox component to the application

Now, add the Syncfusion Essential JS 2 TextBox component in any web page razor in the Pages folder. For example, the TextBox component is added in the ~/Pages/Index.razor page.

  <EjsTextBox id='firstname' placeholder='First Name'></EjsTextBox>

Run the application

After successful compilation of your application, simply press F5 to run the application.

Output be like the below.

TextBox Sample

Adding icons to the TextBox

You can create a TextBox with icon as a group by creating the parent div element with the class e-input-group and add the icon element as span with the class e-input-group-icon.

<div class='e-input-group'>
  <input class='e-input' placeholder='Date of Birth' type='text'>
  <span id='DOB' class='e-input-group-icon e-input-calendar'></span>

Output be like the below.

TextBox with icon

Floating label

The floating label TextBox floats the label above the TextBox after focusing, or filled with value in the TextBox. You can create the floating label TextBox by using the floatLabelType API.

<EjsTextBox id='firstname' placeholder='First Name' floatLabelType='@FloatLabelType.Auto'></EjsTextBox>