MudBlazor - Blazor Component Library

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

Switch with label

Text can be added using the Label property and its position can be specified using the LabelPosition property

Info

Success

Warning!

Disabled

<MudSwitch @bind-Value="Label_Switch1" Label="Info" Color="Color.Info" />
<MudSwitch @bind-Value="Label_Switch2" Label="Success" Color="Color.Success" />
<MudSwitch @bind-Value="Label_Switch3" Label="Warning!" LabelPosition="LabelPosition.Start" Color="Color.Warning" />
<MudSwitch T="bool" Disabled="true" Label="Disabled" LabelPosition="LabelPosition.Start" />

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

Basic

Colored

Changing

<MudSwitch @bind-Value="_checked1" ThumbIcon="@Icons.Custom.Brands.MudBlazor">Basic</MudSwitch>
<MudSwitch @bind-Value="_checked2" ThumbIcon="@Icons.Custom.Brands.MudBlazor" ThumbIconColor="Color.Info">Colored</MudSwitch>
<MudSwitch @bind-Value="_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

bool: True

bool?: True

int: 1

string: "on"

custom string: "no, at all"

object: "False"

<MudSwitch @bind-Value="boolean">bool: @boolean</MudSwitch>
<MudSwitch @bind-Value="nullable" Color="Color.Primary">bool?: @nullable</MudSwitch>
<MudSwitch @bind-Value="integer" Color="Color.Secondary">int: @integer</MudSwitch>
<MudSwitch @bind-Value="str" Color="Color.Tertiary">string: "@(str)"</MudSwitch>
<MudSwitch @bind-Value="customstr" Color="Color.Error" Converter="@(new CustomStringToBoolConverter())"> custom string: "@(customstr)"</MudSwitch>
<MudSwitch @bind-Value="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.

readonly-mode

<div class="d-flex flex-column align-center">
    <MudSwitch ReadOnly="@ReadOnly" @bind-Value="SwitchValue" Color="Color.Primary" Class="mr-n2 mb-6"/>
    <MudButton OnClick="@ToggleValue" Variant="Variant.Filled" DropShadow="false">Toggle Value</MudButton>
    <MudCheckBox @bind-Value="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.

Switch With Key Navigation

<MudSwitch @bind-Value="Label_Switch1" Label="Switch With Key Navigation" />

@code{
    bool Label_Switch1 = false;
}

Size

MudSwitch size can be changed with the Size parameter.

Small

Medium

Large

Switches from small to large

<MudSwitch T="bool" Label="Small" Size="Size.Small"/>
<MudSwitch T="bool" Label="Medium"/>
<MudSwitch T="bool" Label="Large" Size="Size.Large"/>
<MudSwitch @bind-Value="Label_Switch" T="bool" Label="Switches from small to large" Size="@(Label_Switch ? Size.Small : Size.Large)" ThumbIcon="@Icons.Material.Filled.Favorite" ThumbIconColor="Color.Error" />

@code{
    public bool Label_Switch { get; set; } = false;
}

Switch

API