Multi Select

Overview

MultiSelect renders NaviusCombobox with Multiple="true", the same brain used by Combobox. All state, filtering, keyboard, and ARIA come from the primitive unchanged; this wrapper only presets Multiple and renders the trigger as removable chips that collapse past MaxDisplayChips into a “+N more” badge. The wrapper owns its own selection mirror (_current, seeded from DefaultValue, only adopting Value when the consumer actually supplied it), the same discipline as ZitsCalendar, so the chip loop always has the live selection to slice for the overflow badge.

Install

navius add multi-select --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

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

@code {
    private IReadOnlyList<string> _selected = Array.Empty<string>();
    private static readonly string[] _frameworks =
        { "Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro", "Blazor" };
}

Parts and props

MultiSelect is a single generic control (TItem) with no separate part tree. ItemToString and Placeholder pass through as-is to drive both the chips and the underlying combobox. The styled wrapper adds:

Prop	Type	Default	Description
Items	IReadOnlyList<TItem>	[]	The option list.
Value	IReadOnlyList<TItem>	[]	Controlled selection. Bind with @bind-Value; forwarded to the primitive only when set.
ValueChanged	EventCallback<IReadOnlyList<TItem>>	-	Fired when the selection changes.
DefaultValue	IReadOnlyList<TItem>	[]	Uncontrolled initial selection.
MaxDisplayChips	int	3	Chips beyond this collapse to a “+N more” badge.
Searchable	bool	true	When false, the input is read-only: a dropdown-only multiselect with no typeahead filter.
ClearButton	bool	false	Show a clear-all button once there is a selection.
ShowSelectedCount	bool	false	Append an “N selected” badge after the chips.
Side	string	"bottom"	Popup side relative to the trigger.
Align	string	"start"	Popup alignment relative to the trigger.

Styling surface

Attributes on ZitsMultiSelect is merged onto the root wrapper div via Cn.Class; the chip, badge, and popup classes are internal to the composition and not independently overridable per-instance.

Parameter	Values
Side	top · bottom · left · right
Align	start · center · end

Data attribute hooks

Part	Attribute	Description
Option	data-highlighted	Present on the virtually-focused option, emitted by NaviusComboboxItem.
Option	data-selected	Present on a selected option, emitted by NaviusComboboxItem.
Popup	data-open / data-closed	Animation-in/out state, emitted by NaviusComboboxPopup.

Underlying primitives

• NaviusCombobox