Multi-Select Mode

Select multiple items with the BlazorXSelect component

Basic Multi-Select

Enable multi-selection by setting the Multiple parameter to true and using @bind-Values.

Selected (0):

No fruits selected

<BlazorXSelect TValue="string"
              Items="@fruitOptions"
              @bind-Value="@fruitValue"
              Values="@selectedFruits"
              ValuesChanged="OnFruitsChanged"
              Multiple="true"
              Placeholder="Select fruits..."
              AllowClear="true" />

@code {
    private string fruitValue = string.Empty;
    private IEnumerable<string> selectedFruits = new List<string>();
    private List<SelectOption<string>> fruitOptions = new()
    {
        new() { Id = "apple", Text = "🍎 Apple" },
        new() { Id = "banana", Text = "🍌 Banana" },
        new() { Id = "orange", Text = "🍊 Orange" },
        new() { Id = "grape", Text = "🍇 Grape" },
        new() { Id = "strawberry", Text = "🍓 Strawberry" },
        new() { Id = "watermelon", Text = "🍉 Watermelon" }
    };

    void OnFruitsChanged(IEnumerable<string> values)
    {
        selectedFruits = values.ToList();
    }
}

Multi-Select with Search

Combine multi-selection with search functionality for large datasets.

Selected cities (0):

No cities selected

<BlazorXSelect TValue="int"
              Items="@cityOptions"
              @bind-Value="@cityValue"
              Values="@selectedCities"
              ValuesChanged="OnCitiesChanged"
              Multiple="true"
              MinimumResultsForSearch="0"
              Placeholder="Search and select cities..."
              AllowClear="true" />

Multi-Select with Disabled Options

Some options can be disabled while allowing multi-selection of others.

Enabled features:

No features selected

private List<SelectOption<string>> featureOptions = new()
{
    new() { Id = "dashboard", Text = "Dashboard", Disabled = false },
    new() { Id = "reports", Text = "Reports (Premium Only)", Disabled = true },
    new() { Id = "analytics", Text = "Analytics", Disabled = false },
    new() { Id = "export", Text = "Export (Premium Only)", Disabled = true },
    new() { Id = "notifications", Text = "Notifications", Disabled = false },
    new() { Id = "api", Text = "API Access (Enterprise Only)", Disabled = true }
};

Programmatic Control

Select or clear all items programmatically.

Selected: 0 of 8

<BlazorXSelect TValue="string"
              Items="@languageOptions"
              @bind-Value="@languageValue"
              Values="@selectedLanguages"
              ValuesChanged="OnLanguagesChanged"
              Multiple="true"
              Placeholder="Select programming languages..."
              AllowClear="true" />

<button @onclick="SelectAllLanguages">Select All</button>
<button @onclick="ClearAllLanguages">Clear All</button>

@code {
    private void SelectAllLanguages()
    {
        selectedLanguages = languageOptions.Select(l => l.Id).ToList();
    }

    private void ClearAllLanguages()
    {
        selectedLanguages = new List<string>();
    }

    void OnLanguagesChanged(IEnumerable<string> values)
    {
        selectedLanguages = values.ToList();
    }
}