Components / Multi Select

Multi Select

A presentational skin over the brain Combobox in Multiple mode: all filtering, keyboard, and ARIA come from the primitive unchanged. The trigger renders removable chips that collapse past MaxDisplayChips to a "+N more" badge. Type to filter and pick several below. This preview is the real component running in WebAssembly.

Examples

Blazor Svelte

2 selected: Blazor, Svelte

razor

<ZitsMultiSelect TItem="string" Items="_options"
                 @bind-Value="_selected" Placeholder="Select frameworks" />

@code {
    IReadOnlyList<string> _options = new[] { "Blazor", "React", "Vue" };
    IReadOnlyList<string> _selected = new[] { "Blazor" };
}

Installation

Terminal bash

navius add multi-select

API reference

ZitsMultiSelect<TItem>:

Prop	Type	Default
Items	IReadOnlyList<TItem>	empty
Value	IReadOnlyList<TItem>	empty
ValueChanged	EventCallback<IReadOnlyList<TItem>>	-
DefaultValue	IReadOnlyList<TItem>	empty
ItemToString	Func<TItem, string>?	ToString()
Placeholder	string?	null
MaxDisplayChips	int	3
Searchable	bool	true
ClearButton	bool	false
ShowSelectedCount	bool	false
Side / Align	string	"bottom" / "start"