Multi Select

A searchable multi-select component that allows selecting multiple options with checkbox indicators and tag display.

Basic Multi Select

Select multiple programming languages. Selected items appear as tags.

Tech Stack Selector

Select your tech stack. Uses ShowSelectAll and MaxDisplayTags to control tag display.

Country Selector

Select countries with overflow indicator (+N more).

Without Select All

Multi Select without the Select All option.

Prevent Auto Close

The dropdown can be configured to stay open when clicking outside.

With AutoClose="false", the dropdown stays open when you click outside. Use the Close button or press Escape to close it.

Match Trigger Width

With MatchTriggerWidth="true", the dropdown automatically matches the width of the trigger element.

Fixed width container (w-72)

Wider container (500px)

Disabled State

Multi Select in disabled state with pre-selected values.

TypeScript

Form Integration

Example of Multi Select in a form layout.

Skills

Select all programming languages you know.

Preferred Frameworks

Choose your preferred frameworks.

Infinite Scroll

Load items in batches as the user scrolls to the bottom of the list.

10 / 50 items loaded

Open the dropdown and scroll to the bottom to trigger OnLoadMore. A spinner appears during the simulated 600 ms fetch. Once all 50 items are loaded, EndOfListMessage is shown instead.

Server-Side Search

Use SearchQueryChanged to drive filtering externally. The built-in text filter is bypassed and the consumer controls the displayed items.

15 / 15 matches

The search input fires SearchQueryChanged on every keystroke. A 300 ms simulated delay mimics a server round-trip. Because SearchQueryChanged has a delegate, the component's built-in text filter is completely bypassed — the consumer decides what Items to show. On close, the callback fires with an empty string so the consumer can reload the default list.

API Reference

Component parameters and their types.

Prop	Type	Default	Description
Items	IEnumerable<TItem>	—	The list of items to display.
Values	IEnumerable<string>?	null	Selected values. Use @bind-Values for two-way binding.
ValueSelector	Func<TItem, TValue>	—	Function to get the value from an item.
DisplaySelector	Func<TItem, string>	—	Function to get the display label from an item.
Placeholder	string?	null	Placeholder text when nothing is selected.
SearchPlaceholder	string?	null	Placeholder text in the search input.
EmptyMessage	string?	null	Message shown when no items match the search.
ShowSelectAll	bool	false	Whether to show a "Select All" option.
SelectAllLabel	string	"Select All"	Label for the select-all option.
MaxDisplayTags	int	3	Maximum number of tags to show before "+N more".
AutoClose	bool	true	Whether the dropdown closes when clicking outside.
MatchTriggerWidth	bool	false	Whether the dropdown matches the trigger's width.
PopoverWidth	string?	null	CSS width class for the dropdown (e.g. "w-[300px]").
Disabled	bool	false	Whether the component is disabled.
Class	string?	null	Additional CSS classes for the trigger element.
SearchQueryChanged	EventCallback<string>	null	Invoked on every search keystroke. When set, bypasses the internal filter — consumer controls Items.
OnLoadMore	EventCallback	—	Invoked when the user scrolls near the bottom of the list. Use to append additional items.
IsLoading	bool	false	Shows a spinner at the bottom of the list while the next batch is loading.
EndOfListMessage	string?	null	Message shown at the bottom when all items have been loaded. Hidden when null or empty.

Previous Motion Next Native Select