Customization in Blazor Radio Button
14 Aug 20266 minutes to read
To modify the RadioButton appearance, override the component’s default CSS. The following table lists common CSS selectors and their purposes within the RadioButton.
| CSS Class | Purpose of Class |
|---|---|
.e-radio-wrapper |
To customize the radio button wrapper. |
.e-radio + label:hover::before |
To customize the RadioButton on hover. |
.e-radio:checked + label::after, .e-radio:checked + label::before
|
To customize the checked RadioButton. |
.e-radio:checked:focus + label::before, .e-radio:checked + label:hover::before
|
To customize the checked RadioButton on hover. |
Customize Blazor RadioButton Appearance
Customize the appearance of the RadioButton component by applying custom CSS rules and assigning a CSS class to the CssClass property.
The background and border color of the RadioButton 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 RadioButton Component
Set the Disabled property to true to disable the RadioButton. 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 RadioButton Component
To get started quickly with model binding in the Blazor RadioButton component, watch the following video:
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, 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";
}
}