Mudblazor
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Checkbox

Checkboxes is a great way to allow the user to make a selection of choices from things like a list. If you want to let the user turn a setting on or off on demand, a Switch component is recommended instead.

See Checkbox API for parameter documentation.

Basic checkboxes

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudCheckBox @bind-Checked="@Basic_CheckBox1"></MudCheckBox>
<MudCheckBox @bind-Checked="@Basic_CheckBox2" Color="Color.Primary"></MudCheckBox>
<MudCheckBox @bind-Checked="@Basic_CheckBox1" Color="Color.Secondary"></MudCheckBox>
<MudCheckBox @bind-Checked="@Basic_CheckBox1" Disabled="true"></MudCheckBox>
@code {
    public bool Basic_CheckBox1 { get; set; } = true;
    public bool Basic_CheckBox2 { get; set; } = false;
    public bool Basic_CheckBox3 { get; set; } = false;
}

Checkbox with label

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudCheckBox @bind-Checked="@Label_CheckBox1" Label="Default"></MudCheckBox>
<MudCheckBox @bind-Checked="@Label_CheckBox2" Label="Primary" Color="Color.Primary"></MudCheckBox>
<MudCheckBox @bind-Checked="@Label_CheckBox3" Label="Secondary" Color="Color.Secondary"></MudCheckBox>
<MudCheckBox @bind-Checked="@Label_CheckBox1" Disabled="true" Label="Disabled"></MudCheckBox>
@code {
    public bool Label_CheckBox1 { get; set; } = true;
    public bool Label_CheckBox2 { get; set; } = false;
    public bool Label_CheckBox3 { get; set; } = false;
}

Indeterminate state

When you use T="bool?" or bind the checkbox against a nullable bool it can have an indeterminate state when the value is null.

Hide code example
Copy Code
View the source on GitHub
<MudCheckBox @bind-Checked="value" Color="@Color.Primary">
    Value: @(value == null ? "null" : value.ToString())
</MudCheckBox>
<MudButton OnClick="@(()=>value=null)">Reset</MudButton>
@code {
    public bool? value { get; set; } = null;
}

Binding checkbox against different data types

Hide code example
Copy Code
View the source on GitHub
<MudCheckBox @bind-Checked="boolean">bool: @boolean</MudCheckBox>
<MudCheckBox @bind-Checked="nullable" Color="Color.Primary">bool?: @nullable</MudCheckBox>
<MudCheckBox @bind-Checked="integer" Color="Color.Secondary">int: @integer</MudCheckBox>
<MudCheckBox @bind-Checked="str" Color="Color.Tertiary">string: "@(str)"</MudCheckBox>
<MudCheckBox @bind-Checked="customstr" Color="Color.Tertiary" Converter="@(new CustomStringToBoolConverter())"> custom string: "@(customstr)"</MudCheckBox>
<MudCheckBox @bind-Checked="customobj" Color="Color.Tertiary" Converter="@(new ObjectToBoolConverter())">object: "@(customobj.ToString())"</MudCheckBox>
@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(T);
            }
        }

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

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