Getting Started with Blazor TextArea in Blazor Web App

31 Oct 20257 minutes to read

This section explains how to include the Blazor TextArea component in a Blazor Web App using Visual Studio or Visual Studio Code.

To get started quickly with the Blazor TextArea component, watch the following video:

Prerequisites

Create a new Blazor Web App in Visual Studio

Create a Blazor Web App using Visual Studio 2022 via Microsoft templates or the Syncfusion® Blazor extension.

Configure the appropriate interactive render mode and interactivity location when creating the Blazor Web App.

Install Syncfusion® Blazor Inputs and Themes NuGet in the App

To add the Blazor TextArea component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install Syncfusion.Blazor.Inputs and Syncfusion.Blazor.Themes.

If using the WebAssembly or Auto render mode, install the Syncfusion® Blazor component NuGet packages in the client project.

Alternatively, you can use the following Package Manager commands:

Install-Package Syncfusion.Blazor.Inputs -Version 31.2.2
Install-Package Syncfusion.Blazor.Themes -Version 31.2.2

NOTE

Syncfusion® Blazor components are available on nuget.org. Refer to the NuGet packages topic for the list of available packages and component details.

Prerequisites

Create a new Blazor Web App in Visual Studio Code

Create a Blazor Web App using Visual Studio Code via Microsoft templates or the Syncfusion® Blazor extension.

Configure the appropriate interactive render mode and interactivity location when creating the Blazor Web App.

For example, in a Blazor Web App with the Auto interactive render mode, use the following commands:

dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.Client

NOTE

For more information on creating a Blazor Web App with various interactive modes and locations, refer to this guide: Getting started with Blazor Web App - render interactive modes.

Install Syncfusion® Blazor Inputs and Themes NuGet in the App

If using the WebAssembly or Auto render mode, install the Syncfusion® Blazor component NuGet packages in the client project.

  • Press Ctrl+` to open the integrated terminal in Visual Studio Code.
  • Ensure you’re in the project root directory where your .csproj file is located.
  • Run the following command to install a Syncfusion.Blazor.Inputs and Syncfusion.Blazor.Themes NuGet package and ensure all dependencies are installed.
dotnet add package Syncfusion.Blazor.Inputs -v 31.2.2
dotnet add package Syncfusion.Blazor.Themes -v 31.2.2
dotnet restore

NOTE

Syncfusion® Blazor components are available on nuget.org. Refer to the NuGet packages topic for the list of available packages and component details.

Register Syncfusion® Blazor Service

Interactive Render Mode Description
WebAssembly or Auto Open ~/_Imports.razor from the client project.
Server Open ~/_Imports.razor in the Components folder.

Import the Syncfusion.Blazor and Syncfusion.Blazor.Inputs namespaces.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Inputs

Now, register the Syncfusion® Blazor service in the ~/Program.cs file of your Blazor Web App.

If the interactive render mode is WebAssembly or Auto, register the Syncfusion® Blazor service in both ~/Program.cs files (Server and Client) of your Blazor Web App.

...
...
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();
....
...
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddSyncfusionBlazor();

await builder.Build().RunAsync();

If the interactive render mode is Server, the project contains a single ~/Program.cs file. In this case, register the Syncfusion® Blazor service only in that file.

...
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();
....

Add stylesheet and script resources

Theme stylesheets and scripts are provided via Static Web Assets. Include the stylesheet reference in the <head> section and the script reference at the end of the <body> in the ~/Components/App.razor file as shown below:

<head>
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

<body>
    ....
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

NOTE

Learn more in the Blazor themes topic, which covers Static Web Assets, CDN, and CRG. For script references, see Adding script reference.

Add Syncfusion® Blazor TextArea component

Add the Syncfusion® Blazor TextArea component in the ~Pages/.razor file. If the interactivity location is Per page/component, define a render mode at the top of the ~Pages/.razor component as follows:

Interactivity location RenderMode Code
Per page/component Auto @rendermode InteractiveAuto
  WebAssembly @rendermode InteractiveWebAssembly
  Server @rendermode InteractiveServer
  None —

NOTE

If the Interactivity location is set to Global and the Render mode is Auto, WebAssembly, or Server, the render mode is configured in the App.razor file by default.

@* desired render mode define here *@
@rendermode InteractiveAuto
<SfTextArea Placeholder='Add your Comments'></SfTextArea>
Blazor TextArea Component

Floating label

The floating label displays the placeholder as a label above the TextArea when focused or when a value is present. Configure this behavior using the FloatLabelType property.

<SfTextArea Placeholder='Add your Comments' FloatLabelType='@FloatLabelType.Auto'></SfTextArea>
Blazor TextArea with Floating Label

See Also