Skip to content
LIST SELECTION · FREE

MultiSelect

Choose several items from a drop-down, with Select all and Clear.

Choose several items from a compact drop-down. MultiSelect shows check boxes, summarizes the selection in the field and includes Select all and Clear.

Why it helps

  • Several choices, one compact field
  • Select all and Clear built in
  • Summary shown in the trigger

Where it fits

  • Team and tag assignment
  • Filter values
  • Permissions
MultiSelect control in a RayCraft page

Example

<MultiSelect TValue="string" Label="Tags" Items="_tags" @bind-Values="_selected" HelperText="Pick any number." />
<span>Selected: @(_selected.Count == 0 ? "none" : string.Join(", ", _selected))</span>

@code {
    private readonly string[] _tags = ["Blazor", "SASS", "Accessibility", "Localization", "Charts", "Forms"];
    private IReadOnlyCollection<string> _selected = new List<string> { "Blazor" };
}

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.

All controls ยท Documentation