Checkbox
Checkbox Primitive
Unstyled, accessible primitive component for building custom checkboxes.
Basic Headless Primitive
The primitive provides behavior and accessibility without styling.
State: Unchecked
Behavior
The checkbox state is available through two-way binding on
Checked while retaining primitive semantics.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.
Included by default
role="checkbox", aria-checked, indeterminate state (mixed), focus management, and disabled semantics.
Keyboard Shortcuts
Navigate and interact with checkboxes using keyboard.
Navigate to checkbox
Tab
Toggle checkbox
Space
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
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Checked | bool | false | Controls whether the checkbox is checked. Supports two-way binding via the Checked parameter. |
| CheckedChanged | EventCallback<bool> | — | Callback invoked when the checked state changes. |
| Indeterminate | bool | false | Sets the checkbox to indeterminate state and applies aria-checked="mixed". |
| IndeterminateChanged | EventCallback<bool> | — | Callback invoked when the indeterminate state changes. |
| Disabled | bool | false | Prevents toggling when true. |
| Id | string? | — | Unique identifier used for external label association. |
| ChildContent | RenderFragment? | — | Optional inner content, typically a check icon. |