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.Selected: apple
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.
Select all notifications
Selected: email, push
Disabled
Set
Disabled on the group to disable all items. You can also disable individual items by setting Disabled on specific CheckboxGroupItem components.Group disabled
Individual item disabled
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.Starter Plan
Basic features, up to 3 users
Pro Plan
All features, unlimited users
Enterprise Plan
Custom solutions, dedicated support
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.Notification Preferences
Choose which notifications you would like to receive.
Enable all notifications
Email digest
Receive a weekly summary of activity.
SMS alerts
Get notified for urgent updates.
Push notifications
Real-time alerts in your browser.