Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Switch

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

See Switch API for parameter documentation.

Basic switches

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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;
}

Switch with label

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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;
}

Binding switch against different data types

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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 (object)(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)(object)arg;
                else if (arg is bool?)
                    return (bool?)(object)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

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

False

True

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudSwitch ReadOnly="@ReadOnly" @bind-Checked="@SwitchValue" Label="@(SwitchValue ? "On" : "Off")"/>

<MudSelect  @bind-Value="@SwitchValue" Label="Change Switch value">
    <MudSelectItem Value="@(false)">False</MudSelectItem>
    <MudSelectItem Value="@(true)">True</MudSelectItem>
</MudSelect>

<MudSwitch @bind-Checked="@ReadOnly" Label="@(ReadOnly ? "ReadOnly Mode" : "Edit Mode")"/>
@code {
    public bool SwitchValue { get; set; } = true;
    public bool ReadOnly { get; set; } = true;
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙