Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
abda375
Revamping the Ug
RamyaSubramaniSF4537 Sep 22, 2025
62eab81
Merge branch 'development' into ES-983512-UG
RamyaSubramaniSF4537 Sep 24, 2025
f12e33f
Revamping the Ug
RamyaSubramaniSF4537 Sep 24, 2025
6827e09
Revamping the Ug
RamyaSubramaniSF4537 Sep 24, 2025
2c330d5
Revamping the Ug
RamyaSubramaniSF4537 Sep 24, 2025
b0a9101
Revamping the Ug
RamyaSubramaniSF4537 Sep 24, 2025
3b82550
Merge branch 'development' into ES-983512-UG
RamyaSubramaniSF4537 Sep 24, 2025
f9333a0
Revamping the Ug
RamyaSubramaniSF4537 Sep 25, 2025
542cbc0
Revamping the Ug using AI.
RamyaSubramaniSF4537 Sep 25, 2025
8f3c424
Revamping the Ug using AI.
RamyaSubramaniSF4537 Sep 25, 2025
d517707
Revamping the Ug
RamyaSubramaniSF4537 Oct 6, 2025
d1f4524
Revamping the Ug
RamyaSubramaniSF4537 Oct 6, 2025
660d569
Revamping the Ug
RamyaSubramaniSF4537 Oct 8, 2025
d6d1c2a
983104: Updated the UG Documentation for the Toast and TextBox
Ashwini-SF5049 Oct 9, 2025
039b218
983104: Updated
Ashwini-SF5049 Oct 9, 2025
a47e37e
983104: Updated
Ashwini-SF5049 Oct 9, 2025
695dac6
983104: Updated
Ashwini-SF5049 Oct 10, 2025
ae1a11f
Merge branch 'development' into BLAZ-983104-doc-text
Ashwini-SF5049 Oct 10, 2025
ac989bb
Merge branch 'development' into ES-983512-UG
RamyaSubramaniSF4537 Oct 10, 2025
c7b0fba
983104: Updated the UG Documentation for the Autocomple,button,button…
Ashwini-SF5049 Oct 10, 2025
94f5afd
983104: Updated
Ashwini-SF5049 Oct 10, 2025
df2063b
983104: Updated the UG Documentation for Skeleton,spinner,button,butt…
Ashwini-SF5049 Oct 10, 2025
3c050fc
983104: Updated the UG Documentation for Tooltip
Ashwini-SF5049 Oct 10, 2025
50f61fa
Revamping the Ug
RamyaSubramaniSF4537 Oct 10, 2025
b894122
983104: Updated
Ashwini-SF5049 Oct 10, 2025
96c78fe
983104: Updated
Ashwini-SF5049 Oct 10, 2025
267b46e
983104: Updated the UG Documentation for Toggle-switch-button
Ashwini-SF5049 Oct 10, 2025
d61302d
Revamping the Ug
RamyaSubramaniSF4537 Oct 10, 2025
10f3dd8
983104: Updated the UG Documentation for Timepicker
Ashwini-SF5049 Oct 10, 2025
cd2c9be
Revamping the Ug
RamyaSubramaniSF4537 Oct 10, 2025
43b255f
Revamping the Ug
RamyaSubramaniSF4537 Oct 10, 2025
abb52b5
Revamping the Ug
RamyaSubramaniSF4537 Oct 10, 2025
3395786
Revamping the Ug
SuganthiK963 Oct 11, 2025
43c89f3
Merge pull request #6875 from syncfusion-content/BLAZ-983104-ugskeleton
UdhayaKumarDuraisamy Oct 13, 2025
b059d6e
Merge pull request #6872 from syncfusion-content/BLAZ-983104-ugdocsign
UdhayaKumarDuraisamy Oct 13, 2025
666bb83
Merge pull request #6884 from syncfusion-content/BLAZ-983104-ugtimepi…
UdhayaKumarDuraisamy Oct 13, 2025
8d12160
Merge pull request #6860 from syncfusion-content/BLAZ-983104-doc-text
UdhayaKumarDuraisamy Oct 13, 2025
245a8f0
Revamping the Ug
RamyaSubramaniSF4537 Oct 13, 2025
92d31ac
Merge pull request #6658 from syncfusion-content/ES-983512-UG
SuganthiK963 Oct 13, 2025
1200351
Merge remote-tracking branch 'remotes/origin/development'
PriyankaKarthikeyan1408 Oct 14, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 27 additions & 28 deletions blazor/check-box/getting-started-with-web-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Getting Started with Blazor CheckBox Component in Web App

This section briefly explains about how to include [Blazor CheckBox](https://www.syncfusion.com/blazor-components/blazor-checkbox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
This section explains how to include the [Blazor CheckBox](https://www.syncfusion.com/blazor-components/blazor-checkbox) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.

{% tabcontents %}

Expand All @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor CheckBox](https://www

## Create a new Blazor Web App in Visual Studio

You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).

You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the Blazor Web App

To add **Blazor CheckBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
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](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).

If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the Client project.

Alternatively, you can utilize the following package manager command to achieve the same.
Alternatively, use the following Package Manager commands:

{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
Expand All @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
{% endhighlight %}
{% endtabs %}

N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list and component details.

{% endtabcontent %}

Expand All @@ -54,9 +54,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa

## Create a new Blazor Web App in Visual Studio Code

You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).

You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.

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

Expand All @@ -70,15 +70,15 @@ cd BlazorWebApp.Client
{% endhighlight %}
{% endtabs %}

N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
N> For details on creating a **Blazor Web App** with various interactive modes and locations, refer to [Render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App

If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the Client project.

* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> 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.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
* Ensure the terminal is in the project directory containing the `.csproj` file.
* Run the following commands to install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).

{% tabs %}

Expand All @@ -92,7 +92,7 @@ dotnet restore

{% endtabs %}

N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list and component details.

{% endtabcontent %}

Expand All @@ -102,10 +102,10 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa

| Interactive Render Mode | Description |
| -- | -- |
| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
| 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` namespace.
Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.

{% tabs %}
{% highlight C# tabtitle="~/_Imports.razor" %}
Expand All @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace.
{% endhighlight %}
{% endtabs %}

Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor Web App.

If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your 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.

{% tabs %}
{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
Expand Down Expand Up @@ -152,7 +152,7 @@ await builder.Build().RunAsync();
{% endhighlight %}
{% endtabs %}

If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
If the **Interactive Render Mode** is `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service only in that **~/Program.cs** file.

{% tabs %}
{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
Expand All @@ -175,7 +175,7 @@ var app = builder.Build();

## Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#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:
The theme stylesheet and script are provided via NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#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:

```html
<head>
Expand All @@ -189,11 +189,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
</body>
```

N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
N> Refer to [Blazor themes](https://blazor.syncfusion.com/documentation/appearance/themes) for Static Web Assets, CDN, and CRG options. See [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) for script reference approaches.

## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CheckBox component

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CheckBox component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
Add the Syncfusion<sup style="font-size:70%">&reg;</sup> 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 |
| --- | --- | --- |
Expand All @@ -202,7 +202,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CheckBox compone
| | Server | @rendermode InteractiveServer |
| | None | --- |

N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
N> 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.

{% tabs %}
{% highlight razor %}
Expand All @@ -226,15 +226,14 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
{% endhighlight %}
{% endtabs %}

* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CheckBox component in your default web browser.
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CheckBox component in the default web browser.

{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhpNsLuinxRTsQp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CheckBox Component](./images/blazor-checkbox-component.png)" %}

N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/CheckBox).
N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/CheckBox).

## See also

1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
3. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)

3. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
Loading