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.

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.