Docs
Combobox

Combobox

Autocomplete input and command palette with a list of suggestions.

Installation

The Combobox is built using a composition of the <Popover /> and the <Command /> components.

See installation instructions for the Popover and the Command components.

Usage

	<script lang="ts">
  import Check from "lucide-svelte/icons/check";
  import ChevronsUpDown from "lucide-svelte/icons/chevrons-up-down";
  import * as Command from "$lib/registry/default/ui/command/index.js";
  import * as Popover from "$lib/registry/default/ui/popover/index.js";
  import { Button } from "$lib/registry/default/ui/button/index.js";
  import { cn } from "$lib/utils.js";
  import { tick } from "svelte";
 
  const frameworks = [
    {
      value: "sveltekit",
      label: "SvelteKit",
    },
    {
      value: "next.js",
      label: "Next.js",
    },
    {
      value: "nuxt.js",
      label: "Nuxt.js",
    },
    {
      value: "remix",
      label: "Remix",
    },
    {
      value: "astro",
      label: "Astro",
    },
  ];
 
  let open = false;
  let value = "";
 
  $: selectedValue =
    frameworks.find((f) => f.value === value)?.label ??
    "Select a framework...";
 
  // We want to refocus the trigger button when the user selects
  // an item from the list so users can continue navigating the
  // rest of the form with the keyboard.
  function closeAndFocusTrigger(triggerId: string) {
    open = false;
    tick().then(() => {
      document.getElementById(triggerId)?.focus();
    });
  }
</script>
 
<Popover.Root bind:open let:ids>
  <Popover.Trigger asChild let:builder>
    <Button
      builders={[builder]}
      variant="outline"
      role="combobox"
      aria-expanded={open}
      class="w-[200px] justify-between"
    >
      {selectedValue}
      <ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
    </Button>
  </Popover.Trigger>
  <Popover.Content class="w-[200px] p-0">
    <Command.Root>
      <Command.Input placeholder="Search framework..." />
      <Command.Empty>No framework found.</Command.Empty>
      <Command.Group>
        {#each frameworks as framework}
          <Command.Item
            value={framework.value}
            onSelect={(currentValue) => {
              value = currentValue;
              closeAndFocusTrigger(ids.trigger);
            }}
          >
            <Check
              class={cn(
                "mr-2 size-4",
                value !== framework.value && "text-transparent"
              )}
            />
            {framework.label}
          </Command.Item>
        {/each}
      </Command.Group>
    </Command.Root>
  </Popover.Content>
</Popover.Root>

Examples

Combobox

Popover

Dropdown menu

Form

Since the Combobox is built using the <Popover /> and the <Command /> components, we need to use the <Form.Control /> component. <Form.Control /> enables us to apply the right aria-* attributes to non-standard form elements, and adds a hidden input to ensure the form is submitted with the correct value.

Note: You must be on version 0.5.0 or higher of formsnap for this to work correctly.

Collapsible Command