Checkbox

A control that allows the user to toggle between checked and not checked.

Basic

A basic checkbox with two-way binding.

Accept terms and conditions

Checked: False

<div class="flex items-center space-x-2">
    <Checkbox @bind-Checked="isChecked" />
    <Label>Accept terms and conditions</Label>
</div>

@code {
    private bool isChecked = false;
}

With Label

Combine with Label component for accessibility.

Email notifications

SMS notifications

Push notifications

<div class="flex items-center space-x-2">
    <Checkbox @bind-Checked="emailNotifications" />
    <Label>Email notifications</Label>
</div>

Disabled

Checkbox can be disabled.

Disabled (checked)

<Checkbox Checked="true" Disabled="true" />