Simple blazor multiselect

This package contains a simple Blazor dropdown component that supports single and multiple selection. It is compatible with Bootstrap in the sense that if you include Bootstrap in your project, the dropdown will look and feel like a Bootstrap dropdown including dark mode.

Installation

You can find the Nuget package here, install it using the following command:

dotnet add package SimpleBlazorMultiselect

[!IMPORTANT] If you want to use the project without Bootstrap, set SimpleMultiselectGlobals.Standalone to true in your Program.cs file. Alternatively you can use a cascading parameter with name Standalone around the component.

Usage

See the project SimpleBlazorMultiselectDemo for more examples of how to use the component, or take a look at the properties page on the wiki. You can also view a live demo here. To view the source code of the demo, take a look in the demo folder of this repository.

Below are some short examples, they all use the following @code block:

@code {
    private readonly List<string> _items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10" ];
    private HashSet<string> _selectedItems = new();
}

Basic dropdown

<SimpleMultiselect
    Options="_items"
    @bind-SelectedOptions="_selectedItems"/>

Dropdown with custom item template

<SimpleMultiselect
        Options="_items"
        @bind-SelectedOptions="_selectedItems">
    <SelectedOptionsRenderer Context="options">
        @foreach (var item in options)
        {
            <span 
                class="badge bg-primary"
                style="padding: 6px; margin-right: 10px;">
                @item
            </span>
        }
    </SelectedOptionsRenderer>
</SimpleMultiselect>

Dropdown with filter

<SimpleMultiselect
        Options="_items"
        @bind-SelectedOptions="_selectedItems"
        CanFilter="true"/>

Bootstrap dark mode

This demonstrates the dark mode of the dropdown when Bootstrap is set to dark mode.

Equality options

<SimpleMultiselect
    Options="_items"
    @bind-SelectedOptions="_selectedItems"
    MatchByReference="true" />

By default the dropdown will check if items are in the selected items set based on their string representation. If you instead prefer the default equality comparison set MatchByReference to true.