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.

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

Select countries with overflow indicator (+N more).

Multi Select without the Select All option.

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.

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

Fixed width container (w-72)

Wider container (500px)

Multi Select in disabled state with pre-selected values.

TypeScript

Example of Multi Select in a form layout.

Skills

Select all programming languages you know.

Preferred Frameworks

Choose your preferred frameworks.

Component parameters and their types.

Prop	Type	Default	Description
Items	IEnumerable<TItem>	—	The list of items to display.
Values	IEnumerable<TValue>?	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.