Combobox

An autocomplete input that combines a text input with a dropdown list of suggestions.

Anatomy 

<script>
  import {
    Combobox,
    ComboboxControl,
    ComboboxInput,
    ComboboxTrigger,
    ComboboxClearTrigger,
    ComboboxContent,
    ComboboxItem,
    ComboboxItemText,
    ComboboxItemIndicator,
    ComboboxItemGroup,
    ComboboxItemGroupLabel,
    ComboboxEmpty,
  } from "@saas-ui/svelte/components/combobox";
</script>

<Combobox.Root items={items}>
  <Combobox.Label>Select Item</Combobox.Label>
  <Combobox.Control>
    <Combobox.Input placeholder="Search..." />
    <Combobox.IndicatorGroup>
      <Combobox.ClearTrigger />
      <Combobox.Trigger />
    </Combobox.IndicatorGroup>
  </Combobox.Control>
  <Combobox.Content>
    <Combobox.Empty>No results found</Combobox.Empty>
    {#each items as item}
      <Combobox.Item item={item}>
        <Combobox.ItemText>{item.label}</Combobox.ItemText>
        <Combobox.ItemIndicator />
      </Combobox.Item>
    {/each}
  </Combobox.Content>
</Combobox.Root>

Examples

Allow Custom Value Accessibility

Use the allowCustomValue prop to allow custom values.

Async Loading Accessibility

Combobox with async data loading.

Basic Accessibility

Basic combobox with default styling.

Colours Accessibility

Use the colour prop to change the colour scheme.

Controlled Open Accessibility

Controlled combobox open state.

Controlled Value Accessibility

Controlled combobox value.

Custom Filter Accessibility

Combobox with custom filter function.

Custom Objects Accessibility

Combobox with custom objects and item prefix.

Disabled Accessibility

Disabled combobox.

Disabled Item Accessibility

Combobox with disabled items.

Field Accessibility

Combobox inside a Field component.

Highlight Match Accessibility

Use the highlightMatch prop to highlight matching text.

In Popover Accessibility

Combobox inside a Popover.

Invalid Accessibility

Use the invalid prop to display validation error styling.

Limit Accessibility

Use the limit prop to limit the number of items shown.

Min Characters Accessibility

Use the minCharacters prop to require minimum characters.

Multiple Accessibility

Use the multiple prop to allow selecting multiple items.

Open On Click Accessibility

Use the openOnClick prop to open the dropdown on click.

Sizes Accessibility

Use the size prop to change the size of the combobox. Available sizes: xs, sm, md, lg.

Start Icon Accessibility

Use the startIcon prop to display an icon at the start of the input.

Variants Accessibility

Use the variant prop to change the visual style. Available variants: outline, subtle, flushed.

Virtualised Accessibility

Use the virtualised prop for better performance with large lists.

Props

Combobox.Root

The root container component for the combobox.

Prop Type Default Description
children Snippet - The combobox content.
collection ListCollection<CollectionItem> - The collection of items to display.
id string - The unique identifier for the combobox. If not provided, a unique ID will be auto-generated.
size "xs" | "sm" | "md" | "lg" "md" The size of the combobox.
variant "outline" | "subtle" | "flushed" "outline" The visual variant of the combobox input.
invalid boolean false Whether the combobox is in an invalid state.
colour ColourName "gray" The colour palette for highlighted items.
class string - Additional CSS classes to apply.

Combobox.Label

A label for the combobox component.

Prop Type Default Description
children Snippet - The label content.
class string - Additional CSS classes to apply.

Combobox.Control

The control container that wraps the input and indicators.

Prop Type Default Description
children Snippet - The control content (input, indicators, etc.).
class string - Additional CSS classes to apply.

Combobox.Input

The text input field for the combobox.

Prop Type Default Description
placeholder string - Placeholder text for the input.
class string - Additional CSS classes to apply.

Combobox.IndicatorGroup

A container for grouping the clear trigger and dropdown trigger.

Prop Type Default Description
children Snippet - The indicators (clear trigger, dropdown trigger, etc.).
class string - Additional CSS classes to apply.

Combobox.Trigger

The trigger button that opens the combobox dropdown.

Prop Type Default Description
class string - Additional CSS classes to apply.

Combobox.ClearTrigger

A button to clear the current selection.

Prop Type Default Description
class string - Additional CSS classes to apply.

Combobox.Content

The dropdown content container for combobox items.

Prop Type Default Description
children Snippet - The dropdown content.
class string - Additional CSS classes to apply.

Combobox.Item

An individual selectable item in the dropdown.

Prop Type Default Description
item CollectionItem - The item data object.
children Snippet - The item content.
class string - Additional CSS classes to apply.

Combobox.ItemText

The text content of a combobox item.

Prop Type Default Description
children Snippet - The item text content.
class string - Additional CSS classes to apply.

Combobox.ItemIndicator

The check indicator shown when an item is selected.

Prop Type Default Description
class string - Additional CSS classes to apply.

Combobox.ItemGroup

A group of related combobox items with an optional label.

Prop Type Default Description
children Snippet - The group content.
class string - Additional CSS classes to apply.

Combobox.ItemGroupLabel

A label for a group of combobox items.

Prop Type Default Description
children Snippet - The group label content.
class string - Additional CSS classes to apply.

Combobox.Empty

Content displayed when no items match the filter.

Prop Type Default Description
children Snippet - The empty state content.
class string - Additional CSS classes to apply.