Mudblazor
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Radio

Radio buttons allow the user to select a single choice from a group of options.

See Radio API for parameter documentation.

RadioGroup

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudForm>
    <MudRadioGroup @bind-SelectedLabel="@SelectedLabel" @bind-SelectedOption="@SelectedOption">
        <MudRadio Color="Color.Primary" Option="Radio 1">Primary</MudRadio>
        <MudRadio Color="Color.Secondary" Option="Radio 2">Secondary</MudRadio>
        <MudRadio Option="Radio 3">Default</MudRadio>
        <MudRadio Color="Color.Primary" Disabled="true" Option="Radio 4">Disabled</MudRadio>
    </MudRadioGroup>
</MudForm>
@code {
    public string SelectedLabel { get; set; } = "Primary";
    public string SelectedOption { get; set; }
}

Label placement

Hide code example
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" md="2">
        <MudRadioGroup SelectedOptionChanged="@OnRadioSelect" SelectedOption="@SelectedOption">
            <MudRadio Color="Color.Primary" Option="1">Bottom</MudRadio>
            <MudRadio Color="Color.Primary" Option="2">Start</MudRadio>
            <MudRadio Color="Color.Primary" Option="3">Top</MudRadio>
            <MudRadio Color="Color.Primary" Option="4">End</MudRadio>
        </MudRadioGroup>
    </MudItem>
    <MudItem xs="12" md="8" Class="mud-text-align-center my-auto">
        <MudRadioGroup>
            <MudRadio Placement="@LabelPlacement" Color="Color.Secondary">Label Placement</MudRadio>
        </MudRadioGroup>
    </MudItem>
    <MudItem xs="12" md="2" Style="width:100%"></MudItem>
</MudGrid>
@code {
    public string SelectedOption { get; set; }

    public Placement LabelPlacement { get; set; } = Placement.End;

    public void OnRadioSelect(string value)
    {
        switch (value)
        {
            case "1":
                LabelPlacement = Placement.Bottom;
                break;
            case "2":
                LabelPlacement = Placement.Start;
                break;
            case "3":
                LabelPlacement = Placement.Top;
                break;
            case "4":
                LabelPlacement = Placement.End;
                break;
        }
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙