The CheckBox component enables users to make toggled selections for single items or groups of options. This sample demonstrates key features of the CheckBox component, including binding, label placement, size customization, tri‑state behavior, disabled states, form validation integration, and grouping in real-world selection scenarios such as notification preferences.

Common CheckBox states include Checked, Unchecked, Disabled, and Indeterminate. Use Disabled to prevent interaction, and enable tri‑state using EnableTriState to support the Indeterminate state.

Bind the checked state using Blazor’s bind-Checked for two‑way binding. When you need custom logic during updates, use the explicit pattern with Checked and CheckedChanged.

Provide context using the Label property and choose its position with LabelPosition (Before or After). The positioning adapts to RTL when enabled.

Customize the appearance of the CheckBox using built‑in theme color classes or fully custom CSS. The Color examples use predefined visual styles such as e-primary, e-success, e-info, e-warning, and e-danger to match the application theme.

The Frame example demonstrates deeper styling using a custom CSS class (e.g., e-custom) to modify the shape, border, or overall frame appearance.

documentation.

Disable interaction when needed using Disabled. Disabled CheckBoxes remain visible but cannot be toggled by users.

The CheckBox component works seamlessly inside Blazor’s EditForm, supporting model binding and standard DataAnnotations validation. The sample also shows a simple submitted message after successful submit, which clears when you uncheck the box.

The parent checkbox reflects group status: Checked (all), Unchecked (none), and Indeterminate (some). Clicking the parent only performs two states (check all / uncheck all); the Indeterminate state is shown programmatically based on child selections.