Combobox

A free-text autocomplete field — a text input with a suggestion listbox. Unlike Select (a closed choice), the value is arbitrary text and the options are just suggestions. ↓/↑ to highlight, Enter to pick, Esc to close. Composes Input + Popup.

Client-side options

Filtered by substring. Value: —

Fruit

<script>
  import { Combobox } from '@spaethtech/svelte-ui';
  const FRUITS = ['Apple', 'Banana', 'Cherry', /* … */];
  let fruit = $state('');
</script>

<Combobox bind:value={fruit} options={FRUITS} label="Fruit" placeholder="Type to filter…" />

Async suggestions

Debounced suggest(query) (250ms simulated). Value: —

City

Suggestions load as you type.

<script>
  import { Combobox } from '@spaethtech/svelte-ui';
  let city = $state('');
  const suggest = async (q) => {
    const res = await fetch('/api/cities?q=' + encodeURIComponent(q));
    return res.json(); // string[]
  };
</script>

<Combobox bind:value={city} {suggest} minChars={1} label="City" />

Combobox

Client-side options

Async suggestions

Sizes