Typeahead @astryx-svelte/core v0.3.0 · Typeahead
Usage
A searchable input for selecting a single item from a large or dynamic dataset. Results appear as the user types, with support for async data sources, debounced search, and custom item rendering. Use it when the option list is too large for a Selector dropdown.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Provide descriptive placeholder text that hints at what users can search for. |
| Do | Show suggestions on focus when users benefit from seeing popular or recent options before typing. |
| Do | Add a search delay for remote data sources to avoid excessive network requests. |
| Do | Use inside InputGroup when the typeahead needs a single-line prefix or suffix addon. |
| Don't | Use for short, static option lists; use Selector for better discoverability. |
| Don't | Use for multi-selection; use Tokenizer instead. |
| Don't | Place multiple Typeaheads adjacent to each other without clear labels differentiating them. |
| Don't | Wrap a disabled Typeahead in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead. |
Examples
Common configurations, variations, and states.Typeahead — Limited Results
Typeahead with a capped dropdown showing at most three results.
Typeahead — Search Field
Search input with icon and suggestions on focus.
Typeahead — With Helper Text
Typeahead with a description below the label.
Typeahead — With Validation
Typeahead with an error validation message.