Getting Started with Blazor TextArea Component

31 Oct 20254 minutes to read

This guide explains how to add the Blazor TextArea component to a Blazor WebAssembly app using Visual Studio or Visual Studio Code.

Prerequisites

Create a new Blazor App in Visual Studio

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

Install Syncfusion® Blazor Inputs and Themes NuGet in the App

To add the Blazor TextArea component, open 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. Alternatively, 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 App in Visual Studio Code

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

Alternatively, create a WebAssembly application using the following commands in the integrated terminal (Ctrl+`).

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Install Syncfusion® Blazor Inputs and Themes NuGet in the App

  • Press Ctrl+` to open the integrated terminal in Visual Studio Code.
  • Ensure you are in the project root directory where the .csproj file is located.
  • Run the following commands to install Syncfusion.Blazor.Inputs and Syncfusion.Blazor.Themes and restore dependencies.
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

Open ~/_Imports.razor and 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 WebAssembly app.

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();
....

Add stylesheet and script resources

The theme stylesheet and script are available through Static Web Assets. Add the stylesheet and script references to the <head> section of the ~/index.html file.

<head>
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

NOTE

For additional options, see Blazor themes, which covers Static Web Assets, CDN, and CRG. For script references, see Adding script reference.

Add Blazor TextArea component

Add the Syncfusion® Blazor TextArea component in the ~/Pages/Index.razor file.

<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