Simple Blazor multiselect component, Bootstrap compatible but not required!
$ dotnet add package SimpleBlazorMultiselectThis 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.
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.Standalonetotruein yourProgram.csfile. Alternatively you can use a cascading parameter with nameStandalonearound the component.
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();
}
<SimpleMultiselect
Options="_items"
@bind-SelectedOptions="_selectedItems"/><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><SimpleMultiselect
Options="_items"
@bind-SelectedOptions="_selectedItems"
CanFilter="true"/>This demonstrates the dark mode of the dropdown when Bootstrap is set to dark mode.