Checkbox Component

Unchecked Checked Indeterminate

<Checkbox Size="md" Label="Unchecked" />
<Checkbox Size="md" Value="true" Label="Checked" />
<Checkbox Size="md" Indeterminate="true" Label="Indeterminate" />

Small checkbox Medium checkbox

<Checkbox Size="sm" Value="true" Label="Small checkbox" />
<Checkbox Size="md" Value="true" Label="Medium checkbox" />

I agree to the termsBy checking this you agree to our Terms of Service and Privacy Policy. Remember meSave my login details for next time.

<Checkbox Size="md"
          Value="true"
          Label="I agree to the terms"
          Description="By checking this you agree to our Terms of Service and Privacy Policy." />

<Checkbox Size="sm"
          Label="Remember me"
          Description="Save my login details for next time." />

Disabled (unchecked) Disabled (checked) Disabled (indeterminate)

<Checkbox Size="md" Disabled="true" Label="Disabled (unchecked)" />
<Checkbox Size="md" Value="true" Disabled="true" Label="Disabled (checked)" />
<Checkbox Size="md" Indeterminate="true" Disabled="true" Label="Disabled (indeterminate)" />

Checkbox is unchecked Checkbox is checked

<Checkbox @bind-Value="check1" Size="sm" Label="@label1" />
<Checkbox @bind-Value="check2" Size="md" Label="@label2" />

@code {
    private bool check1;
    private bool check2 = true;
    private string label1 => $"Checkbox is {(check1 ? "checked" : "unchecked")}";
    private string label2 => $"Checkbox is {(check2 ? "checked" : "unchecked")}";
}

Checkbox Component

States

Sizes

With description

Disabled

Interactive (two-way bind)