Radio

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

Dense

Dense Normal

<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

Small Medium Large

<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

Top Bottom Start End Left Right

Content Placement

<MudGrid>
    <MudItem xs="12" md="2">
        <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.Left)">Start</MudRadio>
            <MudRadio Color="Color.Primary" Option="@(Placement.Right)">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="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.Right;
}

API

RadioGroup

Dense

Sizes

Content Placement