Combobox

Flexible and accessible combobox component with keyboard navigation support. Built on top of Dropdown and Popover modules.

Installation

Import

import { Combobox } from '@svelte-atoms/core/combobox';

Preset Configuration

Customize the combobox appearance using presets

You can customize the default styles for Combobox components by defining presets in your configuration:

Examples

Explore different combobox variations and use cases

Basic Combobox

Simple combobox with single selection

Code

<script lang="ts">
  import { Combobox } from '@svelte-atoms/core';

  let selected = $state<string[]>([]);
  let query = $state('');
</script>

<Combobox.Root bind:value={selected} bind:query>
  <Combobox.Trigger>
    <Combobox.Control placeholder="Select an option..." />
  </Combobox.Trigger>

  <Combobox.Content>
    <Combobox.Item value="option1">Option 1</Combobox.Item>
    <Combobox.Item value="option2">Option 2</Combobox.Item>
    <Combobox.Item value="option3">Option 3</Combobox.Item>
  </Combobox.Content>
</Combobox.Root>

Multiple Selection

Combobox with multiple selection support

Code

<Combobox.Root bind:value={selected} bind:query multiple>
  <Combobox.Trigger>
    <Combobox.Control placeholder="Select multiple options..." />
  </Combobox.Trigger>

  <Combobox.Content>
    <Combobox.Item value="option1">Option 1</Combobox.Item>
    <Combobox.Item value="option2">Option 2</Combobox.Item>
    <Combobox.Item value="option3">Option 3</Combobox.Item>
  </Combobox.Content>
</Combobox.Root>

API Reference

Combobox.Root Props

Prop

Type

Default

Description

value

string[]

[]

Currently selected values

query

string

Current search query

multiple

boolean

false

Enable multiple selection

disabled

boolean

false

Disable the combobox

Combobox.Item Props

Prop

Type

Default

Description

value

string

Item value (required)

disabled

boolean

false

Disable this item

Accessibility

Built-in Accessibility Features

• Full ARIA attributes support
• Keyboard navigation (Arrow keys, Escape, Enter)
• Screen reader announcements
• Focus management
• Proper role attributes (combobox, listbox, option)

Collapsible

Context Menu