Components / Autocomplete

Autocomplete

An editable input with an anchored, filterable list of suggestions: role="combobox" with aria-activedescendant, so focus stays in the input while Arrow keys move a virtual highlight. Filtering, anchoring, and outside-dismiss come from the brain; this preview is the real component running in WebAssembly.

Examples

Selected: none

razor

<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" };
}

Installation

Terminal bash

navius add autocomplete

API reference

Prop	Type	Default
Items	IReadOnlyList<string>	[]
Value	string?	-
ValueChanged	EventCallback<string?>	-
Placeholder	string?	-
Side	string	"bottom"
Align	string	"start"