KQ-492 · TYPEAHEAD/FIELD

Typeahead Field

A field that finishes the word for you. The best match's remainder sits in grey just past the caret, and accepting it wipes the grey copy left to right over durations.base to reveal the committed ink underneath, so the completion is seen becoming real rather than swapped for real. Beneath, matches cascade() in with the typed span emphasised and a single marker rides between them on snap, carried by one layoutId; the input never loses focus, so ArrowUp and ArrowDown move the marker, Tab or ArrowRight takes the completion, Enter picks the marked row and Escape closes the list.

KQ-492 · TYPEAHEAD/FIELD

Fieldline dispatch — type a letter or two, then Tab to take the completion.

Destination

Routing to no destination yet

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/typeahead-field

Props

suggestions: string[]; default —; The vocabulary to complete from; prefix matches are ranked above matches found inside the word.
value / defaultValue: string; default —; The typed text — controlled or initial.
onValueChange: (value: string) => void; default —; Fires on typing and on accept.
onAccept: (value: string) => void; default —; Fires when a suggestion is accepted, by completion or by pick.
maxItems: number; default 6; Suggestions shown under the field.
label: string; default —; Visible label above the box.

Prop	Type	Default	Description
suggestions	string[]	—	The vocabulary to complete from; prefix matches are ranked above matches found inside the word.
value / defaultValue	string	—	The typed text — controlled or initial.
onValueChange	(value: string) => void	—	Fires on typing and on accept.
onAccept	(value: string) => void	—	Fires when a suggestion is accepted, by completion or by pick.
maxItems	number	6	Suggestions shown under the field.
label	string	—	Visible label above the box.