Customization in Blazor Radio Button
27 Aug 20267 minutes to read
To modify the Blazor Radio Button appearance, override the component’s default CSS. The following table lists common CSS selectors and their purposes within the Blazor Radio Button component.
| CSS Class | Purpose of Class |
|---|---|
.e-radio-wrapper |
To customize the radio button wrapper. |
.e-radio + label:hover::before |
To customize the Blazor Radio Button on hover. |
.e-radio:checked + label::after, .e-radio:checked + label::before
|
To customize the checked Blazor Radio Button. |
.e-radio:checked:focus + label::before, .e-radio:checked + label:hover::before
|
To customize the checked Blazor Radio Button on hover. |
Customize Blazor Radio Button Appearance
Customize the appearance of the Blazor Radio Button component by applying custom CSS rules and assigning a CSS class to the CssClass property.
The background and border color of the Blazor Radio Button can be customized using custom classes to create primary, success, info, warning, and danger variants.
@using Syncfusion.Blazor.Buttons
<SfRadioButton Label="Primary" Name="custom" CssClass="e-primary" Value="Primary" @bind-Checked="stringChecked"></SfRadioButton><br />
<SfRadioButton Label="Success" Name="custom" CssClass="e-success" Value="Success" @bind-Checked="stringChecked"></SfRadioButton><br />
<SfRadioButton Label="Info" Name="custom" CssClass="e-info" Value="Info" @bind-Checked="stringChecked"></SfRadioButton><br />
<SfRadioButton Label="Warning" Name="custom" CssClass="e-warning" Value="Warning" @bind-Checked="stringChecked"></SfRadioButton><br />
<SfRadioButton Label="Danger" Name="custom" CssClass="e-danger" Value="Danger" @bind-Checked="stringChecked"></SfRadioButton>
@code {
private string stringChecked = "Danger";
}
<style>
.e-radio-wrapper.e-success .e-radio:checked + label::after { /* csslint allow: adjoining-classes */
background-color: #689f38;
color: #689f38;
}
.e-radio-wrapper.e-success .e-radio:checked:focus + label::after,
.e-radio-wrapper.e-success .e-radio:checked + label:hover::after { /* csslint allow: adjoining-classes */
background-color: #449d44;
}
.e-radio-wrapper.e-success .e-radio:checked + ::before {
border-color: #689f38;
background-color: #fff;
}
.e-radio-wrapper.e-success .e-radio:checked:focus + ::before,
.e-radio-wrapper.e-success .e-radio:checked + label:hover::before { /* csslint allow: adjoining-classes */
border-color: #449d44;
}
.e-radio-wrapper.e-success .e-radio + label:hover::before {
border-color: #b1afaf;
}
.e-radio-wrapper.e-info .e-radio:checked + label::after { /* csslint allow: adjoining-classes */
background-color: #2196f3;
color: #2196f3;
}
.e-radio-wrapper.e-info .e-radio:checked:focus + label::after,
.e-radio-wrapper.e-info .e-radio:checked + label:hover::after { /* csslint allow: adjoining-classes */
background-color: #0b7dda;
}
.e-radio-wrapper.e-info .e-radio:checked + label::before {
border-color: #2196f3;
background-color: #fff;
}
.e-radio-wrapper.e-info .e-radio:checked:focus + label::before,
.e-radio-wrapper.e-info .e-radio:checked + label:hover::before {
border-color: #0b7dda;
}
.e-radio-wrapper.e-info .e-radio + label:hover::before {
border-color: #b1afaf;
}
.e-radio-wrapper.e-warning .e-radio:checked + label::after { /* csslint allow: adjoining-classes */
background-color: #ef6c00;
color: #ef6c00;
}
.e-radio-wrapper.e-warning .e-radio:checked:focus + label::after,
.e-radio-wrapper.e-warning .e-radio:checked + label:hover::after { /* csslint allow: adjoining-classes */
background-color: #cc5c00;
}
.e-radio-wrapper.e-warning .e-radio:checked + label::before {
border-color: #ef6c00;
background-color: #fff;
}
.e-radio-wrapper.e-warning .e-radio:checked:focus + label::before,
.e-radio-wrapper.e-warning .e-radio:checked + label:hover::before {
border-color: #cc5c00;
}
.e-radio-wrapper.e-warning .e-radio + label:hover::before {
border-color: #b1afaf;
}
.e-radio-wrapper.e-danger .e-radio:checked + label::after { /* csslint allow: adjoining-classes */
background-color: #d84315;
color: #d84315;
}
.e-radio-wrapper.e-danger .e-radio:checked:focus + label::after,
.e-radio-wrapper.e-danger .e-radio:checked + label:hover::after { /* csslint allow: adjoining-classes */
background-color: #ba330a;
}
.e-radio-wrapper.e-danger .e-radio:checked + label::before {
border-color: #d84315;
background-color: #fff;
}
.e-radio-wrapper.e-danger .e-radio:checked:focus + label::before,
.e-radio-wrapper.e-danger .e-radio:checked + label:hover::before {
border-color: #ba330a;
}
.e-radio-wrapper.e-danger .e-radio + label:hover::before {
border-color: #b1afaf
}
</style>
Set the Disabled State in Blazor Radio Button Component
Set the Disabled property to true to disable the Blazor Radio Button component. When disabled, the control is rendered with reduced opacity, is skipped during keyboard navigation, and cannot be selected.
@using Syncfusion.Blazor.Buttons
<SfRadioButton Label="Option 1" Name="default" Value="Checked" @bind-Checked="stringChecked"></SfRadioButton><br />
<SfRadioButton Label="Option 2" Name="default" Value="Disable" @bind-Checked="stringChecked" Disabled="true"></SfRadioButton><br />
<SfRadioButton Label="Option 3" Name="default" Value="None" @bind-Checked="stringChecked"></SfRadioButton>
@code {
private string stringChecked = "Checked";
}
Form Binding and Validation with a Strongly-Typed Model in Blazor Radio Button Component
To get started quickly with model binding in the Blazor Radio Button component, watch the following video:
This section demonstrates strongly typed view support with the Blazor Radio Button 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, 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.
@using Syncfusion.Blazor.Buttons
@using System.ComponentModel.DataAnnotations
<EditForm Model="Annotate">
<DataAnnotationsValidator></DataAnnotationsValidator>
<div class="form-group">
<SfRadioButton Label="Male" Name="Gender" Value="male" @bind-Checked="@Annotate.Gender"></SfRadioButton>
<SfRadioButton Label="Female" Name="Gender" Value="female" @bind-Checked="@Annotate.Gender"></SfRadioButton>
<ValidationMessage For="@(() => Annotate.Gender)" />
</div>
</EditForm>
@code {
public Annotation Annotate = new Annotation();
public class Annotation
{
[Range(typeof(string), "male", "male", ErrorMessage = "Male gender is required.")]
public string Gender { get; set; } = "male";
}
}