Checkbox
A checkbox control that allows users to toggle between checked and unchecked states.
Basic Usage
Simple checkbox with label using two-way binding.
Current state: Unchecked
Multiple Options
Group of checkboxes for multiple selections.
Selected: Email, Push
Disabled State
Checkboxes that cannot be interacted with.
Form Validation
Checkbox integrated with Blazor's EditForm and validation.
Interactive
Checkbox with custom change handler.
Feature is disabled
With Container Background
Checkbox within a highlighted container. Click anywhere in the container to toggle.
You can enable or disable notifications at any time.
Custom Styling
Checkboxes with additional CSS classes.
Accessibility
Tab focuses checkboxes in sequence. Space toggles the focused checkbox. Disabled checkboxes are not focusable. ARIA attributes (role='checkbox', aria-checked, aria-disabled) are set correctly.
Browser Compatibility
Tested and verified across modern browsers.
✓ Chrome 120+ (compatible)
✓ Firefox 120+ (compatible)
✓ Edge 120+ (compatible)
✓ Safari 17+ (compatible)
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Checked | bool | false | Whether the checkbox is checked. Supports two-way binding with @bind-Checked. |
| Disabled | bool | false | When true, the checkbox cannot be interacted with and is removed from tab order. |
| Id | string? | — | HTML id attribute, used to associate with a |
| Class | string? | — | Additional CSS classes for the checkbox element. |
| CheckedChanged | EventCallback<bool> | — | Fired when the checked state changes. |