Combobox

An input combined with a list of predefined items to select.

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

<Combobox
	aria-label="Select a item"
	placeholder="Select a item…"
	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 { Combobox, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxSeparator, ComboboxTrigger, ComboboxValue } from "coss-svelte";

Anatomy

Combobox
ComboboxClear
ComboboxCollection
ComboboxEmpty
ComboboxGroup
ComboboxGroupLabel
ComboboxInput
ComboboxItem
ComboboxList
ComboboxPopup
ComboboxSeparator
ComboboxTrigger
ComboboxValue

API Reference

Combobox

An input combined with a list of predefined items to select.

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`	`"Choose"`	Placeholder text shown by the built-in input.

children : Snippet<[]>

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

ComboboxClear

Renders a control that clears the current value.

children : Snippet<[]>

Inherits from Svelte component attributes.

ComboboxCollection

Connects repeated items to the parent collection state.

children : Snippet<[]>

Inherits from Svelte component attributes.

ComboboxEmpty

Renders fallback content when the collection has no results.

children : Snippet<[]>

Inherits from Svelte component attributes.

ComboboxGroup

Groups related items inside the parent component.

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

Inherits from Bits UI Combobox.Group.

ComboboxGroupLabel

Labels a group of related items.

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

Inherits from Bits UI Combobox.GroupHeading.

ComboboxInput

Renders the input field for the parent component.

Prop	Type	Default	Description
`showTrigger`	`boolean`	`true`	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.