Bootstrap Blazor enterprise-level UI component library

Color

Multi-select drop-down boxes in a variety of colors are available

Demo

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <MultiSelect TValue="string" Items="@Items1" />
    </div>
    <div class="col-12 col-sm-6">
        <MultiSelect TValue="string" Color="Color.Primary" Items="@Items2" />
    </div>
    <div class="col-12 col-sm-6">
        <MultiSelect TValue="string" Color="Color.Success" Items="@Items3" />
    </div>
    <div class="col-12 col-sm-6">
        <MultiSelect TValue="string" Color="Color.Danger" Items="@Items4" />
    </div>
    <div class="col-12 col-sm-6">
        <MultiSelect TValue="string" Color="Color.Warning" Items="@Items5" />
    </div>
    <div class="col-12 col-sm-6">
        <MultiSelect TValue="string" Color="Color.Info" Items="@Items6" />
    </div>
    <div class="col-12 col-sm-6">
        <MultiSelect TValue="string" Color="Color.Secondary" Items="@Items7" />
    </div>
    <div class="col-12 col-sm-6">
        <MultiSelect TValue="string" Color="Color.Dark" Items="@Items8" />
    </div>
</div>

@code {
    [NotNull]
    private List<SelectedItem>? Items1 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items2 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items3 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items4 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items5 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items6 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items7 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items8 { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items1 = GenerateItems();
        Items2 = GenerateItems();
        Items3 = GenerateItems();
        Items4 = GenerateItems();
        Items5 = GenerateItems();
        Items6 = GenerateItems();
        Items7 = GenerateItems();
        Items8 = GenerateItems();

    }

    private static List<SelectedItem> GenerateItems() => new()
    {
        new ("Beijing", "北京"),
        new ("Shanghai", "上海"),
        new ("Guangzhou", "广州"),
        new ("Shenzhen", "深圳"),
        new ("Chengdu", "成都"),
        new ("Wuhan", "武汉"),
        new ("Dalian", "大连"),
        new ("Hangzhou", "杭州"),
        new ("Lianyungang", "连云港")
    };
}

A two-way binding value string

Bind a comma string-splitting string

Demo

The mutltiSelect component data source Items and selected values the SelectItemsValue support bidirectional binding;In this example, the SelectItemsValue variable by binding bidirectionally, and chooses to change its value through the drop-down box.

Beijing

@inject IStringLocalizer<MultiSelectBindingString> Localizer

<div>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@Items" @bind-Value="@SelectedItemsValue" />
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa-solid fa-plus" Text="@Localizer["MultiSelectBindingStringAdd"]" OnClick="@AddItems" class="me-1" />
            <Button Icon="fa-solid fa-minus" Text="@Localizer["MultiSelectBindingStringDecrease"]" OnClick="@RemoveItems" />
            <Button Icon="fa-regular fa-trash-can" Text="@Localizer["MultiSelectBindingStringClean"]" OnClick="@ClearItems" />
        </div>
    </div>
    <div class="mt-3">@SelectedItemsValue</div>
</div>

@code {
    [NotNull]
    private List<SelectedItem>? Items { get; set; }

    [NotNull]
    private List<SelectedItem>? DataSource { get; set; }

    private string SelectedItemsValue { get; set; } = "Beijing";

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        // 初始化数据
        DataSource = new List<SelectedItem>
        {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        Items = GenerateDataSource(DataSource);
    }

    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();

    private void AddItems()
    {
        SelectedItemsValue = "Beijing,Shanghai,Guangzhou";
    }

    private void RemoveItems()
    {
        SelectedItemsValue = "Beijing";
    }

    private void ClearItems()
    {
        SelectedItemsValue = "";
    }
}

A collection of bidirectional binding values

Bind a generic a collection of IEnumerable

Demo

In this example, the SelectArrayValues collection variable by binding bidirectionally, and selects to change its value through the drop-down box

@inject IStringLocalizer<MultiSelectBindingCollection> Localizer

<div>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@Items" @bind-Value="@SelectedArrayValues" Max="4" Min="2" />
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa-solid fa-plus" Text="@Localizer["MultiSelectBindingCollectionAdd"]" OnClick="@AddListItems" class="me-1" />
            <Button Icon="fa-solid fa-minus" Text="@Localizer["MultiSelectBindingCollectionDecrease"]" OnClick="@RemoveListItems" />
            <Button Icon="fa-regular fa-trash-can" Text="@Localizer["MultiSelectBindingCollectionClean"]" OnClick="@ClearListItems" />
        </div>
    </div>
    <div class="mt-3">@(string.Join(",", SelectedArrayValues))</div>
</div>

@code {
    [NotNull]
    private List<SelectedItem>? Items { get; set; }

    [NotNull]
    private List<SelectedItem>? DataSource { get; set; }

    /// <summary>
    /// OnInitalized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        // 初始化数据
        DataSource = new List<SelectedItem>
        {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        Items = GenerateDataSource(DataSource);
    }

    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();

    private IEnumerable<string> SelectedArrayValues { get; set; } = Enumerable.Empty<string>();

    private void AddListItems()
    {
        SelectedArrayValues = "Beijing,Shanghai".Split(',');
    }

    private void RemoveListItems()
    {
        SelectedArrayValues = new[] { "Beijing" };
    }

    private void ClearListItems()
    {
        SelectedArrayValues = Enumerable.Empty<string>();
    }
}

An array of two-way bound values

Bind an array int[]

Demo

In this example, an array variable SelectedIntArrayValues selected by a bidirectional binding, selects to change its value through a drop-down box

@inject IStringLocalizer<MultiSelectBindingNumber> Localizer

<div>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@LongItems" @bind-Value="@SelectedIntArrayValues" />
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa-solid fa-plus" Text="@Localizer["MultiSelectBindingNumberAdd"]" OnClick="@AddArrayItems" class="me-1" />
            <Button Icon="fa-solid fa-minus" Text="@Localizer["MultiSelectBindingNumberDecrease"]" OnClick="@RemoveArrayItems" />
            <Button Icon="fa-regular fa-trash-can" Text="@Localizer["MultiSelectBindingNumberClean"]" OnClick="@ClearArrayItems" />
        </div>
    </div>
    <div class="mt-3">@(string.Join(",", SelectedIntArrayValues))</div>
</div>

@code {
    [NotNull]
    private List<SelectedItem>? LongItems { get; set; }

    [NotNull]
    private List<SelectedItem>? LongDataSource { get; set; }

    private int[] SelectedIntArrayValues { get; set; } = Array.Empty<int>();

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        LongDataSource = new List<SelectedItem>
        {
            new SelectedItem ("1", "特别甜的东瓜(特别甜的东瓜)"),
            new SelectedItem ("2", "特别甜的西瓜(特别甜的西瓜)"),
            new SelectedItem ("3", "特别甜的南瓜(特别甜的南瓜)"),
            new SelectedItem ("4", "特别甜的傻瓜(特别甜的傻瓜)"),
            new SelectedItem ("5", "特别甜的金瓜(特别甜的金瓜)"),
            new SelectedItem ("6", "特别甜的木瓜(特别甜的木瓜)"),
            new SelectedItem ("7", "特别甜的水瓜(特别甜的水瓜)"),
            new SelectedItem ("8", "特别甜的火瓜(特别甜的火瓜)"),
            new SelectedItem ("9", "特别甜的土瓜(特别甜的土瓜)"),
        };

        LongItems = GenerateDataSource(LongDataSource);
    }

    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();

    private void AddArrayItems()
    {
        SelectedIntArrayValues = new[] { 1, 2, 3, 4 };
    }

    private void RemoveArrayItems()
    {
        SelectedIntArrayValues = new[] { 1, 2, };
    }

    private void ClearArrayItems()
    {
        SelectedIntArrayValues = Array.Empty<int>();
    }
}

Bidirectional binding enumerates the collection

Bind a generic a collection of IEnumerable

Demo

In this example, by binding SelectEnumValues collection variables in both directions, you choose to change their values through the drop-down box, and you do not need to set the Items parameter when enumeratingtype, the added feature is that the component tries to find resource files or DisplayAttribute And DescriptionAttribute labels attempt local translation, such as this example when switching to Chinese enumerates the values elementary schoolmiddle school

Middle,Primary

<div>
    <MultiSelect @bind-Value="@SelectedEnumValues" />
    <div class="mt-3">@(string.Join(",", SelectedEnumValues))</div>
</div>

@code {
    private IEnumerable<EnumEducation> SelectedEnumValues { get; set; } = new List<EnumEducation>
    {
        EnumEducation.Middle, EnumEducation.Primary
    };
}

Search function

Turn on search by setting the ShowSearch value

Demo

In this example, the search callback delegate method is set onSearchTextChanged to customize search results if the display text is used internally to make a fuzzy match when not set

Beijing

@inject IStringLocalizer<MultiSelectSearch> Localizer

<div>
    <MultiSelect Items="@Items" @bind-Value="@SelectedItemsValue" ShowSearch="true" OnSearchTextChanged="@OnSearch" />
    <div class="mt-3">@SelectedItemsValue</div>
    <BlockLogger @ref="Trace" class="mt-3" />
</div>

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    [NotNull]
    private List<SelectedItem>? Items { get; set; }

    [NotNull]
    private List<SelectedItem>? DataSource { get; set; }

    private List<SelectedItem>? SearchItemsSource { get; set; }

    private string SelectedItemsValue { get; set; } = "Beijing";

    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();

    protected override void OnInitialized()
    {
        base.OnInitialized();

        // 初始化数据
        DataSource = new List<SelectedItem>
        {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        Items = GenerateDataSource(DataSource);
    }

    private IEnumerable<SelectedItem> OnSearch(string searchText)
    {
        Trace.Log($"{Localizer["MultiSelectSearchLog"]}：{searchText}");
        SearchItemsSource ??= GenerateItems();
        return SearchItemsSource.Where(i => i.Text.Contains(searchText, System.StringComparison.OrdinalIgnoreCase));
    }

    private static List<SelectedItem> GenerateItems() => new()
    {
        new ("Beijing", "北京"),
        new ("Shanghai", "上海"),
        new ("Guangzhou", "广州"),
        new ("Shenzhen", "深圳"),
        new ("Chengdu", "成都"),
        new ("Wuhan", "武汉"),
        new ("Dalian", "大连"),
        new ("Hangzhou", "杭州"),
        new ("Lianyungang", "连云港")
    };
}

Grouping

BlockGroupIntro

Demo

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <MultiSelect TValue="string" Items="GroupItems" />
    </div>
</div>

@code {
    private IEnumerable<SelectedItem> GroupItems { get; } = new SelectedItem[]
    {
        new SelectedItem ("Jilin", "吉林") { GroupName = "东北"},
        new SelectedItem ("Liaoning", "辽宁") {GroupName = "东北", Active = true },
        new SelectedItem ("Beijing", "北京") { GroupName = "华中"},
        new SelectedItem ("Shijiazhuang", "石家庄") { GroupName = "华中"},
        new SelectedItem ("Shanghai", "上海") {GroupName = "华东", Active = true },
        new SelectedItem ("Ningbo", "宁波") {GroupName = "华东", Active = true }
    };
}

Disable the feature

Set the component disabled state by setting the IsDisabled value

Demo

The component does not respond when the state is disabled

<div>
    <MultiSelect Items="@Items" Value="@SelectedItemsValue" IsDisabled="true" />
</div>

@code {
    [NotNull]
    private List<SelectedItem>? Items { get; set; }

    [NotNull]
    private List<SelectedItem>? DataSource { get; set; }

    private string SelectedItemsValue { get; set; } = "Beijing";
    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        // 初始化数据
        DataSource = new List<SelectedItem>
        {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        Items = GenerateDataSource(DataSource);
    }

    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();

}

Events when the option changes

Get the currently selected data set change event by setting the onSelectedItemsChanged callback method by setting

Demo

@inject IStringLocalizer<MultiSelectOptionChange> Localizer
<div>
    <MultiSelect Items="@Items" OnSelectedItemsChanged="@OnSelectedItemsChanged8" Value="@SelectedItemsValue" />
    <BlockLogger @ref="Trace" class="mt-3" />
</div>

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    [NotNull]
    private List<SelectedItem>? Items { get; set; }

    [NotNull]
    private List<SelectedItem>? DataSource { get; set; }

    private string SelectedItemsValue { get; set; } = "Beijing";

    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        // 初始化数据
        DataSource = new List<SelectedItem>
        {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        Items = GenerateDataSource(DataSource);
    }

    private Task OnSelectedItemsChanged8(IEnumerable<SelectedItem> items)
    {
        Trace.Log($"{Localizer["MultiSelectOptionChangeLog"]}：{string.Join(", ", items.Select(i => i.Value))}");
        return Task.CompletedTask;
    }
}

Client validation

When the drop-down box is not selected, it is blocked when the submit button is clicked.

Demo

When built into the ValidateForm component, client authentication is automatically turned on, and the binding model has Required tags

@inject IStringLocalizer<MultiSelectClientValidation> Localizer

<div>
    <ValidateForm Model="@Model">
        <div class="row g-3">
            <div class="col-12 col-sm-8">
                <MultiSelect Items="Items" @bind-Value="@Model.Address" />
            </div>
            <div class="col-12 col-sm-4 align-self-end">
                <Button ButtonType="ButtonType.Submit">@Localizer["MultiSelectClientValidationSubmit"]</Button>
            </div>
        </div>
    </ValidateForm>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo tet, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    private Foo Model { get; set; } = new Foo();

    [NotNull]
    private List<SelectedItem>? Items { get; set; }

    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();

    [NotNull]
    private List<SelectedItem>? DataSource { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        // 初始化数据
        DataSource = new List<SelectedItem>
        {
           new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        Items = GenerateDataSource(DataSource);
    }
}

The label is displayed

When a component binds in both directions, it automatically determines whether label text is displayed based on the conditions

Demo

The pre-label explicit rules are consistent with the BootstrapInput component of the of the [The portal]

Bidirectional binding displays labels

Bidirectional bindings do not display labels

Customize DisplayText

Custom name

@inject IStringLocalizer<MultiSelectDispalyLabel> Localizer

<div>
    <Divider Text="@Localizer["MultiSelectDispalyLabelShowLable"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <ValidateForm Model="@Foo">
        <div class="row g-3">
            <div class="col-12">
                <MultiSelect Color="Color.Primary" Items="@Items1" @bind-Value="@Foo.Name" />
            </div>
        </div>
    </ValidateForm>
    <Divider Text="@Localizer["MultiSelectDispalyLabelHideLable"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <MultiSelect Color="Color.Primary" Items="@Items2" @bind-Value="@Foo.Name" />
    <Divider Text="@Localizer["MultiSelectDispalyLabelCustomDisplayText"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <MultiSelect Color="Color.Primary" Items="@Items3" @bind-Value="@Foo.Name" DisplayText="@Localizer["MultiSelectDispalyLabelCustomText"]" ShowLabel="true" />
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    private Foo Foo { get; set; } = new Foo();

    [NotNull]
    private List<SelectedItem>? Items1 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items2 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items3 { get; set; }

    [NotNull]
    private List<SelectedItem>? DataSource { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        // 初始化数据
        DataSource = new List<SelectedItem>
        {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        Items1 = GenerateDataSource(DataSource);
        Items2 = GenerateDataSource(DataSource);
        Items3 = GenerateDataSource(DataSource);
    }

    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();
}

Options for extra-long text

The candidate text is particularly long

Demo

Extra long text

@inject IStringLocalizer<MultiSelectVeryLongText> Localizer

<div style="max-width: 400px">
    <MultiSelect Items="@LongItems" @bind-Value="@SelectedLongItemsValue" DisplayText="@Localizer["MultiSelectVeryLongTextDisplayText"]" ShowLabel="true"></MultiSelect>
</div>

@code {
    [NotNull]
    private List<SelectedItem>? LongItems { get; set; }

    [NotNull]
    private List<SelectedItem>? LongDataSource { get; set; }

    private string SelectedLongItemsValue { get; set; } = "";

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        LongDataSource = new List<SelectedItem>
        {
            new SelectedItem ("1", "特别甜的东瓜(特别甜的东瓜)"),
            new SelectedItem ("2", "特别甜的西瓜(特别甜的西瓜)"),
            new SelectedItem ("3", "特别甜的南瓜(特别甜的南瓜)"),
            new SelectedItem ("4", "特别甜的傻瓜(特别甜的傻瓜)"),
            new SelectedItem ("5", "特别甜的金瓜(特别甜的金瓜)"),
            new SelectedItem ("6", "特别甜的木瓜(特别甜的木瓜)"),
            new SelectedItem ("7", "特别甜的水瓜(特别甜的水瓜)"),
            new SelectedItem ("8", "特别甜的火瓜(特别甜的火瓜)"),
            new SelectedItem ("9", "特别甜的土瓜(特别甜的土瓜)"),
        };

        LongItems = GenerateDataSource(LongDataSource);
    }

    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();
}

Full and reverse buttons

MultiSelectButtonIntro

Demo

<div style="max-width: 400px">
    <MultiSelect Items="@LongItems" @bind-Value="@SelectedLongItemsValue" ShowToolbar="true" ShowSearch="true" />
    <p>@SelectedLongItemsValue</p>
</div>

@code {
    [NotNull]
    private List<SelectedItem>? LongItems { get; set; }

    [NotNull]
    private List<SelectedItem>? LongDataSource { get; set; }

    private string SelectedLongItemsValue { get; set; } = "";

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        LongDataSource = new List<SelectedItem>
        {
            new SelectedItem ("1", "特别甜的东瓜(特别甜的东瓜)"),
            new SelectedItem ("2", "特别甜的西瓜(特别甜的西瓜)"),
            new SelectedItem ("3", "特别甜的南瓜(特别甜的南瓜)"),
            new SelectedItem ("4", "特别甜的傻瓜(特别甜的傻瓜)"),
            new SelectedItem ("5", "特别甜的金瓜(特别甜的金瓜)"),
            new SelectedItem ("6", "特别甜的木瓜(特别甜的木瓜)"),
            new SelectedItem ("7", "特别甜的水瓜(特别甜的水瓜)"),
            new SelectedItem ("8", "特别甜的火瓜(特别甜的火瓜)"),
            new SelectedItem ("9", "特别甜的土瓜(特别甜的土瓜)"),
        };

        LongItems = GenerateDataSource(LongDataSource);
    }

    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();
}

Set the maximum and minimum number of options

Set the limit on the number of options available to components by setting the max Min values

Demo

You can select up to two options

Select at least two options

@inject IStringLocalizer<MultiSelectMaxMin> Localizer

<div>
    <div style="max-width: 300px">
        <p>@Localizer["MultiSelectMaxMinMax"]</p>
        <MultiSelect Items="@LongItems1" @bind-Value="@SelectedMaxItemsValue" Max="2" />
    </div>
    <div style="max-width: 300px" class="mt-3">
        <p>@Localizer["MultiSelectMaxMinMin"]</p>
        <MultiSelect Items="@LongItems2" @bind-Value="@SelectedMinItemsValue" Min="2" />
    </div>
</div>

@code {
    private string SelectedMaxItemsValue { get; set; } = "";

    private string SelectedMinItemsValue { get; set; } = "";

    [NotNull]
    private List<SelectedItem>? LongDataSource { get; set; }

    [NotNull]
    private List<SelectedItem>? LongItems1 { get; set; }

    [NotNull]
    private List<SelectedItem>? LongItems2 { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        LongDataSource = new List<SelectedItem>
        {
            new SelectedItem ("1", "特别甜的东瓜(特别甜的东瓜)"),
            new SelectedItem ("2", "特别甜的西瓜(特别甜的西瓜)"),
            new SelectedItem ("3", "特别甜的南瓜(特别甜的南瓜)"),
            new SelectedItem ("4", "特别甜的傻瓜(特别甜的傻瓜)"),
            new SelectedItem ("5", "特别甜的金瓜(特别甜的金瓜)"),
            new SelectedItem ("6", "特别甜的木瓜(特别甜的木瓜)"),
            new SelectedItem ("7", "特别甜的水瓜(特别甜的水瓜)"),
            new SelectedItem ("8", "特别甜的火瓜(特别甜的火瓜)"),
            new SelectedItem ("9", "特别甜的土瓜(特别甜的土瓜)"),
        };

        LongItems1 = GenerateDataSource(LongDataSource);
    }

    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();
}

Extend the toolbar button

Customize features by setting ButtonTemplate custom toolbar buttons

Demo

@inject IStringLocalizer<MultiSelectExpandButton> Localizer

<div style="max-width: 300px">
    <MultiSelect Items="@LongItems" @bind-Value="@SelectedLongItemsValue3" ShowToolbar="true" ShowDefaultButtons="false">
        <ButtonTemplate>
            <button class="btn" @onclick="@OnClickButton">@Localizer["MultiSelectExpandButtonText"]</button>
        </ButtonTemplate>
    </MultiSelect>
</div>

@code {
    [NotNull]
    private List<SelectedItem>? LongItems { get; set; }

    [NotNull]
    private List<SelectedItem>? LongDataSource { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        LongDataSource = new List<SelectedItem>
        {
            new SelectedItem ("1", "特别甜的东瓜(特别甜的东瓜)"),
            new SelectedItem ("2", "特别甜的西瓜(特别甜的西瓜)"),
            new SelectedItem ("3", "特别甜的南瓜(特别甜的南瓜)"),
            new SelectedItem ("4", "特别甜的傻瓜(特别甜的傻瓜)"),
            new SelectedItem ("5", "特别甜的金瓜(特别甜的金瓜)"),
            new SelectedItem ("6", "特别甜的木瓜(特别甜的木瓜)"),
            new SelectedItem ("7", "特别甜的水瓜(特别甜的水瓜)"),
            new SelectedItem ("8", "特别甜的火瓜(特别甜的火瓜)"),
            new SelectedItem ("9", "特别甜的土瓜(特别甜的土瓜)"),
        };

        LongItems = GenerateDataSource(LongDataSource);
    }

    private static void OnClickButton()
    {
        //do someting ...
        //your code
    }

    private string SelectedLongItemsValue3 { get; set; } = "";

    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();

}

Cascading bindings

The second drop-down box dynamically populates the content by selecting the different options for the first drop-down box.

Demo

In this example, clicking on the first drop-down box allows you to get the data source for the second multi-box by asynchronous means, and after assigning, call StateHasChanged to re-render the multi-box

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <Select TValue="string" Items="@Items2" OnSelectedItemChanged="@OnCascadeBindSelectClick" />
    </div>
    <div class="col-12 col-sm-6">
        <MultiSelect TValue="string" Items="@Items1" />
    </div>
</div>

@code {
    private List<SelectedItem> Items1 { get; set; } = new List<SelectedItem>();

    private readonly List<SelectedItem> Items2 = new SelectedItem[]
    {
        new SelectedItem ("", "请选择 ..."),
        new SelectedItem ("Beijing", "北京") { Active = true },
        new SelectedItem ("Shanghai", "上海"),
        new SelectedItem ("Hangzhou", "杭州")
    }.ToList();

    /// <summary>
    /// 级联绑定菜单
    /// </summary>
    /// <param name="item"></param>
    private async Task OnCascadeBindSelectClick(SelectedItem item)
    {
        // 模拟异步获取数据源
        await Task.Delay(100);
        if (item.Value == "Beijing")
        {
            Items1 = new List<SelectedItem>(new[]
            {
                new SelectedItem("1","朝阳区") { Active = true },
                new SelectedItem("2","海淀区")
            });
        }
        else if (item.Value == "Shanghai")
        {
            Items1 = new List<SelectedItem>(new[]
            {
                new SelectedItem("1","静安区"),
                new SelectedItem("2","黄浦区") {Active = true },
            });
        }
        else
        {
            Items1 = new List<SelectedItem>();
        }
        StateHasChanged();
    }
}

Item Template

customer item template by set ItemTemplate

Demo

<div class="row">
    <div class="col-12 col-sm-6">
        <MultiSelect TValue="string" Items="@TemplateItems">
            <ItemTemplate>
                <div class="mul-select-item">
                    <i class="fa-solid fa-font-awesome"></i>
                    <span>@context.Text</span>
                    <i class="fa-solid fa-font-awesome"></i>
                </div>
            </ItemTemplate>
        </MultiSelect>
    </div>
</div>

@code {
    [NotNull]
    private IEnumerable<SelectedItem>? TemplateItems { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        TemplateItems = GenerateItems();
    }

    private static List<SelectedItem> GenerateItems() => new()
    {
        new ("Beijing", "北京"),
        new ("Shanghai", "上海"),
        new ("Guangzhou", "广州"),
        new ("Shenzhen", "深圳"),
        new ("Chengdu", "成都"),
        new ("Wuhan", "武汉"),
        new ("Dalian", "大连"),
        new ("Hangzhou", "杭州"),
        new ("Lianyungang", "连云港")
    };
}

Set IsPopover to true, use popover render UI prevent The dropdown menu cannot be fully displayed because the parent container is set to overflow: hidden

Demo

<div class="row">
    <div class="col-12 col-sm-6 overflow-hidden">
        <MultiSelect TValue="string" Items="@Items" IsPopover="true" ShowSearch="true" ShowToolbar />
    </div>
</div>

@code {
    [NotNull]
    private List<SelectedItem>? Items { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        Items = GenerateItems();
    }

    private static List<SelectedItem> GenerateItems() => new()
    {
        new ("Beijing", "北京"),
        new ("Shanghai", "上海"),
        new ("Guangzhou", "广州"),
        new ("Shenzhen", "深圳"),
        new ("Chengdu", "成都"),
        new ("Wuhan", "武汉"),
        new ("Dalian", "大连"),
        new ("Hangzhou", "杭州"),
        new ("Lianyungang", "连云港")
    };
}

MultiSelect

When you have multiple options, use the drop-down menu to present and provide a search for multiple choices

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Event

Bootstrap Blazor Component library updated to 7.4.4-beta01