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

Checkbox

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

Labels

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

Icons

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudCheckBox @bind-Checked="@CheckBox1" Color="Color.Secondary" CheckedIcon="@Icons.Material.Filled.Favorite" UncheckedIcon="@Icons.Material.Filled.FavoriteBorder"></MudCheckBox>
<MudCheckBox @bind-Checked="@CheckBox2" Color="Color.Tertiary" CheckedIcon="@Icons.Material.Filled.Bookmark" UncheckedIcon="@Icons.Material.Filled.BookmarkBorder"></MudCheckBox>
<MudCheckBox @bind-Checked="@CheckBox3" Color="Color.Warning" CheckedIcon="@Icons.Material.Filled.Star" UncheckedIcon="@Icons.Material.Filled.StarOutline"></MudCheckBox>
@code {
    public bool CheckBox1 { get; set; } = true;
    public bool CheckBox2 { get; set; } = false;
    public bool CheckBox3 { get; set; } = false;
}

Dense

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

Sizes

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudCheckBox @bind-Checked="@Size_CheckBox1" Size="Size.Small" Color="Color.Primary"></MudCheckBox>
<MudCheckBox @bind-Checked="@Size_CheckBox2" Size="Size.Medium" Color="Color.Secondary"></MudCheckBox>
<MudCheckBox @bind-Checked="@Size_CheckBox3" Size="Size.Large" Color="Color.Tertiary"></MudCheckBox>
@code {
    public bool Size_CheckBox1 { get; set; } = true;
    public bool Size_CheckBox2 { get; set; } = false;
    public bool Size_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.

In addition, the different states when the checkbox is clicked are the following (with a starting null value):

Indeterminate, True, False, True, False...

It is not possible to obtain the Indeterminate state again. Except by resetting the value to Null. Or, by setting TriState="true", you can get the Indeterminate state after the False state.

Show 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>
<MudCheckBox @bind-Checked="anotherValue" Color="@Color.Secondary" TriState="true">Checkbox with TriState. Value: @(anotherValue == null ? "null" : anotherValue.ToString())</MudCheckBox>
@code {
    public bool? value { get; set; } = null;
    public bool? anotherValue { 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

Setting ReadOnly="true" will make the checkbox control stop listening to user input.

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 🗙