Autocomplete
A free-text field with a portalled panel of matching suggestions — any typed value is valid; the panel only ever helps finish it faster.
Preview
<script lang="ts">
import { Autocomplete } from "fancy-ui-svelte";
const cities = ["Paris", "Parma", "Prague", "London", "Lisbon", "Lyon"];
let city = $state("");
</script>
<Autocomplete suggestions={cities} bind:value={city} label="City" placeholder="Type a city…" />Installation
Usage
<script lang="ts">
import { Autocomplete } from 'fancy-ui-svelte';
</script>
<Autocomplete />Examples
Basic Usage
A city field with six candidate suggestions.
<script lang="ts">
import { Autocomplete } from "$lib/fancy-ui/autocomplete";
const cities = ["Paris", "Parma", "Prague", "London", "Lisbon", "Lyon"];
let city = $state("");
</script>
<Autocomplete suggestions={cities} bind:value={city} label="City" placeholder="Type a city…" />Min Length
Suggestions stay hidden until the third character.
<script lang="ts">
// Suggestions stay hidden until the third character — useful for a long
// candidate list where a one- or two-letter query would match too much
// to be a useful shortcut.
import { Autocomplete } from "$lib/fancy-ui/autocomplete";
const cities = ["Paris", "Parma", "Prague", "London", "Lisbon", "Lyon"];
let city = $state("");
</script>
<Autocomplete
suggestions={cities}
bind:value={city}
minLength={3}
label="City (3+ characters)"
placeholder="Type at least 3 characters…"
/>With FormField
Wrapped in FormField — required and the error message driven by context.
<script lang="ts">
// FormField supplies controlId, aria-describedby and aria-invalid to
// Autocomplete through context — no id or invalid prop needed here.
import { FormField } from "$lib/fancy-ui/form-field";
import { Autocomplete } from "$lib/fancy-ui/autocomplete";
const cities = ["Paris", "Parma", "Prague", "London", "Lisbon", "Lyon"];
let city = $state("");
</script>
<FormField
label="City"
required
error={city ? undefined : "Enter a city before continuing."}
class="w-full max-w-sm"
>
<Autocomplete suggestions={cities} bind:value={city} />
</FormField>Props
| Prop | Type | Default | Description |
|---|---|---|---|
suggestions * | string[] | - | Candidate strings offered as the user types. |
value | string | "" | The free-text value, bindable. |
onValueChange | (value: string) => void | - | Called with the new value on every keystroke. |
onSelect | (suggestion: string) => void | - | Called only when a suggestion is committed via click or Enter — never from plain typing. |
placeholder | string | - | Shown while the field is empty. |
disabled | boolean | false | Blocks focus and typing; excluded from form submission. |
required | boolean | false | Native required. |
invalid | boolean | false | Drives the error border and aria-invalid. |
id | string | - | Element id. |
name | string | - | Native name, read on form submission. |
label | string | - | Accessible name — for a control with no visible Label next to it. |
minLength | number | 1 | Characters required before suggestions appear. |
maxSuggestions | number | 8 | Maximum number of suggestions shown at once. |
class | string | - | Additional CSS classes. |
ref | HTMLInputElement | null | null | Bindable reference to the input element. |
Links
Related components
Checkbox
A tri-look checkbox — unchecked, checked, indeterminate and disabled — built on a native checkbox input
Combobox
A single-choice text field over a closed set of options — typing filters a portalled listbox, and a value outside the list can never be selected.
DatePicker
A field that opens a floating month grid, with full keyboard navigation (arrow keys across days, Page Up/Down across months, Shift for years), min/max and per-day disabling, and a fully localized accessible name on every day cell.