Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Checkbox
A headless checkbox primitive with three-state support and full accessibility.
Basic
A simple
Checkbox with custom styling. Use @bind-Checked for two-way binding to track the checked state.
Loading example…
With Label
Checkbox associated with a label for better accessibility. Set the Id parameter and match it with a <label for="..."> element.
Loading example…
Indeterminate State
Mixed state for parent checkboxes. Set
Indeterminate to true to display a mixed state, typically used for "select all" scenarios where only some children are checked.
Loading example…
Disabled
Checkbox in disabled state. Set Disabled to true to prevent user interaction and apply the [data-disabled] attribute for styling.
Loading example…
Data Attributes
Use these data attributes for CSS styling:
[data-state="checked"]- When checked is true[data-state="unchecked"]- When checked is false[data-state="indeterminate"]- When in indeterminate state[data-disabled]- When disabled