Getting Started with Blazor CheckBox Component in Web App

14 Oct 20257 minutes to read

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

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 corresponding Interactive render mode and Interactivity location while creating a Blazor Web Application.

Install Syncfusion® Blazor Buttons and Themes NuGet in the Blazor Web App

To add the Blazor CheckBox 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.Buttons and Syncfusion.Blazor.Themes.

If using WebAssembly or Auto render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the Client project.

Alternatively, use the following Package Manager commands:

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

NOTE

Syncfusion® Blazor components are available on NuGet. See the NuGet packages topic for the full list 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 corresponding Interactive render mode and Interactivity location while creating a Blazor Web Application.

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 details on creating a Blazor Web App with various interactive modes and locations, refer to Render interactive modes.

Install Syncfusion® Blazor Buttons and Themes NuGet in the App

If using WebAssembly or Auto render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the Client project.

dotnet add package Syncfusion.Blazor.Buttons -v 31.2.2
dotnet add package Syncfusion.Blazor.Themes -v 31.2.2
dotnet restore

NOTE

Syncfusion® Blazor components are available on NuGet. See the NuGet packages topic for the full list and component details.

Register Syncfusion® Blazor Service

Interactive Render Mode Description
WebAssembly or Auto Open Components/_Imports.razor from the Client project.
Server Open Components/_Imports.razor in the Server project (Components folder).

Import the Syncfusion.Blazor and Syncfusion.Blazor.Buttons namespaces.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Buttons

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

If the Interactive Render Mode is WebAssembly or Auto, register the service in both ~/Program.cs files (Server and Client) of the 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 ~/Program.cs 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

The theme stylesheet and script are provided via NuGet using Static Web Assets. Add the stylesheet reference in the <head> and the script reference at the end of the <body> in ~/Components/App.razor as shown:

<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

Refer to Blazor themes for Static Web Assets, CDN, and CRG options. See Adding script references for script reference approaches.

Add Syncfusion® Blazor CheckBox component

Add the Syncfusion® Blazor CheckBox component in a .razor file inside the Pages folder. If the interactivity location is Per page/component, define a render mode at the top of the 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 Global and the Render Mode is Auto, WebAssembly, or Server, the render mode is configured in App.razor by default.

@* desired render mode define here *@
@rendermode InteractiveAuto
<SfCheckBox Label="Default" @bind-Checked="isChecked"></SfCheckBox>

@code
{
    private bool isChecked = true;
}
  • Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor CheckBox component in the default web browser.
Blazor CheckBox Component

NOTE

View sample in GitHub.

See also

  1. Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI
  2. Getting Started with Syncfusion® Blazor for client-side in Visual Studio
  3. Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI