A shadcn/ui inspired Blazor component library

Installation

Add the MultiSelect component using the CLI:

shadcnblazor component add multiselect

Features

Multi-value selection with toggle behaviour (stays open after each pick)

Controlled (@bind-Values, ValuesChanged)

Two option modes: Items or declarative children

Optional search input with real-time filtering (Search)

Optional Clear button to reset all selections (ClearButton)

Full keyboard support (arrows, Home/End, Space to toggle, Escape to close, Tab)

ARIA-compliant multiselectable listbox semantics (aria-multiselectable, aria-checked)

Typeahead navigation (single-character jump)

Disabled support (trigger + per-item)

Configurable display text (up to N selected, then "+X more")

View Source

Examples

Usage

The MultiSelect component displays a dropdown for choosing multiple values from a list. Use Values and ValuesChanged (or @bind-Values) for two-way binding. The dropdown stays open after each selection — click outside or press Escape to close. Requires PopoverProvider in your layout.

Selected: dotnet, react

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<div class="flex flex-col gap-4 w-full">
    <MultiSelect T="string"
                 Label="Frameworks"
                 @bind-Values="_selected"
                 Items="@_options"
                 Placeholder="Select frameworks" />

    <p class="mt-3 text-sm text-muted-foreground">
        Selected: @((_selected.Count > 0) ? string.Join(", ", _selected) : "none")
    </p>
</div>

@code {
    private IReadOnlyList<string> _selected = ["dotnet", "react"];

    private readonly SelectOption<string>[] _options =
    [
        new("react", "React"),
        new("svelte", "Svelte"),
        new("vue", "Vue"),
        new("dotnet", ".NET / Blazor"),
        new("node", "Node.js"),
        new("rails", "Rails (Disabled)", Disabled: true),
    ];
}

Search & Clear

Enable Search to add a filter input at the top of the dropdown. Enable ClearButton to add a divider and Clear button at the bottom that resets all selected values.

Selected: none

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<div class="flex flex-col gap-4">
    <MultiSelect T="string"
                 Label="Technologies"
                 @bind-Values="_selected"
                 Items="@_options"
                 Placeholder="Select technologies"
                 Search="true"
                 ClearButton="true" />

    <p class="text-sm text-muted-foreground">
        Selected: @((_selected.Count > 0) ? string.Join(", ", _selected) : "none")
    </p>
</div>

@code {
    private IReadOnlyList<string> _selected = [];

    private readonly SelectOption<string>[] _options =
    [
        new("blazor", ".NET / Blazor"),
        new("csharp", "C#"),
        new("aspnet", "ASP.NET Core"),
        new("ef", "Entity Framework"),
        new("signalr", "SignalR"),
        new("grpc", "gRPC"),
        new("azure", "Azure"),
        new("docker", "Docker"),
        new("kubernetes", "Kubernetes"),
        new("react", "React"),
        new("typescript", "TypeScript"),
    ];
}

API Reference

MultiSelect`1

Dropdown select component for choosing multiple values from a list of options.

Properties

Name	Type	Description
`AdditionalAttributes`	`Dictionary<string, Object>`
`ChildContent`	`RenderFragment`
`Class`	`string`
`ClearButton`	`bool`	When true, appends a Clear action node at the bottom of the list that resets all selected values.
`Disabled`	`bool`
`Items`	`IEnumerable<SelectOption<T>>`
`Label`	`string`	Optional label displayed at the top of the dropdown content and used as the trigger aria-label.
`LockScroll`	`bool`	When true, body scroll is locked while the popover is open.
`MaxDisplayedValues`	`int`	Maximum number of values to display before showing "+ X more".
`MaxVisibleItems`	`Nullable<int>`
`Placeholder`	`string`	Placeholder text shown when no values are selected.
`PopoverFitContent`	`bool`	When true, the popover expands to fit the width of its option content instead of matching the trigger width.
`RenderItem`	`RenderFragment<SelectOption<T>>`
`Search`	`bool`	When true, shows a search input at the top of the dropdown that focuses on open and keeps focus during keyboard nav.
`Size`	`Size`	Size variant applied to the trigger.
`TriggerClass`	`string`	Additional CSS classes applied to the trigger element.
`Values`	`IReadOnlyList<T>`	Currently selected values.
`ValuesChanged`	`EventCallback<IReadOnlyList<T>>`	Callback invoked when the selected values change.

Events

Name	Type	Description
`ValuesChanged`	`EventCallback<IReadOnlyList<T>>`	Callback invoked when the selected values change.

Methods

Method	Returns	Description
`DisposeAsync`	`ValueTask`
`Equals`	`bool`
`GetHashCode`	`int`
`GetType`	`Type`
`SetParametersAsync`	`Task`
`ToString`	`string`

Mobile support for API reference coming soon.