Combobox

A searchable dropdown that filters options as you type.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add combobox

Usage

Import and use the Combobox components:

import * as Combobox from '$lib/sivir/components/combobox';

let selected = $state('next');

<Combobox.Root>
  <Combobox.Trigger>{selected}</Combobox.Trigger>
  <Combobox.Content>
    <Combobox.Results>
      <Combobox.Item value="next" label="Next.js" callback={() => (selected = 'next')} />
    </Combobox.Results>
  </Combobox.Content>
</Combobox.Root>

Examples

Basic usage

Input search

Set appearance="input" for a field-styled trigger that stays editable and opens on focus or typing instead of click-toggle. Pass a trailing snippet for an adornment; there is no chevron by default.

Scrollable

Long result lists stay in a height-capped menu and scroll inside it.

Anatomy

Combobox.Root - Provides combobox state.

Combobox.Content - Contains combobox controls.

Combobox.Trigger - Opens the combobox.

Combobox.Results - Lists matching items.

Combobox.Item - Defines a selectable item.

Combobox.Label - Labels the combobox.