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-Checked="@Basic_Switch1" />
<MudSwitch @bind-Checked="@Basic_Switch2" Color="Color.Primary" />
<MudSwitch @bind-Checked="@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-Checked="@Basic_Switch1" Color="Color.Success" UnCheckedColor="Color.Error" />
<MudSwitch @bind-Checked="@Basic_Switch2" Color="Color.Primary" UnCheckedColor="Color.Secondary" />
<MudSwitch @bind-Checked="@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;
}
Switch with label

<MudSwitch @bind-Checked="@Label_Switch1" Label="Info" Color="Color.Info" />
<MudSwitch @bind-Checked="@Label_Switch2" Label="Success" Color="Color.Success" />
<MudSwitch @bind-Checked="@Label_Switch3" Label="Warning" Color="Color.Warning" />
<MudSwitch T="bool" Disabled="true" Label="Disabled" />
@code{
    public bool Label_Switch1 { get; set; } = false;
    public bool Label_Switch2 { get; set; } = true;
    public bool Label_Switch3 { get; set; } = true;
}
Thumb Icon

An icon can be determined with ThumbIcon parameter.

<MudSwitch @bind-Checked="@_checked1" ThumbIcon="@Icons.Custom.Brands.MudBlazor">Basic</MudSwitch>
<MudSwitch @bind-Checked="@_checked2" ThumbIcon="@Icons.Custom.Brands.MudBlazor" ThumbIconColor="Color.Info">Colored</MudSwitch>
<MudSwitch @bind-Checked="@_checked3" ThumbIcon="@(_checked3==true ? Icons.Material.Filled.Done : Icons.Material.Filled.Close)" ThumbIconColor="@(_checked3==true ? Color.Success : Color.Error)">Changing</MudSwitch>
@code{
    bool _checked1 = false;
    bool _checked2 = false;
    bool _checked3 = false;
}
Different data types

<MudSwitch @bind-Checked="boolean">bool: @boolean</MudSwitch>
<MudSwitch @bind-Checked="nullable" Color="Color.Primary">bool?: @nullable</MudSwitch>
<MudSwitch @bind-Checked="integer" Color="Color.Secondary">int: @integer</MudSwitch>
<MudSwitch @bind-Checked="str" Color="Color.Tertiary">string: "@(str)"</MudSwitch>
<MudSwitch @bind-Checked="customstr" Color="Color.Error" Converter="@(new CustomStringToBoolConverter())"> custom string: "@(customstr)"</MudSwitch>
<MudSwitch @bind-Checked="customobj" Color="Color.Dark" Converter="@(new ObjectToBoolConverter())">object: "@(customobj.ToString())"</MudSwitch>
@code{
    public bool boolean { get; set; } = true;
    public bool? nullable { get; set; } = true;
    public int integer { get; set; } = 1;
    public string str { get; set; } = "on";
    public string customstr { get; set; } = "no, at all";
    public object customobj { get; set; } = false;

    public class ObjectToBoolConverter : BoolConverter<object>
    {

        public ObjectToBoolConverter()
        {
            SetFunc = OnSet;
            GetFunc = OnGet;
        }

        private object OnGet(bool? value)
        {
            try
            {
                return value == true;
            }
            catch (Exception e)
            {
                UpdateGetError("Conversion error: " + e.Message);
                return default;
            }
        }

        private bool? OnSet(object arg)
        {
            if (arg == null)
                return null;
            try
            {
                if (arg is bool)
                    return (bool)arg;
                else if (arg is bool?)
                    return (bool?)arg;
                else
                {
                    UpdateSetError("Unable to convert to bool? from type object");
                    return null;
                }
            }
            catch (FormatException e)
            {
                UpdateSetError("Conversion error: " + e.Message);
                return null;
            }
        }

    }

    public class CustomStringToBoolConverter : BoolConverter<string>
    {

        public CustomStringToBoolConverter()
        {
            SetFunc = OnSet;
            GetFunc = OnGet;
        }

        private string TrueString = "yes, please";
        private string FalseString = "no, at all";
        private string NullString = "I don't know";

        private string OnGet(bool? value)
        {
            try
            {
                return (value == true) ? TrueString : FalseString;
            }
            catch (Exception e)
            {
                UpdateGetError("Conversion error: " + e.Message);
                return NullString;
            }
        }

        private bool? OnSet(string arg)
        {
            if (arg == null)
                return null;
            try
            {
                if (arg == TrueString)
                    return true;
                if (arg == FalseString)
                    return false;
                else
                    return null;
            }
            catch (FormatException e)
            {
                UpdateSetError("Conversion error: " + e.Message);
                return null;
            }
        }

    } }
ReadOnly mode

Setting ReadOnly="true" will make the switch control stop listening to user inputs.

<div class="d-flex flex-column align-center">
    <MudSwitch ReadOnly="@ReadOnly" @bind-Checked="@SwitchValue" Color="Color.Primary" Class="mr-n2 mb-6"/>
    <MudButton OnClick="@ToggleValue" Variant="Variant.Filled" DisableElevation="true">Toggle Value</MudButton>
    <MudCheckBox @bind-Checked="@ReadOnly" Label="@(ReadOnly ? "readonly-mode" : "edit-mode")" />
</div>
@code {
    public bool SwitchValue { get; set; } = true;
    public bool ReadOnly { get; set; } = true;

    void ToggleValue()
    {
        SwitchValue = !SwitchValue;
    }
}
Keyboard Navigation

MudSwitch accepts keys to keyboard navigation.


Space key to toggle state true/false

Delete or ArrowLeft keys to set UnChecked

Enter or NumpadEnter or ArrowRight keys to set Checked

*Disabled or ReadOnly switches cannot be changed by keys.

<MudSwitch @bind-Checked="@Label_Switch1" Label="Switch With Key Navigation" />
@code{
    bool Label_Switch1 = false;
}
An unhandled error has occurred. Reload 🗙