Autocomplete

Overview

Autocomplete renders NaviusAutocomplete, the headless compound that owns the editable input, virtual focus via aria-activedescendant, the anchored listbox, and outside-dismiss, and layers the field, popup, and item Tailwind classes on top. The component composes NaviusAutocompleteInput, NaviusAutocompletePortal, NaviusAutocompletePositioner, NaviusAutocompletePopup, NaviusAutocompleteList, NaviusAutocompleteEmpty, and NaviusAutocompleteItem as a fixed internal tree; it has no separate consumer-facing parts.

Install

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

Usage

@using Zits.Ui.Components

<ZitsAutocomplete 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

Autocomplete is a single control with no part tree of its own. The wrapper hardcodes NaviusAutocomplete’s TItem to string, so item values are plain strings rather than an arbitrary generic type. It adds:

Prop	Type	Default	Description
Items	IReadOnlyList<string>	[]	The suggestion list.
Value	string?	null	Controlled value. Bind with @bind-Value.
ValueChanged	EventCallback<string?>	-	Fired on selection/edit.
Placeholder	string?	null	Input placeholder text.
Side	string	"bottom"	Popup side relative to the input.
Align	string	"start"	Popup alignment relative to the input.

Styling surface

Attributes on ZitsAutocomplete is merged onto the root wrapper div via Cn.Class; there is no per-part class override surface beyond that root.

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

Data attribute hooks

Part	Attribute	Description
Item	data-highlighted	Present on the virtually-focused suggestion, emitted by NaviusAutocompleteItem.
Item	data-selected	Present on the currently selected suggestion, emitted by NaviusAutocompleteItem.

Underlying primitives

• NaviusAutocomplete