Combobox

Overview

Combobox is a single generic component (ZitsCombobox<TItem>) that composes the headless NaviusCombobox compound, which owns value-selection: the input filters, but the committed value is tracked separately from the filter text. It is single-select by default; setting Multiple with @bind-Values switches to multi-select chips. The styled layer supplies the item template (with a check ItemIndicator), the chip template, the input/list/option classes, and the floating popup panel.

Install

navius add combobox --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsCombobox Items="_frameworks" @bind-Value="_value" Placeholder="Select framework..." />

@code {
    private string? _value;
    private static readonly string[] _frameworks =
        { "Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro", "Blazor" };
}

Parts and props

Combobox is a single control with no separate part components; the item/chip templates and popup are all rendered internally. ItemToString passes through to the composed NaviusCombobox unchanged. The styled wrapper adds:

Prop	Type	Default	Description
Items	IReadOnlyList<TItem>	[]	The candidate list.
Multiple	bool	false	Switches from single-select (Value/ValueChanged) to multi-select chips (Values/ValuesChanged).
Value / ValueChanged	TItem? / EventCallback<TItem?>	n/a	Single-select committed value.
Values / ValuesChanged	IReadOnlyList<TItem> / EventCallback<IReadOnlyList<TItem>>	[]	Multi-select committed values.
Placeholder	string?	null	Input placeholder.
Side	string	"bottom"	Popup side, forwarded to the positioner.
Align	string	"start"	Popup alignment, forwarded to the positioner.

Styling surface

Attributes on ZitsCombobox is applied to the outer wrapper only (via Cn.Class); the input, popup, and option classes are fixed preset strings, not exposed as overridable parameters.

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

Data attribute hooks

Part	Attribute	Description
Item / Option	data-highlighted, data-selected	Item state hooks emitted by the composed NaviusComboboxItem primitive, styling the hovered/selected row.
Popup	data-open, data-closed	Open-state hooks driving the enter/exit Tailwind animation classes, emitted by the composed NaviusComboboxPopup primitive.

Underlying primitives

• NaviusCombobox