Skip to content

1031413: Updated Checkbox playground sample #9058

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kmkrish001 merged 3 commits into from
Jun 13, 2026
Merged

1031413: Updated Checkbox playground sample #9058

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
57ffe06
1031413: Updated Checkbox playground sample
ponselvajeganathan Jun 12, 2026
4aca454
Update right-to-left.md
ponselvajeganathan Jun 12, 2026
f41b858
Merge branch 'development' into 1031413-checkbox
kmkrish001 Jun 13, 2026
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
2 changes: 1 addition & 1 deletion blazor/check-box/getting-started-with-server-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati

* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the 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.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BthHtdMhJwnQDxaK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor CheckBox Component](./images/blazor-checkbox-component.webp)" %}

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

Expand Down
2 changes: 1 addition & 1 deletion blazor/check-box/getting-started-with-web-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem

* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the 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.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BthHtdMhJwnQDxaK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor CheckBox Component](./images/blazor-checkbox-component.webp)" %}

N> You can also explore our [Blazor CheckBox example](https://blazor.syncfusion.com/demos/buttons/checkbox) that shows how to render and configure the CheckBox.

Expand Down
2 changes: 1 addition & 1 deletion blazor/check-box/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ Add the Blazor CheckBox component in the **~/Pages/Index.razor** file.

* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the 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.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BthHtdMhJwnQDxaK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor CheckBox Component](./images/blazor-checkbox-component.webp)" %}

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

Expand Down
2 changes: 1 addition & 1 deletion blazor/check-box/how-to/checkbox-model-binding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,4 @@ In this sample, first check the option and click the submit button to post the s
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhKMVrmrJkahhmZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Model Binding in Blazor CheckBox](./../images/blazor-checkbox-model-binding.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVdXRsVpQbAcIhc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Model Binding in Blazor CheckBox](./../images/blazor-checkbox-model-binding.webp)" %}
8 changes: 4 additions & 4 deletions blazor/check-box/how-to/customized-checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ The background and border color of the Checkbox is customized through the custom
</style>

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVKshBQrJbnEQzO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Appearance of Blazor CheckBox](./../images/blazor-checkbox-appearance-customization.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrxDxsLTmlcOrWK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Appearance of Blazor CheckBox](./../images/blazor-checkbox-appearance-customization.webp)" %}

## Customize width and height

Expand Down Expand Up @@ -117,7 +117,7 @@ The following section explains about how to customize the height and width of th
</style>

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrUWLLGVTFECslm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Height and Width of Blazor CheckBox](./../images/blazor-checkbox-height-width-customization.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBdXHihzcYqlUHM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Height and Width of Blazor CheckBox](./../images/blazor-checkbox-height-width-customization.webp)" %}

## Custom frame

Expand Down Expand Up @@ -174,7 +174,7 @@ In the following example, to-do list is displayed with round checkbox by changin
</style>

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrgirhGhJYCyqDJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor CheckBox Frame](./../images/blazor-checkbox-frame-customization.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLnDdiBfwYQoIhg?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Blazor CheckBox Frame](./../images/blazor-checkbox-frame-customization.webp)" %}

## Custom check icon

Expand Down Expand Up @@ -222,4 +222,4 @@ In the following example, the check icon can be customized by changing check ico
</style>

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBgWrLGrpkSQSUL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Check Icon in Blazor CheckBox](./../images/blazor-checkbox-check-icon-customization.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLdNHiVfPZWfgUM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Check Icon in Blazor CheckBox](./../images/blazor-checkbox-check-icon-customization.webp)" %}
2 changes: 1 addition & 1 deletion blazor/check-box/how-to/right-to-left.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,4 @@ The following example illustrates how to enable right-to-left support in Checkbo
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/htVgiLhmVyZvKJzz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Right to Left in Blazor CheckBox](./../images/blazor-checkbox-right-to-left.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLxNHiBzFespSRK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Right to Left in Blazor CheckBox](./../images/blazor-checkbox-right-to-left.webp)" %}
4 changes: 2 additions & 2 deletions blazor/check-box/label-and-size.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ The [Blazor Checkbox](https://www.syncfusion.com/blazor-components/blazor-checkb
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLgMVBmLTwBGRID?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CheckBox with Label](./images/blazor-checkbox-label.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVdDnWhzcQfvKjv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor CheckBox with Label](./images/blazor-checkbox-label.webp)" %}

## Size

Expand All @@ -51,7 +51,7 @@ The different Checkbox sizes available are default and small. To reduce the size
</style>

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLAiVVQVzGyDwWz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor CheckBox Size](./images/blazor-checkbox-size.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhnjRWBpGmcAUIU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor CheckBox Size](./images/blazor-checkbox-size.webp)" %}

## See also

Expand Down