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.With Label
Checkbox associated with a label for better accessibility. Set the Id parameter and match it with a <label for="..."> element.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.Disabled
Checkbox in disabled state. Set Disabled to true to prevent user interaction and apply the [data-disabled] attribute for styling.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