Blazor MultiSelect Dropdown Example - Option Grouping
This example demonstrates the MultiSelect component’s grouping and checkbox features to present items in organized categories and enable efficient multi-selection in Blazor applications.
Grouping and interaction features:
- Open the list by clicking the MultiSelect element.
- Type in the search box to filter items dynamically.
- Filtered results update based on typed characters.
- Select multiple values using item checkboxes.
- Use the group header checkbox to select or clear all items in a group.
Configuration and recommended properties:
- GroupBy — group items by a category field to organize the list.
- Mode — set to
CheckBoxto enable checkbox selection. - EnableGroupCheckBox — set to
trueto add a header checkbox that toggles all items in the group.
When the component is configured with GroupBy, items are visually grouped under category headers; enabling EnableGroupCheckBox renders a checkbox in each header that toggles selection for all items in that group. In CheckBox mode, users can select or deselect individual items via checkboxes; group header state reflects partial selections when not all items are selected. Filtering the list preserves selection state for items that remain in the data set; selected items outside the filtered view remain selected until explicitly cleared. Use the GroupBy field to bind to a property on your data model that identifies the group category. Toggle EnableGroupCheckBox to true to provide a single control for group-level selection. CheckBox mode works with local and remote data sources and integrates with existing value binding patterns. Consult the linked API pages for code examples showing markup and DataSource binding patterns. Ensure that group labels and checkboxes remain visible and accessible; anchors in this description include aria-label attributes and open in a new tab for reference.
See also