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

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub

False

True

MudBlazor

Community Support

Discord

GitHub Discussions

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

GitHub Discussions

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.

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;
}

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 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.

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 🗙