MudBlazor - Blazor Component Library

RadioGroup

Selected Option:

<MudForm>
    <MudRadioGroup @bind-Value="SelectedOption">
        <MudRadio Value="@("Radio 1")" Color="Color.Primary">Primary</MudRadio>
        <MudRadio Value="@("Radio 2")" Color="Color.Secondary">Secondary</MudRadio>
        <MudRadio Value="@("Radio 3")">Default</MudRadio>
        <MudRadio Value="@("Radio 4")" Color="Color.Primary" Disabled="true">Disabled</MudRadio>
    </MudRadioGroup>
</MudForm>

<div class="d-flex align-center">
    <MudButton Variant="Variant.Outlined" OnClick="Reset">Reset</MudButton>
    <MudText Class="ml-4">Selected Option: @SelectedOption</MudText>
</div>

@code {
    public string SelectedOption { get; set; }

    private void Reset()
    {
        SelectedOption = null;
    }
}

Color

One Two Three Four

<MudRadioGroup T="int">
    <MudRadio Value="1" Color="Color.Primary" UnCheckedColor="Color.Default">One</MudRadio>
    <MudRadio Value="2" Color="Color.Secondary" UnCheckedColor="Color.Default">Two</MudRadio>
    <MudRadio Value="3" Color="Color.Success" UnCheckedColor="Color.Error">Three</MudRadio>
    <MudRadio Value="4" Color="Color.Primary" Disabled="true">Four</MudRadio>
</MudRadioGroup>

Dense

Dense Normal

<MudRadioGroup @bind-Value="Dense_Radio">
    <MudRadio Value="true" Color="Color.Primary" Dense="true">Dense</MudRadio>
    <MudRadio Value="false" Color="Color.Secondary" Dense="false">Normal</MudRadio>
</MudRadioGroup>

@code {
    public bool Dense_Radio { get; set; } = true;
}

Radio

API

RadioGroup

Color

Dense