Autocomplete

An input that suggests options as you type.

<script lang="ts">
import { Autocomplete } from "coss-svelte";
</script>

<Autocomplete
	aria-label="Search items"
	placeholder="Search items…"
	options={[
		"Apple",
		"Banana",
		"Orange",
		"Grape",
		"Strawberry",
		"Mango",
		"Pineapple",
		"Kiwi",
		"Peach",
		"Pear",
	]}
/>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Autocomplete, AutocompleteCollection, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompleteSeparator, AutocompleteStatus } from "coss-svelte";

Anatomy

Autocomplete
AutocompleteCollection
AutocompleteEmpty
AutocompleteGroup
AutocompleteGroupLabel
AutocompleteInput
AutocompleteItem
AutocompleteList
AutocompletePopup
AutocompleteSeparator
AutocompleteStatus

API Reference

Autocomplete

An input that suggests options as you type.

Signatures

{ type?: "single"; value?: string; onValueChange?: OnChangeFn<string> }{ type: "multiple"; value?: string[]; onValueChange?: OnChangeFn<string[]> }

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	`"single"`	Behavior, selection, or HTML type passed to the underlying control.
`bind:value`	`string \| string[]`	`""`	Current value for the component. Bind with `bind:value` when supported.
`bind:open`	`boolean`	`false`	Open state for the popup or disclosure. Bind with `bind:open`.
`options`	`Option[]`	`[]`	Options rendered by the component's built-in fallback composition.
`placeholder`	`string`	`"Search"`	Placeholder text shown by the built-in input.

children : Snippet<[]>

Inherits from Bits UI Combobox.Root and Bits UI Combobox.Input.

AutocompleteCollection

Connects repeated items to the parent collection state.

children : Snippet<[]>

Inherits from Svelte component attributes.

AutocompleteEmpty

Renders fallback content when the collection has no results.

children : Snippet<[]>

Inherits from Svelte component attributes.

AutocompleteGroup

Groups related items inside the parent component.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI Combobox.Group.

AutocompleteGroupLabel

Labels a group of related items.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI Combobox.GroupHeading.

AutocompleteInput

Renders the input field for the parent component.

Prop	Type	Default	Description
`showTrigger`	`boolean`	`false`	Shows a trigger button beside the input.
`triggerProps`	`(Omit<{}, "child" \| "children"> & { child?: Snippet<[{ props: Record<string, unknown> }]> \| undefined; children?: Snippet<[]> \| undefined; style?: StyleProperties \| string \| null \| undefined; ref?: HTMLElement \| null \| undefined } & Without<BitsPrimitiveButtonAttributes, SelectTriggerPropsWithoutHTML>)`	`{}`	Props forwarded to the optional trigger button.