Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates


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

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
Edit on TryMudBlazor
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
Edit on TryMudBlazor
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" Converter="@(new CustomStringToBoolConverter())"> custom string: "@(customstr)"</MudCheckBox>
<MudCheckBox @bind-Checked="obj" Converter="@(new ObjectToBoolConverter())">boxed bool: "@(obj.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; } = CustomStringToBoolConverter.NullString;
    public object obj { get; set; } = false;

    public class ObjectToBoolConverter : BoolConverter<object>
    {
        public ObjectToBoolConverter()
        {
            SetFunc = OnSet;
            GetFunc = OnGet;
        }

        private object OnGet(bool? value) => value == true;

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

        public const string TrueString = "Yes, please";
        public const string FalseString = "No, thanks";
        public const string NullString = "I don't know";

        private string OnGet(bool? value) => value == null ? NullString : (value == true ? TrueString : FalseString);

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

ReadOnly mode

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

False

True

False

True

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudCheckBox ReadOnly="@ReadOnly" @bind-Checked="@Label_Checkbox1" Label="@(ReadOnly ? "ReadOnly Checkbox 1" : "EditMode Checkbox 1")"/>
<MudCheckBox ReadOnly="@ReadOnly" @bind-Checked="@Label_Checkbox2" Label="@(ReadOnly ? "ReadOnly Checkbox 2" : "EditMode Checkbox 2")"/>

<MudSelect  @bind-Value="@Label_Checkbox1" Label="Checkbox 1">
    <MudSelectItem Value="@(false)">False</MudSelectItem>
    <MudSelectItem Value="@(true)">True</MudSelectItem>
</MudSelect>
<MudSelect @bind-Value="@Label_Checkbox2" Label="Checkbox 2">
    <MudSelectItem Value="@(false)">False</MudSelectItem>
    <MudSelectItem Value="@(true)">True</MudSelectItem>
</MudSelect>

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