Checkbox Component
States
Unchecked, checked, indeterminate
razor
<Checkbox Size="md" Label="Unchecked" />
<Checkbox Size="md" Value="true" Label="Checked" />
<Checkbox Size="md" Indeterminate="true" Label="Indeterminate" />Sizes
sm (16px) and md (20px)
razor
<Checkbox Size="sm" Value="true" Label="Small checkbox" />
<Checkbox Size="md" Value="true" Label="Medium checkbox" />With description
Label + supporting text
razor
<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
Inert states
razor
<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)" />Interactive (two-way bind)
Click to toggle
razor
<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")}";
}