From 57ffe0617cfa880d7ffd0274389674c6a2919204 Mon Sep 17 00:00:00 2001 From: ponselvajeganathan <68591831+ponselvajeganathan@users.noreply.github.com> Date: Fri, 12 Jun 2026 18:52:10 +0530 Subject: [PATCH 1/2] 1031413: Updated Checkbox playground sample --- blazor/check-box/getting-started-with-server-app.md | 2 +- blazor/check-box/getting-started-with-web-app.md | 2 +- blazor/check-box/getting-started.md | 2 +- blazor/check-box/how-to/checkbox-model-binding.md | 2 +- blazor/check-box/how-to/customized-checkbox.md | 8 ++++---- blazor/check-box/label-and-size.md | 4 ++-- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/blazor/check-box/getting-started-with-server-app.md b/blazor/check-box/getting-started-with-server-app.md index be8a4d3b16..a4ab45e6b1 100644 --- a/blazor/check-box/getting-started-with-server-app.md +++ b/blazor/check-box/getting-started-with-server-app.md @@ -175,7 +175,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati * Press Ctrl+F5 (Windows) or ⌘+F5 (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). diff --git a/blazor/check-box/getting-started-with-web-app.md b/blazor/check-box/getting-started-with-web-app.md index 09f8f2665d..d84480b7bc 100644 --- a/blazor/check-box/getting-started-with-web-app.md +++ b/blazor/check-box/getting-started-with-web-app.md @@ -183,7 +183,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (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. diff --git a/blazor/check-box/getting-started.md b/blazor/check-box/getting-started.md index b584240205..627360ce84 100644 --- a/blazor/check-box/getting-started.md +++ b/blazor/check-box/getting-started.md @@ -164,7 +164,7 @@ Add the Blazor CheckBox component in the **~/Pages/Index.razor** file. * Press Ctrl+F5 (Windows) or ⌘+F5 (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). diff --git a/blazor/check-box/how-to/checkbox-model-binding.md b/blazor/check-box/how-to/checkbox-model-binding.md index 0553444d0a..7f849fae31 100644 --- a/blazor/check-box/how-to/checkbox-model-binding.md +++ b/blazor/check-box/how-to/checkbox-model-binding.md @@ -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)" %} \ No newline at end of file +{% 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)" %} \ No newline at end of file diff --git a/blazor/check-box/how-to/customized-checkbox.md b/blazor/check-box/how-to/customized-checkbox.md index e857db2ccd..8cd5ecde34 100644 --- a/blazor/check-box/how-to/customized-checkbox.md +++ b/blazor/check-box/how-to/customized-checkbox.md @@ -76,7 +76,7 @@ The background and border color of the Checkbox is customized through the custom ``` -{% 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 @@ -117,7 +117,7 @@ The following section explains about how to customize the height and width of th ``` -{% 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 @@ -174,7 +174,7 @@ In the following example, to-do list is displayed with round checkbox by changin ``` -{% 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 @@ -222,4 +222,4 @@ In the following example, the check icon can be customized by changing check ico ``` -{% 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)" %} \ No newline at end of file +{% 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)" %} \ No newline at end of file diff --git a/blazor/check-box/label-and-size.md b/blazor/check-box/label-and-size.md index ac0a2906b6..d33c479391 100644 --- a/blazor/check-box/label-and-size.md +++ b/blazor/check-box/label-and-size.md @@ -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 @@ -51,7 +51,7 @@ The different Checkbox sizes available are default and small. To reduce the size ``` -{% 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 From 4aca45497e3560545b90a41409f5f12bfb0ba98c Mon Sep 17 00:00:00 2001 From: ponselvajeganathan <68591831+ponselvajeganathan@users.noreply.github.com> Date: Fri, 12 Jun 2026 18:59:10 +0530 Subject: [PATCH 2/2] Update right-to-left.md --- blazor/check-box/how-to/right-to-left.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/check-box/how-to/right-to-left.md b/blazor/check-box/how-to/right-to-left.md index d3c26f0f4f..06c2a26532 100644 --- a/blazor/check-box/how-to/right-to-left.md +++ b/blazor/check-box/how-to/right-to-left.md @@ -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)" %} \ No newline at end of file +{% 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)" %} \ No newline at end of file