Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Checkbox Group
A group component that manages a collection of checkboxes with shared state. Supports a 'Select all' checkbox with automatic indeterminate state, group-level disabled state, and two-way binding of selected values.
Default
A basic
CheckboxGroup with three items. Use @bind-Values for two-way binding of the selected values collection. Each CheckboxGroupItem requires a Value and displays a Label.
Loading example…
Select All
Set
ShowSelectAll to true to display a "Select all" checkbox above the items. The select-all checkbox automatically shows an indeterminate state when only some items are selected. Customize the label with SelectAllLabel.
Loading example…
Disabled
Set
Disabled on the group to disable all items. You can also disable individual items by setting Disabled on specific CheckboxGroupItem components.
Loading example…
Custom Content
Use
ChildContent on CheckboxGroupItem instead of the Label parameter to render custom content next to the checkbox. This allows for richer layouts with descriptions, badges, or icons.
Loading example…
Settings Card
A real-world settings card pattern using
CheckboxGroup with ShowSelectAll inside a Card. This replaces the need to manually manage individual checkbox states and "select all" logic.
Loading example…