RadioGroup
Selected Option:
<MudForm> <MudRadioGroup @bind-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=""> <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="" 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; }
<MudForm> <MudRadioGroup @bind-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; } }