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
<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
<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; }
Sizes
<MudRadioGroup @bind-Value="Radio_Size"> <MudRadio Value="1" Color="Color.Primary" Size="Size.Small">Small</MudRadio> <MudRadio Value="2" Color="Color.Secondary" Size="Size.Medium">Medium</MudRadio> <MudRadio Value="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-Value="Placement"> <MudRadio Color="Color.Primary" Value="@(Placement.Top)">Top</MudRadio> <MudRadio Color="Color.Primary" Value="@(Placement.Bottom)">Bottom</MudRadio> <MudRadio Color="Color.Primary" Value="@(Placement.Start)">Start</MudRadio> <MudRadio Color="Color.Primary" Value="@(Placement.End)">End</MudRadio> <MudRadio Color="Color.Primary" Value="@(Placement.Left)">Left</MudRadio> <MudRadio Color="Color.Primary" Value="@(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="" 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; }