Checkbox Component
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 (selected state). Click anywhere in the container to toggle.
You can enable or disable notifications at any time.
Custom Styling
Checkboxes with additional CSS classes.
Accessibility
Keyboard navigation and screen reader support.
✓ Tab key focuses checkboxes in sequence
✓ Space key toggles focused checkbox
✓ Disabled checkboxes are not focusable (tabindex="-1")
✓ ARIA attributes set correctly (role="checkbox", aria-checked, aria-disabled)
✓ Focus ring appears on keyboard focus (focus-visible:ring-2)
✓ Color contrast meets WCAG 2.1 AA standards
✓ Semantic label association using htmlFor attribute
✓ Screen readers announce checkbox state correctly
Browser Compatibility
Tested and verified across modern browsers.
✓ Chrome 120+ (compatible)
✓ Firefox 120+ (compatible)
✓ Edge 120+ (compatible)
✓ Safari 17+ (compatible)