983104: Updated the UG Documentation for RadioButton

Author: Ashwini-SF5049

blazor/radio-button/accessibility.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Accessibility in Blazor RadioButton component
 
-The Blazor RadioButton component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor RadioButton component follows established accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It also adheres to applicable [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) used to evaluate accessibility.
 
 The accessibility compliance for the Blazor RadioButton component is outlined below.
 
@@ -46,16 +46,16 @@ The Blazor RadioButton component followed the [WAI-ARIA](https://www.w3.org/WAI/
 
 ## Keyboard interaction
 
-The Blazor RadioButton component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/radio/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor RadioButton component.
+The Blazor RadioButton component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/radio/#keyboardinteraction) guideline, supporting users of assistive technologies and keyboard-only navigation. The following keyboard shortcuts are supported:
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
-| <kbd>↑</kbd> or <kbd>←</kbd> | <kbd>↑</kbd> or <kbd>←</kbd> | Move and select the previous options. |
-| <kbd>↓</kbd> or <kbd>→</kbd> | <kbd>↓</kbd> or <kbd>→</kbd> | Move and select the next options. |
+| <kbd>↑</kbd> or <kbd>←</kbd> | <kbd>↑</kbd> or <kbd>←</kbd> | Move focus to and select the previous option. |
+| <kbd>↓</kbd> or <kbd>→</kbd> | <kbd>↓</kbd> or <kbd>→</kbd> | Move focus to and select the next option. |
 
 ## Ensuring accessibility
 
-The Blazor RadioButton component component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Blazor RadioButton component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
 
 The accessibility compliance of the Blazor RadioButton component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/radio-button) in a new window to evaluate the accessibility of the Blazor RadioButton component with accessibility tools.
 

blazor/radio-button/getting-started-webapp.md

@@ -11,9 +11,9 @@ documentation: ug
 
 # Getting Started with Blazor RadioButton Component
 
-This section briefly explains about how to include [Blazor RadioButton](https://www.syncfusion.com/blazor-components/blazor-radio-button) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to include the [Blazor RadioButton](https://www.syncfusion.com/blazor-components/blazor-radio-button) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
-To get start quickly with Radio Button Component using Blazor, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RadioButton) sample.
+To get started quickly with the RadioButton component in Blazor, watch the following video or explore the RadioButton getting-started sample on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RadioButton).
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=a6HR1QGAvLo"%}
@@ -28,11 +28,11 @@ To get start quickly with Radio Button Component using Blazor, you can check on
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.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 WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.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).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
-To add **Blazor RadioButton** 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/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor RadioButton** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), 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/). Alternatively, run the following Package Manager commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -43,7 +43,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.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -55,9 +55,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.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 WebAssembly 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).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following command in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -73,8 +73,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
 * 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 you are in the project root directory where the `.csproj` file is located.
+* 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/), and restore packages.
 
 {% tabs %}
 
@@ -88,15 +88,15 @@ 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.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
 {% endtabcontents %}
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -107,7 +107,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in **~/Program.cs** of the Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -131,7 +131,7 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet
 
-The theme stylesheet 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 of the **~/index.html** file.
+The theme stylesheet is provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section of **~/index.html**.
 
 ```html
 <head>
@@ -140,11 +140,11 @@ The theme stylesheet can be accessed from NuGet through [Static Web Assets](http
 
 </head>
 ```
-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.
+N> Review [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for options to reference themes ([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)). Ensure the theme stylesheet is loaded before any custom styles.
 
 ## Add Blazor RadioButton component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton component in **~/Pages/Index.razor**.
 
 {% tabs %}
 {% highlight razor %}
@@ -159,7 +159,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton comp
 {% 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 RadioButton 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 RadioButton component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VZBptsKNKsShQnkV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor RadioButton Component](./images/blazor-radiobutton-component.png)" %} 
 
@@ -169,4 +169,4 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton comp
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
 * [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)
 
-N> You can also explore our [Blazor Radio Button Example](https://blazor.syncfusion.com/demos/buttons/radio-button) that shows you how to render and configure the Radio Button.
+N> Explore the [Blazor Radio Button example](https://blazor.syncfusion.com/demos/buttons/radio-button) that demonstrates rendering and configuration of the Radio Button.

blazor/radio-button/getting-started.md

@@ -9,9 +9,9 @@ documentation: ug
 
 # Customize Blazor RadioButton Appearance
 
-The appearance of the Radio Button component can be customized by using the CSS rules. Define own CSS rules according to your requirement and assign the class name to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_CssClass) property.
+Customize the appearance of the RadioButton component by applying custom CSS rules and assigning a CSS class to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_CssClass) property.
 
-The background and border color of the Radio Button is customized through the custom classes to create the primary, success, info, warning, and danger type of Radio Button.
+The background and border color of the radio button can be customized using custom classes to create primary, success, info, warning, and danger variants.
 
 ```cshtml
 @using Syncfusion.Blazor.Buttons

blazor/radio-button/how-to/customize-radiobutton-appearance.md

@@ -9,14 +9,14 @@ documentation: ug
 
 # Radio Button Model Binding in Blazor RadioButton Component
 
-To get start quickly with Model Binding in Blazor RadioButton Component, you can check on this video:
+To get started quickly with model binding in the Blazor RadioButton component, watch the following video:
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=4vMuReo0Hz4"%}
 
-This section demonstrates the strongly typed extension support in Radio Button. The view that can bind with any model is called as strongly typed view. You can bind any class as model to view. You can access model properties on that view. You can use data associated with model to render the component.
+This section demonstrates strongly typed view support with the RadioButton component. A strongly typed view binds to a model class, allowing access to its properties and rendering the component based on that data. In this example, the component is placed inside an EditForm and uses DataAnnotationsValidator for validation. The Name property groups the radio buttons so only one option can be selected, and @bind-Checked binds the model property to the selected Value.
 
-In this sample, first check the male value and click the submit button to post the selected value in the Radio Button. When female value is checked, validation error message will be shown below the Radio Button.
+In this sample, selecting Female triggers a validation error message below the radio button group because the Range attribute is configured to allow only the value "male". This demonstrates how validation rules on the model control the allowed selection and display validation feedback.
 
 ```cshtml
 

blazor/radio-button/how-to/radio-button-model-binding.md

@@ -9,9 +9,9 @@ documentation: ug
 
 # Right-To-Left in Blazor RadioButton Component
 
-Radio Button component has RTL support. This can be achieved by setting [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_EnableRtl) as `true`.
+The RadioButton component supports right-to-left (RTL) layout, Enable RTL by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_EnableRtl) as `true`.
 
-The following example illustrates how to enable right-to-left support in Radio Button component.
+The following example illustrates enabling right-to-left support in the RadioButton component. RTL can also be configured globally for all Syncfusion components during service registration.
 
 ```cshtml
 @using Syncfusion.Blazor.Buttons
@@ -24,4 +24,4 @@ The following example illustrates how to enable right-to-left support in Radio B
 
 ```
 
-![RIght to Left in Blazor RadioButton](./../images/blazor-radiobutton-right-to-left.png)
+![Right to left in Blazor RadioButton](./../images/blazor-radiobutton-right-to-left.png)

blazor/radio-button/how-to/right-to-left.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Set the disabled state in Blazor RadioButton Component
 
-Radio Button component can be enabled/disabled by giving [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_Disabled) property. To disable Radio Button component, the `Disabled` property can be set as `true`.
+The RadioButton component can be enabled/disabled by setting [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_Disabled) property. To disable Radio Button component, the `Disabled` property can be set as `true`.
 
 ```cshtml
 @using Syncfusion.Blazor.Buttons
@@ -24,4 +24,4 @@ Radio Button component can be enabled/disabled by giving [Disabled](https://help
 
 ```
 
-![Blazor RadioButton in Disable State](./../images/blazor-radiobutton-disable-state.png)
+![Blazor RadioButton in disabled state](./../images/blazor-radiobutton-disable-state.png)