Check Box

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.

API
Basic Checkboxes

<MudCheckBox @bind-Value="Basic_CheckBox1"></MudCheckBox>
<MudCheckBox @bind-Value="Basic_CheckBox2" Color="Color.Primary"></MudCheckBox>
<MudCheckBox @bind-Value="Basic_CheckBox3" Color="Color.Secondary"></MudCheckBox>
<MudCheckBox @bind-Value="Basic_CheckBox4" 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;
    public bool Basic_CheckBox4 { get; set; } = true;
}
Color

<MudCheckBox @bind-Value="Basic_CheckBox1" UncheckedColor="Color.Error"></MudCheckBox>
<MudCheckBox @bind-Value="Basic_CheckBox2" Color="Color.Primary" UncheckedColor="Color.Default"></MudCheckBox>
<MudCheckBox @bind-Value="Basic_CheckBox3" Color="Color.Secondary" UncheckedColor="Color.Default"></MudCheckBox>
<MudCheckBox @bind-Value="Basic_CheckBox4" Disabled="true" UncheckedColor="Color.Success"></MudCheckBox>

@code {
    public bool Basic_CheckBox1 { get; set; } = true;
    public bool Basic_CheckBox2 { get; set; } = false;
    public bool Basic_CheckBox3 { get; set; } = false;
    public bool Basic_CheckBox4 { get; set; } = true;
}
Labels

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

<MudCheckBox @bind-Value="Label_CheckBox1" Label="Default"></MudCheckBox>
<MudCheckBox @bind-Value="Label_CheckBox2" Label="Primary" Color="Color.Primary"></MudCheckBox>
<MudCheckBox @bind-Value="Label_CheckBox3" Label="Secondary" LabelPosition="LabelPosition.Start" Color="Color.Secondary"></MudCheckBox>
<MudCheckBox @bind-Value="Label_CheckBox1" Disabled="true" Label="Disabled" LabelPosition="LabelPosition.Start"></MudCheckBox>

@code {
    public bool Label_CheckBox1 { get; set; } = true;
    public bool Label_CheckBox2 { get; set; } = false;
    public bool Label_CheckBox3 { get; set; } = false;
}
Icons

<MudCheckBox @bind-Value="CheckBox1" Color="Color.Secondary" CheckedIcon="@Icons.Material.Filled.Favorite" UncheckedIcon="@Icons.Material.Filled.FavoriteBorder"></MudCheckBox>
<MudCheckBox @bind-Value="CheckBox2" Color="Color.Tertiary" CheckedIcon="@Icons.Material.Filled.Bookmark" UncheckedIcon="@Icons.Material.Filled.BookmarkBorder"></MudCheckBox>
<MudCheckBox @bind-Value="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

<MudCheckBox @bind-Value="Dense_CheckBox" Dense="true" Color="Color.Success"></MudCheckBox>
<MudCheckBox @bind-Value="Dense_CheckBox" Dense="false" Color="Color.Primary"></MudCheckBox>

@code {
    public bool Dense_CheckBox { get; set; } = true;
}
Sizes

<MudCheckBox @bind-Value="Size_CheckBox1" Size="Size.Small" Color="Color.Primary"></MudCheckBox>
<MudCheckBox @bind-Value="Size_CheckBox2" Size="Size.Medium" Color="Color.Secondary"></MudCheckBox>
<MudCheckBox @bind-Value="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. 

<MudCheckBox @bind-Value="value" Color="@Color.Primary">
    Value: @(value == null ? "null" : value.ToString())
</MudCheckBox>
<MudButton OnClick="@(()=>value=null)">Reset</MudButton>
<MudCheckBox @bind-Value="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

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

        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.

<div>
    <MudCheckBox ReadOnly="@ReadOnly" @bind-Value="Label_Checkbox1" Label="@(ReadOnly ? "ReadOnly Checkbox 1" : "EditMode Checkbox 1")"/>
    <MudCheckBox ReadOnly="@ReadOnly" @bind-Value="Label_Checkbox2" Label="@(ReadOnly ? "ReadOnly Checkbox 2" : "EditMode Checkbox 2")"/>
</div>
<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-Value="ReadOnly" Label="@(ReadOnly ? "ReadOnly Mode" : "Edit Mode")" Color="Color.Primary"/>

@code {
    public bool Label_Checkbox1 { get; set; } = true;
    public bool Label_Checkbox2 { get; set; } = false;
    public bool ReadOnly { get; set; } = true;
}
Keyboard Navigation

MudCheckBox accepts keys to keyboard navigation.


Space key to toggle state true/false/(if TriState is true) indeterminate

Delete key to set UnChecked

Enter or NumpadEnter keys to set Checked

Backspace key to set indeterminate (only TriState is true)

*Disabled or ReadOnly checkboxes cannot be changed by keys.

<MudCheckBox @bind-Value="CheckBox1" Color="Color.Primary" Label="Basic"></MudCheckBox>
<MudCheckBox @bind-Value="CheckBox2" Color="Color.Primary" Label="TriState" TriState="true"></MudCheckBox>

@code {
    public bool CheckBox1 { get; set; } = true;
    public bool? CheckBox2 { get; set; } = null;
}
An unhandled error has occurred. Reload 🗙