Checkbox Primitive
Unstyled, accessible primitive component for building custom checkboxes.
Basic Headless Primitive
The primitive provides behavior and accessibility without styling.
State: Unchecked
Controlled State
Control the primitive state externally.
Indeterminate State
Useful for "select all" scenarios when only some items are selected.
Accessibility Features
Built-in accessibility features following WAI-ARIA design patterns.
ARIA Attributes
- ✓
role="checkbox"for screen readers - ✓
aria-checkedindicates checked state (true/false/mixed) - ✓
data-stateattribute for CSS styling (checked|unchecked|indeterminate) - ✓
disabledattribute for disabled state - ✓ Focus management with visible focus indicators
Keyboard Shortcuts
Navigate and interact with checkboxes using keyboard.
API Reference
Component properties and parameters.
CheckboxPrimitive
Checked
Type: bool
Default: false
Controls whether the checkbox is checked. Supports two-way binding with @bind-Checked.
CheckedChanged
Type: EventCallback<bool>
Callback invoked when the checked state changes.
Indeterminate
Type: bool
Default: false
Sets the checkbox to indeterminate state (for "select all" scenarios). Sets aria-checked="mixed".
IndeterminateChanged
Type: EventCallback<bool>
Callback invoked when the indeterminate state changes.
Disabled
Type: bool
Default: false
Prevents toggling when true.
Id
Type: string?
Unique identifier for the checkbox element. Used for label association.
ChildContent
Type: RenderFragment?
Content rendered inside the checkbox (typically a checkmark icon).
When to Use Primitives
Choose between primitives and styled components based on your needs.
Use Checkbox Primitive
- ✓ Building a custom design system
- ✓ Need complete control over styling
- ✓ Want to apply your own CSS framework
- ✓ Creating unique visual designs
Use Styled Component
- ● Want shadcn/ui design out of the box
- ● Need quick implementation
- ● Like the default styling
- ● Prefer convention over configuration