Still 2024 and select multiple is still not working. I am using Blazor and .Net core 8. I had to make one from scratch and I share it for anyone who has the same problem. This is a very basic design, so you can modify to suit your needs.
<div class="dropdown">
<button class="dropdown-toggle mr-4" data-toggle="dropdown" type="button" @onclick="() => show = !show "
aria-haspopup="true" aria-expanded="false">
@Tip
</button>
@if (ListLabels != null){
<div class="dropdown-menu @(show? "show":"")">
<div class="form-group row">
@for (int i = 0; i < ListLabels.Length; i++){
<div class="@GetCol(NumCols)">
<label class="form-check-label">
<input class="form-check-input"
type="checkbox"
checked="@list_values[i]"
@bind-value="list_values[i]">
@ListLabels[i]
</label>
</div>
}
</div>
</div>
}
</div>
@code
{
[Parameter]
public string Tip { get; set; } = string.Empty;
[Parameter]
public int NumCols { get; set; } = 1;
[Parameter]
public string[] ListLabels { get; set; }
bool[] list_values = null;
[Parameter]
public bool[] ListValues
{
get => list_values;
set
{
list_values = value;
}
}
bool show = false;
string GetCol(int value)
{
switch (value){
case 1: return "col-12";
case 2: return "col-6";
case 3: return "col-4";
case 4: return "col-3";
case 6: return "col-2";
case 12: return "col-1";
default: return "col-12";
}
}
protected override void OnParametersSet()
{
if (ListLabels != null){
if (list_values == null || list_values.Length != ListLabels.Length){
list_values = new bool[ListLabels.Length];
}
}
}
}
To use it is very simple
<InputMultiSelector ListLabels="list_labels" ListValues="list_checks" Tip="Choose your pizza" NumCols="3"/>
@code
{
bool[] list_checks = new bool[6] { false, true, true, false, false, true };
string[] list_labels = new string[6] { "cheese", "tomatoes", "mozarella", "mushrooms", "pepperoni", "onions" };
}