MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Radio

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

See Radio API for parameter documentation.

RadioGroup

Selected Option:

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudForm>
    <MudRadioGroup @bind-SelectedOption="@SelectedOption">
        <MudRadio Option="@("Radio 1")" Color="Color.Primary">Primary</MudRadio>
        <MudRadio Option="@("Radio 2")" Color="Color.Secondary">Secondary</MudRadio>
        <MudRadio Option="@("Radio 3")">Default</MudRadio>
        <MudRadio Option="@("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;
    }
}

Content Placement

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" md="2">
        <MudRadioGroup @bind-SelectedOption="@Placement">
            <MudRadio Color="Color.Primary" Option="@(Placement.Bottom)">Bottom</MudRadio>
            <MudRadio Color="Color.Primary" Option="@(Placement.Start)">Start</MudRadio>
            <MudRadio Color="Color.Primary" Option="@(Placement.Top)">Top</MudRadio>
            <MudRadio Color="Color.Primary" Option="@(Placement.End)">End</MudRadio>
        </MudRadioGroup>
    </MudItem>
    <MudItem xs="12" md="8" Class="mud-text-align-center my-auto">
        <MudRadioGroup T="string">
            <MudRadio T="string" Placement="@Placement" Color="Color.Secondary">Content Placement</MudRadio>
        </MudRadioGroup>
    </MudItem>
    <MudItem xs="12" md="2" Style="width:100%"></MudItem>
</MudGrid>
@code {
    public Placement Placement { get; set; } = Placement.End;
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙