Radio

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

API
RadioGroup

Selected Option: 

<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;
    }
}
Color

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

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

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

<MudRadioGroup @bind-SelectedOption="Radio_Size">
    <MudRadio Option="1" Color="Color.Primary" Size="Size.Small">Small</MudRadio>
    <MudRadio Option="2" Color="Color.Secondary" Size="Size.Medium">Medium</MudRadio>
    <MudRadio Option="3" Color="Color.Tertiary" Size="Size.Large">Large</MudRadio>
</MudRadioGroup>

@code { 
    public int Radio_Size { get; set; } = 2;
}
Content Placement

<MudGrid>
    <MudItem xs="12" md="1">
        <MudRadioGroup @bind-SelectedOption="@Placement">
            <MudRadio Color="Color.Primary" Option="@(Placement.Top)">Top</MudRadio>
            <MudRadio Color="Color.Primary" Option="@(Placement.Bottom)">Bottom</MudRadio>
            <MudRadio Color="Color.Primary" Option="@(Placement.Start)">Start</MudRadio>
            <MudRadio Color="Color.Primary" Option="@(Placement.End)">End</MudRadio>
            <MudRadio Color="Color.Primary" Option="@(Placement.Left)">Left</MudRadio>
            <MudRadio Color="Color.Primary" Option="@(Placement.Right)">Right</MudRadio>
        </MudRadioGroup>
    </MudItem>
    <MudItem xs="12" md="9" Class="d-flex justify-center 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.Right;
}
ReadOnly and Disabled mode

All child MudRadio components can be Disabled or set as ReadOnly from the parent MudRadioGroup.

Selected Option 1:

Selected Option 2: 

<MudGrid>
    <MudItem sm="12" md="6">
        <MudRadioGroup @bind-SelectedOption="@SelectedOption1" ReadOnly="ReadOnly">
            <MudRadio Option="@("Radio 1")">Radio 1</MudRadio>
            <MudRadio Option="@("Radio 2")">Radio 2</MudRadio>
            <MudRadio Option="@("Radio 3")">Radio 3</MudRadio>
            <MudRadio Option="@("Radio 4")">Radio 4</MudRadio>
        </MudRadioGroup>
        <MudSwitch @bind-Checked="ReadOnly" Color="Color.Primary" Label="ReadOnly" />
        <MudText>Selected Option 1: @SelectedOption1</MudText>
    </MudItem>
    <MudItem sm="12" md="6">
        <MudRadioGroup @bind-SelectedOption="@SelectedOption2" Disabled="Disabled">
            <MudRadio Option="@("Radio 1")">Radio 1</MudRadio>
            <MudRadio Option="@("Radio 2")">Radio 2</MudRadio>
            <MudRadio Option="@("Radio 3")">Radio 3</MudRadio>
            <MudRadio Option="@("Radio 4")">Radio 4</MudRadio>
        </MudRadioGroup>
        <MudSwitch @bind-Checked="Disabled" Color="Color.Primary" Label="Disabled" />
        <MudText>Selected Option 2: @SelectedOption2</MudText>
    </MudItem>
</MudGrid>

@code {
    public string SelectedOption1 { get; set; }
    public string SelectedOption2 { get; set; }
    public bool Disabled { get; set; }
    public bool ReadOnly { get; set; }
}
Keyboard Navigation

MudRadio accepts keys to keyboard navigation.


Tab or Shift+Tab key to focus next/previous radio

Enter or NumpadEnter or Space keys to select focused radio

Backspace key to reset radio

*Disabled radios cannot be changed by keys.

<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")" Color="Color.Tertiary">Tertiary</MudRadio>
        <MudRadio Option="@("Radio 4")">Default</MudRadio>
        <MudRadio Option="@("Radio 4")" Color="Color.Primary" Disabled="true">Disabled</MudRadio>
    </MudRadioGroup>
</MudForm>

@code {
    public string SelectedOption { get; set; }
}
Numeric Field
Select
An unhandled error has occurred. Reload 🗙