Combobox

Combobox is a typeahead select. Set multiple on the root for multi-select. Built on Ark UI combobox, sourced from Shark UI.

// apps/docs/src/components/examples/combobox/default/react.tsx
import {
  Combobox,
  ComboboxControl,
  ComboboxInput,
  ComboboxTrigger,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
  ComboboxItemText,
} from '@cloudvoyant/helical-react';
import { ChevronsUpDown } from 'lucide-react';

const items = [
  { value: 'react', label: 'React' },
  { value: 'svelte', label: 'Svelte' },
  { value: 'vue', label: 'Vue' },
];

export default function ReactComboboxDefault() {
  return (
    <Combobox items={items} className="max-w-xs">
      <ComboboxControl>
        <ComboboxInput placeholder="Search framework…" />
        <ComboboxTrigger>
          <ChevronsUpDown />
        </ComboboxTrigger>
      </ComboboxControl>
      <ComboboxContent>
        <ComboboxList>
          {items.map((item) => (
            <ComboboxItem key={item.value} item={item}>
              <ComboboxItemText>{item.label}</ComboboxItemText>
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
}

<!-- apps/docs/src/components/examples/combobox/default/svelte.svelte -->
<script lang="ts">
  import {
    Combobox,
    ComboboxControl,
    ComboboxInput,
    ComboboxTrigger,
    ComboboxContent,
    ComboboxList,
    ComboboxItem,
    ComboboxItemText,
  } from '@cloudvoyant/helical-svelte';
  import { ChevronsUpDown } from 'lucide-svelte';

  const items = [
    { value: 'react', label: 'React' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
  ];
</script>

<Combobox {items} class="max-w-xs">
  <ComboboxControl>
    <ComboboxInput placeholder="Search framework…" />
    <ComboboxTrigger>
      <ChevronsUpDown />
    </ComboboxTrigger>
  </ComboboxControl>
  <ComboboxContent>
    <ComboboxList>
      {#each items as item (item.value)}
        <ComboboxItem {item}>
          <ComboboxItemText>{item.label}</ComboboxItemText>
        </ComboboxItem>
      {/each}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Examples

Multiple

// apps/docs/src/components/examples/combobox/multiple/react.tsx
import {
  Combobox,
  ComboboxControl,
  ComboboxInput,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
  ComboboxItemText,
  ComboboxItemIndicator,
} from '@cloudvoyant/helical-react';
import { Check } from 'lucide-react';

const items = [
  { value: 'react', label: 'React' },
  { value: 'svelte', label: 'Svelte' },
  { value: 'vue', label: 'Vue' },
];

export default function ReactComboboxMultiple() {
  return (
    <Combobox multiple defaultValue={['react', 'svelte']} items={items} className="max-w-xs">
      <ComboboxControl>
        <ComboboxInput placeholder="Select frameworks…" />
      </ComboboxControl>
      <ComboboxContent>
        <ComboboxList>
          {items.map((item) => (
            <ComboboxItem key={item.value} item={item}>
              <ComboboxItemText>{item.label}</ComboboxItemText>
              <ComboboxItemIndicator>
                <Check />
              </ComboboxItemIndicator>
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
}

<!-- apps/docs/src/components/examples/combobox/multiple/svelte.svelte -->
<script lang="ts">
  import {
    Combobox,
    ComboboxControl,
    ComboboxInput,
    ComboboxContent,
    ComboboxList,
    ComboboxItem,
    ComboboxItemText,
    ComboboxItemIndicator,
  } from '@cloudvoyant/helical-svelte';
  import { Check } from 'lucide-svelte';

  const items = [
    { value: 'react', label: 'React' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
  ];
</script>

<Combobox multiple defaultValue={['react', 'svelte']} {items} class="max-w-xs">
  <ComboboxControl>
    <ComboboxInput placeholder="Select frameworks…" />
  </ComboboxControl>
  <ComboboxContent>
    <ComboboxList>
      {#each items as item (item.value)}
        <ComboboxItem {item}>
          <ComboboxItemText>{item.label}</ComboboxItemText>
          <ComboboxItemIndicator>
            <Check />
          </ComboboxItemIndicator>
        </ComboboxItem>
      {/each}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

API Reference

Combobox

Props

Accepts all Ark ComboboxRoot props (items, multiple, value, onValueChange, onInputValueChange, …) plus className/class and collection/items. Defaults openOnClick, lazyMount, and unmountOnExit to true.

ComboboxInput

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Input height.

Also accepts all Ark ComboboxInput props.

ComboboxTrigger / ComboboxClear / ComboboxControl / ComboboxContent / ComboboxItem / ComboboxItemText / ComboboxItemIndicator / ComboboxItemGroup / ComboboxItemGroupLabel / ComboboxList / ComboboxEmpty

Accept all corresponding Ark props plus className/class. ComboboxItem takes an item (the collection item object) and adds showIndicator (true by default).

Accessibility

Ark implements the Combobox WAI-ARIA pattern — role="combobox", aria-expanded, aria-activedescendant, arrow-key list navigation, Enter to select, Escape to dismiss.

Theming

No theme extension — uses --input, --popover, --accent, --muted-foreground.