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.
Add the following to your _Imports.razor file:
@using SimpleBlazorMultiselect
Add the following to the <head> of your App.razor or index.html file:
<link rel="stylesheet" href="/_content/SimpleBlazorMultiselect/bootstrap.min.css"/>
<script src="/_content/SimpleBlazorMultiselect/bootstrap.bundle.min.js"></script>
See the project SimpleBlazorMultiselectDemo for more examples of how to use the component,
or take a look at the properties page on the wiki.
Below are some short examples, they all use the following @code block:
@code {
private readonly List<string> _items = new() { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10" };
private List<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"/>