### Install SimpleBlazorMultiselect Package

Source: https://github.com/borisgerretzen/simpleblazormultiselect/blob/master/README.md

Install the SimpleBlazorMultiselect NuGet package using the .NET CLI.

```bash
dotnet add package SimpleBlazorMultiselect
```

--------------------------------

### Blazor Component Setup

Source: https://github.com/borisgerretzen/simpleblazormultiselect/blob/master/README.md

This C# code block defines the data source for the multiselect component. It includes a list of strings for options and a HashSet to store selected items.

```csharp
@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();
}
```

--------------------------------

### Configure Global Standalone Mode

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Set `SimpleMultiselectGlobals.Standalone = true` once at application startup to enable standalone mode. This includes bundled CSS variables, making Bootstrap unnecessary.

```csharp
// Program.cs — Blazor Server
using SimpleBlazorMultiselect;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorComponents().AddInteractiveServerComponents();

// Run without Bootstrap across the entire app
SimpleMultiselectGlobals.Standalone = true;

var app = builder.Build();
// ...
await app.RunAsync();
```

```csharp
// Program.cs — Blazor WebAssembly
using SimpleBlazorMultiselect;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");

SimpleMultiselectGlobals.Standalone = true;

await builder.Build().RunAsync();
```

--------------------------------

### Configure Standalone Mode for No Bootstrap Projects

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

For projects not using Bootstrap, set the global standalone flag in `Program.cs` to enable standalone styling for the multiselect component.

```csharp
// Program.cs (Blazor Server or WASM)
using SimpleBlazorMultiselect;

// ...
SimpleMultiselectGlobals.Standalone = true;

await app.RunAsync();
```

--------------------------------

### Basic Multiselect with String Options

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Demonstrates the basic usage of the `SimpleMultiselect` component, binding to a list of strings and displaying selected items. Requires `Options` and `@bind-SelectedOptions`.

```razor
@* Basic multiselect bound to a list of strings *@
<SimpleMultiselect
    Options="_items"
    @bind-SelectedOptions="_selectedItems"
    DefaultText="Choose items..." />

<ul>
    @foreach (var item in _selectedItems)
    {
        <li>@item</li>
    }
</ul>

@code {
    private readonly List<string> _items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];
    private HashSet<string> _selectedItems = new();
}
```

--------------------------------

### Register SimpleBlazorMultiselect Namespace

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Import the component's namespace into your Blazor project's `_Imports.razor` file to make the component available.

```razor
@* _Imports.razor *@@using SimpleBlazorMultiselect
```

--------------------------------

### Virtualization for Large Datasets with Virtualize

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Improve performance for large lists by setting `Virtualize` to `true`. This uses Blazor's `<Virtualize>` component to render only visible items, recommended when paired with `CanFilter`.

```razor
<SimpleMultiselect
    Options="_bigList"
    @bind-SelectedOptions="_selected"
    CanFilter="true"
    Virtualize="true" />

@code {
    // 100 000 items rendered efficiently
    private readonly List<string> _bigList =
        Enumerable.Range(1, 100_000).Select(i => $"Item {i}").ToList();

    private HashSet<string> _selected = new();
}
```

--------------------------------

### Component Properties

Source: https://github.com/borisgerretzen/simpleblazormultiselect/wiki/Properties

This section lists and describes the properties available for configuring the Simple Blazor Multiselect component.

```APIDOC
## Component Properties

### Description
This table outlines the properties that can be used to customize the behavior and appearance of the Simple Blazor Multiselect component.

### Properties
- **SelectedOptions** (List<TItem>) - Required - The options selected by the user. Default: `new()`
- **SelectedOptionsChanged** (EventCallback<List<TItem>>) - Required - Event callback that is invoked when the selected options change.
- **Options** (List<TItem>) - Required - Represents the available options in the multiselect dropdown. Default: `new()`
- **StringSelector** (Func<TItem, string>) - Required - Function to convert an item to a string for display in the dropdown. Default: `item => item?.ToString() ?? string.Empty`
- **DefaultText** (string) - Optional - The default text to display when no options are selected. Default: `"Select Options"`
- **SelectedOptionsRenderer** (RenderFragment<IEnumerable<TItem>>?) - Optional - Optional custom renderer for the selected options. If not set, items will be rendered using StringSelector and concatenated with a comma.
- **CanFilter** (bool) - Optional - Whether or not the dropdown should be filterable. Default: `false`
- **FilterPredicate** (Func<TItem, string, bool>?) - Optional - A function that determines whether a given item matches the filter string. Default implementation checks if the item's string representation contains the filter string, case-insensitive.
- **Virtualize** (bool) - Optional - Whether or not the virtualize component should be used to render the options. Default: `false`
- **IsMultiSelect** (bool) - Optional - Whether or not the multiselect should allow multiple selected values. Default: `true`
- **Class** (string?) - Optional - Additional CSS classes to apply to the dropdown.
- **Style** (string?) - Optional - Additional CSS style to apply to the dropdown.
```

--------------------------------

### Multiselect with String and Enum Options

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Shows how to use the `SimpleMultiselect` component with both string lists and enum types. For enums, `Enum.GetValues` and a `StringSelector` are used.

```razor
@* String list *@
<SimpleMultiselect Options="_fruits" @bind-SelectedOptions="_selected" />

@* Enum list *@
<SimpleMultiselect
    Options="Enum.GetValues<Status>().ToList()"
    @bind-SelectedOptions="_selectedStatuses"
    StringSelector="s => s.ToString()" />

@code {
    private readonly List<string> _fruits = ["Apple", "Banana", "Cherry"];
    private HashSet<string> _selected = new();

    private HashSet<Status> _selectedStatuses = new();

    private enum Status { Active, Inactive, Pending }
}
```

--------------------------------

### Manual Event Handling with SelectedOptionsChanged

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Demonstrates manual event wiring for `SelectedOptionsChanged`, which is useful for executing side effects or custom logic when the selection changes. The `OnSelectionChanged` method handles the update.

```razor
@* Manual event wiring — useful when side effects are needed *@
<SimpleMultiselect
    Options="_capitals"
    SelectedOptions="_selected"
    SelectedOptionsChanged="OnSelectionChanged" />

<p>Count: @_selected.Count</p>

@code {
    private readonly List<string> _capitals = ["Berlin", "Paris", "Rome", "Madrid"];
    private HashSet<string> _selected = new();

    private void OnSelectionChanged(HashSet<string> newSelection)
    {
        _selected = newSelection;
        Console.WriteLine($"Selection changed: {string.Join(", ", newSelection)}");
    }
}
```

--------------------------------

### Enabling Filtering with CanFilter and FilterPredicate

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Enable the search input in the dropdown by setting `CanFilter` to `true`. Customize the filtering logic by providing a `FilterPredicate` function for case-insensitive substring matching or custom logic.

```razor
@* Default case-insensitive contains filter *@
<SimpleMultiselect
    Options="_cities"
    @bind-SelectedOptions="_selected"
    CanFilter="true" />

@* Custom predicate: starts-with match only *@
<SimpleMultiselect
    Options="_cities"
    @bind-SelectedOptions="_selected2"
    CanFilter="true"
    FilterPredicate="(city, filter) => city.StartsWith(filter, StringComparison.OrdinalIgnoreCase)" />

@code {
    private readonly List<string> _cities = ["Amsterdam", "Athens", "Berlin", "Brussels", "Budapest"];
    private HashSet<string> _selected = new();
    private HashSet<string> _selected2 = new();
}
```

--------------------------------

### Basic Blazor Multiselect Usage

Source: https://github.com/borisgerretzen/simpleblazormultiselect/blob/master/README.md

Renders a basic multiselect dropdown using the SimpleMultiselect component. It binds the available options to the '_items' list and selected options to the '_selectedItems' HashSet.

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

--------------------------------

### Control Item Selection Comparison with MatchByReference

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Use `MatchByReference` to determine if a displayed item is already selected. Set to `true` for reference equality (instances must be identical), or `false` (default) for string equality based on `StringSelector` output.

```razor
@* String equality (default) — works even when item instances differ *@@
<SimpleMultiselect
    Options="_options"
    @bind-SelectedOptions="_selected"
    StringSelector="x => x.Label" />

@* Reference equality — instances must be identical *@
<SimpleMultiselect
    Options="_options"
    @bind-SelectedOptions="_selected2"
    StringSelector="x => x.Label"
    MatchByReference="true" />

@code {
    private record MyItem(string Id, string Label);

    private readonly List<MyItem> _options =
    [
        new("1", "Apple"),
        new("2", "Banana"),
        new("3", "Cherry")
    ];

    // Pre-populate with the same instance from _options for MatchByReference to work correctly
    private HashSet<MyItem> _selected = new();
    private HashSet<MyItem> _selected2 = new();
}
```

--------------------------------

### Blazor Multiselect with Reference Equality

Source: https://github.com/borisgerretzen/simpleblazormultiselect/blob/master/README.md

Configures the SimpleMultiselect component to use reference equality for comparing selected items. Set `MatchByReference` to `true` to use the default equality comparison instead of string representation.

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

--------------------------------

### Blazor Multiselect with Custom Item Template

Source: https://github.com/borisgerretzen/simpleblazormultiselect/blob/master/README.md

Configures the SimpleMultiselect component to use a custom template for rendering selected items. Each selected item is displayed as a Bootstrap badge.

```html
<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>
```

--------------------------------

### Custom String Display with StringSelector

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Use the `StringSelector` parameter to define how complex objects are converted to strings for display and selection. This is required when `TItem` is not a primitive type.

```razor
<SimpleMultiselect
    Options="_people"
    @bind-SelectedOptions="_selectedPeople"
    StringSelector="person => $"{person.Name} (age {person.Age})"" />

<ul>
    @foreach (var p in _selectedPeople)
    {
        <li>@p.Name — @p.Age years old</li>
    }
</ul>

@code {
    private record Person(string Name, int Age);

    private readonly List<Person> _people =
    [
        new("Alice", 30),
        new("Bob", 25),
        new("Charlie", 35)
    ];

    private HashSet<Person> _selectedPeople = new();
}
```

--------------------------------

### Two-Way Binding with @bind-SelectedOptions

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Illustrates the use of Blazor's `@bind-SelectedOptions` shorthand for two-way data binding between the component's selection and a local `HashSet`.

```razor
@* Two-way binding shorthand *@
<SimpleMultiselect Options="_capitals" @bind-SelectedOptions="_selected" />

<p>Count: @_selected.Count</p>

@code {
    private readonly List<string> _capitals = ["Berlin", "Paris", "Rome", "Madrid"];
    private HashSet<string> _selected = new();
}
```

--------------------------------

### Blazor Multiselect with Filtering Enabled

Source: https://github.com/borisgerretzen/simpleblazormultiselect/blob/master/README.md

Enables the filtering capability for the SimpleMultiselect component, allowing users to search through the options. Set `CanFilter` to `true`.

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

--------------------------------

### Use Cascading Parameter for Standalone Mode

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Alternatively, wrap individual component instances in a `CascadingValue` with `Standalone` set to `true` to enable standalone mode for specific components.

```razor
<CascadingValue Name="Standalone" Value="true">
    <SimpleMultiselect Options="_items" @bind-SelectedOptions="_selected" />
</CascadingValue>
```

--------------------------------

### Custom Selected Options Rendering with SelectedOptionsRenderer

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Utilize the `SelectedOptionsRenderer` parameter to completely customize how selected items are displayed within the dropdown button. This allows for custom elements like badges or pills.

```razor
<SimpleMultiselect
    Options="_capitals"
    @bind-SelectedOptions="_selected">
    <SelectedOptionsRenderer Context="options">
        @if (!options.Any())
        {
            <span class="text-muted">Select capitals...</span>
        }
        else
        {
            @foreach (var city in options)
            {
                <span class="badge bg-primary me-1">@city</span>
            }
        }
    </SelectedOptionsRenderer>
</SimpleMultiselect>

@code {
    private readonly List<string> _capitals = ["Berlin", "Paris", "Rome", "Madrid", "Lisbon"];
    private HashSet<string> _selected = new();
}
```

--------------------------------

### Custom Default Text with DefaultText Parameter

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Set the `DefaultText` parameter to customize the string displayed in the dropdown button when no items are selected. The default value is 'Select Options'.

```razor
<SimpleMultiselect
    Options="_items"
    @bind-SelectedOptions="_selected"
    DefaultText="-- Please choose --" />

@code {
    private readonly List<string> _items = ["Option A", "Option B", "Option C"];
    private HashSet<string> _selected = new();
}
```

--------------------------------

### Single Select Mode with IsMultiSelect

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Configure the component for single selection by setting `IsMultiSelect` to `false`. In this mode, selecting a new item closes the dropdown and clears previous selections.

```razor
<SimpleMultiselect
    Options="_countries"
    @bind-SelectedOptions="_selected"
    IsMultiSelect="false"
    DefaultText="Select a country" />

<p>Selected: <strong>@_selected.FirstOrDefault()</strong></p>

@code {
    private readonly List<string> _countries = ["Germany", "France", "Italy", "Spain"];
    private HashSet<string> _selected = new();
}
```

--------------------------------

### Apply Custom CSS Class and Inline Styles

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Pass additional CSS class names or inline styles to the outermost `<div>` wrapper of the component for custom theming or layout overrides.

```razor
<SimpleMultiselect
    Options="_items"
    @bind-SelectedOptions="_selected"
    Class="my-custom-dropdown rounded-pill"
    Style="max-width: 320px;" />

@code {
    private readonly List<string> _items = ["Red", "Green", "Blue"];
    private HashSet<string> _selected = new();
}
```

--------------------------------

### Set Dropdown ID for Accessibility

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Set the `id` attribute on the internal `<button>` element using the `Id` parameter. This is useful for associating a `<label>` element with the dropdown for accessibility.

```razor
<label for="color-picker">Choose colors:</label>
<SimpleMultiselect
    Id="color-picker"
    Options="_colors"
    @bind-SelectedOptions="_selected" />

@code {
    private readonly List<string> _colors = ["Red", "Green", "Blue", "Yellow"];
    private HashSet<string> _selected = new();
}
```

--------------------------------

### Disabling Interaction with Disabled Parameter

Source: https://context7.com/borisgerretzen/simpleblazormultiselect/llms.txt

Prevent user interaction with the dropdown by setting the `Disabled` parameter to `true`. This also automatically closes the dropdown if it was open.

```razor
<SimpleMultiselect
    Options="_items"
    @bind-SelectedOptions="_selected"
    Disabled="@_isDisabled"
    CanFilter="true" />

<button class="btn btn-secondary" @onclick="() => _isDisabled = !_isDisabled">
    @(_isDisabled ? "Enable" : "Disable") dropdown
</button>

@code {
    private readonly List<string> _items = ["Alpha", "Beta", "Gamma"];
    private HashSet<string> _selected = new();
    private bool _isDisabled = false;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.