Blazor Radio Button - A Custom Component with Option Button

Overview

The Blazor Radio Button is a custom radio-type HTML5 input component for selecting one option from a list of predefined choices. It supports different states, sizes, labels, label positions, and UI customizations.

Radio Button group

The Blazor Radio Button is used to select a single option from the logically grouped options set.

Themes

The Blazor Radio Button supports several built-in themes such as Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application.

• Theme Studio application

Web Accessibility

• Fully supports WAI-ARIA accessibility to work with screen readers and assistive devices.
• Follows WAI-ARIA best practices for implementing keyboard interaction.
• Based on WCAG 2.0 standards, the UI element visuals such as foreground color, background color, line spacing, text, and images are designed.
• Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.

Blazor Radio Button Code Example

Easily get started with the Blazor Radio Button using a few simple lines of C# code example as demonstrated below. Also explore our Blazor Radio Button Example that shows you how to render and configure the Radio Button in Blazor.

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

<SfRadioButton Label="Option 1" Name="options" Value="card" @bind-Checked="stringChecked"></SfRadioButton>
<SfRadioButton Label="Option 2" Name="options" Value="cash" @bind-Checked="stringChecked"></SfRadioButton>

@code {
    private string stringChecked = "cash";
}