Usage

Composable combobox engine providing a bare input, search, keyboard navigation, and a styled result dropdown. It renders no input wrapper, border, or selected-value token. Typeahead and Tokenizer compose it for standard fields.

import { BaseTypeahead } from '@astryx-vue/core/Typeahead'

The port keeps the same division of work. BaseTypeahead owns the input, the search source, the keyboard model, and the dropdown. The caller owns the field label, the description, the status message, and the selected-value token, and puts them around the engine. label here is only the input's accessible name, so omit it when an outside <label for> already names the input.

Anatomy

Element	Description
Input	Bare combobox input. The caller supplies its visible field chrome and accessible name.
Loading status	Named Spinner shown beside the input while an asynchronous source is pending, unless a composed owner takes over the busy indicator lane.
Dropdown	Anchored listbox surface containing current search or bootstrap results.
Empty state	Disabled listbox option shown after a completed search returns no results.
Result group heading	Visible label for a group of result options.
Result row	Option wrapper that owns highlight, selection, pointer, and keyboard behavior.
Default item content	TypeaheadItem label and optional supporting content rendered inside a result row.
Caller-rendered item content	Caller content supplied through renderItem or item.element inside the stable result row.
Selected result state	Selected row weight and trailing check shown when a result matches value.

Best practices

Guidance	Practice
Do	Use Typeahead or Tokenizer for standard fields; they wrap BaseTypeahead with input chrome and selected-value rendering it intentionally omits.
Do	Provide your own visible label or aria-label and custom input wrapper so the bare combobox has an accessible name, focus treatment, border, and layout.
Do	Pass anchorRef pointing to your wrapper so the dropdown positions against your custom input chrome, not just the bare input element.
Avoid	Expect input chrome or selected-value rendering. BaseTypeahead is an engine; the caller owns those visible parts.
Avoid	Use BaseTypeahead when Typeahead or Tokenizer would suffice; the extra wrapper and styling work is only justified for truly custom compositions.
Avoid	Treat Escape as cancellation of pending source work. It hides the current popup, but a late response can reopen it.

Examples

Common configurations, variations, and states.

BaseTypeahead

A custom result renderer that adds supporting metadata while BaseTypeahead retains option semantics and keyboard behavior.