Switch

Similar to a checkbox but visually different, the switch lets the user switch between two values with the tap of a button.

Basic switches

<MudSwitch @bind-Value="Basic_Switch1" />
<MudSwitch @bind-Value="Basic_Switch2" Color="Color.Primary" />
<MudSwitch @bind-Value="Basic_Switch3" Color="Color.Secondary" />
<MudSwitch T="bool" Disabled="true" />
@code{
    public bool Basic_Switch1 { get; set; } = false;
    public bool Basic_Switch2 { get; set; } = true;
    public bool Basic_Switch3 { get; set; } = true;
}
Color

<MudSwitch @bind-Value="Basic_Switch1" Color="Color.Success" UnCheckedColor="Color.Error" />
<MudSwitch @bind-Value="Basic_Switch2" Color="Color.Primary" UnCheckedColor="Color.Secondary" />
<MudSwitch @bind-Value="Basic_Switch3" Color="Color.Info" UnCheckedColor="Color.Warning" />
<MudSwitch T="bool" Disabled="true" UnCheckedColor="Color.Dark" />
@code{
    public bool Basic_Switch1 { get; set; } = false;
    public bool Basic_Switch2 { get; set; } = true;
    public bool Basic_Switch3 { get; set; } = true;
}

Copyright © 2020-2026 MudBlazor.

Powered by .NET 8.0.29

An error has occurred. This application may no longer respond until reloaded. Reload 🗙