MultipleSelector.razor

<div class="multiple-selector">
    <ul class="selectable-ul">
        @foreach (var item in NoSelected)
        {
            <li @onclick="@(() => Select(item))">@item.Value</li>
        }
    </ul>
    <div class="multiple-selector-buttons">
        <button type="button" @onclick="SelectAll">>></button>
        <button type="button" @onclick="DeselectAll">@removeAllText</button>
    </div>
    <ul class="selectable-ul">
        @foreach (var item in Selected)
        {
            <li @onclick="@(() => Deselect(item))">@item.Value</li>
        }
    </ul>
</div>

@code {
    private string removeAllText = "<<";
    [Parameter]
    public List<MultipleSelectorModel> NoSelected { get; set; } = new List<MultipleSelectorModel>();
    [Parameter]
    public List<MultipleSelectorModel> Selected { get; set; } = new List<MultipleSelectorModel>();

    private void Select(MultipleSelectorModel item)
    {
        NoSelected.Remove(item);
        Selected.Add(item);
    }

    private void Deselect(MultipleSelectorModel item)
    {
        Selected.Remove(item);
        NoSelected.Add(item);
    }

    private void SelectAll()
    {
        Selected.AddRange(NoSelected);
        NoSelected.Clear();
    }

    private void DeselectAll()
    {
        NoSelected.AddRange(Selected);
        Selected.Clear();
    }
}