Svelte Component


Displays a list of suggested options.

import { Autocomplete } from '@skeletonlabs/skeleton';
import type { AutocompleteOption } from '@skeletonlabs/skeleton';
Source Page Source Transitions


The Autocomplete component does not contain its own input by default. Instead, by using input binding paired with an on:selection event, you may utilize this component alongside any type of input that takes in suggested values.

Data Structure

You may optionally append keywords to provide additional search terms. As well as meta to provide arbitrary data - which is not utilizing for filtering. All data option data is returned by on:selection, including these.

const flavorOptions: AutocompleteOption<string>[] = [
	{ ..., keywords: 'mix, strawberry, chocolate, vanilla' },
	{ ..., meta: { healthy: false } },

Allowed Options

Provide a list of values you wish to allow. Only options with a matching value will be displayed.

Allowed [neapolitan, pineapple, peach]

Denied Options

Provide a list of values you wish to deny. Denied options will be excluded from the list.

Denied [vanilla, chocolate]

Custom Filter

Provide a custom filter function using the prop filter.

Input Chip

We've provided a demo of using Autocomplete alongside a Skeleton Input Chip component below.


We've provide a demo of using Autocomplete alongside a Skeleton popup utility below. See Popups for more details.

Browser Support

For Firefox, when wrapping the Autocomplete component in a parent element that uses overflow styling, make sure you add tabindex="-1". By doing this, it will ensure that tab navigation selects the children within, instead of the wrapping element itself.