Combobox

An input component that combines a text input with a listbox, allowing users to filter a list of options.

<script setup lang="ts">
import { ref } from 'vue'
import { createListCollection } from '@destyler-ui/vue'
import { Combobox } from '@destyler-ui/vue'

const frameworks = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})
const testProps = ref<string[]>([])
</script>

<template>
  <Combobox.Root :collection="frameworks" v-model="testProps">
    <Combobox.Label>Framework</Combobox.Label>
    <Combobox.Control>
      <Combobox.Input data-testid="input" />
      <Combobox.Trigger data-testid="trigger">Open</Combobox.Trigger>
      <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
    </Combobox.Control>
    <Teleport to="body">
      <Combobox.Positioner data-testid="positioner">
        <Combobox.Content>
          <Combobox.ItemGroup>
            <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
            <Combobox.Item v-for="item in frameworks.items" :key="item.value" :item="item">
              <Combobox.ItemText>{{ item.label }}</Combobox.ItemText>
              <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
            </Combobox.Item>
          </Combobox.ItemGroup>
          <Combobox.List />
        </Combobox.Content>
      </Combobox.Positioner>
    </Teleport>
  </Combobox.Root>
</template>

import { useState } from 'react'
import { createListCollection } from '@destyler-ui/react'
import { Combobox } from '@destyler-ui/react'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})

interface BasicProps {
  disabled?: boolean
  multiple?: boolean
  onValueChange?: (details: { value: string[] }) => void
  onOpenChange?: (details: { open: boolean }) => void
  readOnly?: boolean
  lazyMount?: boolean
  unmountOnExit?: boolean
}

export function Basic(props: BasicProps) {
  const [value, setValue] = useState<string[]>([])

  const handleValueChange = (details: { value: string[] }) => {
    setValue(details.value)
    props.onValueChange?.(details)
  }

  return (
    <Combobox.Root
      collection={collection}
      value={value}
      onValueChange={handleValueChange}
      onOpenChange={props.onOpenChange}
      disabled={props.disabled}
      readOnly={props.readOnly}
      lazyMount={props.lazyMount}
      unmountOnExit={props.unmountOnExit}
    >
      <Combobox.Label>Framework</Combobox.Label>
      <Combobox.Control>
        <Combobox.Input data-testid="input" />
        <Combobox.Trigger data-testid="trigger">Open</Combobox.Trigger>
        <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
      </Combobox.Control>
      <Combobox.Positioner data-testid="positioner">
        <Combobox.Content>
          <Combobox.ItemGroup>
            <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
            {collection.items.map(item => (
              <Combobox.Item key={item.value} item={item}>
                <Combobox.ItemText>{item.label}</Combobox.ItemText>
                <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
              </Combobox.Item>
            ))}
          </Combobox.ItemGroup>
          <Combobox.List />
        </Combobox.Content>
      </Combobox.Positioner>
    </Combobox.Root>
  )
}

import { Combobox, createListCollection } from '@destyler-ui/solid/combobox'
import { createMemo, createSignal, For } from 'solid-js'
import { Portal } from 'solid-js/web'

const initialItems = ['React', 'Solid', 'Vue']

export function Basic() {
  const [items, setItems] = createSignal(initialItems)

  const collection = createMemo(() => createListCollection({ items: items() }))

  const handleInputChange = (details: Combobox.InputValueChangeDetails) => {
    setItems(
      initialItems.filter(item => item.toLowerCase().includes(details.inputValue.toLowerCase())),
    )
  }

  return (
    <Combobox.Root collection={collection()} onInputValueChange={handleInputChange}>
      <Combobox.Label>Framework</Combobox.Label>
      <Combobox.Control>
        <Combobox.Input />
        <Combobox.Trigger>Open</Combobox.Trigger>
        <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
      </Combobox.Control>
      <Portal>
        <Combobox.Positioner>
          <Combobox.Content>
            <Combobox.ItemGroup>
              <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
              <For each={collection().items}>
                {item => (
                  <Combobox.Item item={item}>
                    <Combobox.ItemText>{item}</Combobox.ItemText>
                    <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
                  </Combobox.Item>
                )}
              </For>
            </Combobox.ItemGroup>
          </Combobox.Content>
        </Combobox.Positioner>
      </Portal>
    </Combobox.Root>
  )
}

<script module lang="ts">
  import type { ComboboxOpenChangeDetails, ComboboxValueChangeDetails } from '@destyler-ui/svelte'

  export interface BasicProps {
    disabled?: boolean
    multiple?: boolean
    onValueChange?: (details: ComboboxValueChangeDetails) => void
    onOpenChange?: (details: ComboboxOpenChangeDetails) => void
    readOnly?: boolean
    lazyMount?: boolean
    unmountOnExit?: boolean
  }
</script>

<script lang="ts">
  import { Combobox, createListCollection } from '@destyler-ui/svelte'

  const collection = createListCollection({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Solid', value: 'solid' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte', disabled: true },
    ],
  })

  let { onOpenChange, onValueChange, ...props }: BasicProps = $props()
  let value = $state<string[]>([])
</script>

<Combobox.Root {collection} bind:value {onOpenChange} {onValueChange} {...props}>
  <Combobox.Label>Framework</Combobox.Label>
  <Combobox.Control>
    <Combobox.Input data-testid="input" />
    <Combobox.Trigger data-testid="trigger">Open</Combobox.Trigger>
    <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
  </Combobox.Control>
  <Combobox.Positioner data-testid="positioner">
    <Combobox.Content>
      <Combobox.ItemGroup>
        <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
        {#each collection.items as item (item.value)}
          <Combobox.Item {item}>
            <Combobox.ItemText>{item.label}</Combobox.ItemText>
            <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
          </Combobox.Item>
        {/each}
      </Combobox.ItemGroup>
      <Combobox.List />
    </Combobox.Content>
  </Combobox.Positioner>
</Combobox.Root>

Anatomy

<script setup lang="ts">
import { Combobox } from '@destyler-ui/vue'
</script>

<template>
  <Combobox.Root>
    <Combobox.Label />
    <Combobox.Control>
      <Combobox.Input />
      <Combobox.Trigger />
      <Combobox.ClearTrigger />
    </Combobox.Control>
    <Combobox.Positioner>
      <Combobox.Content>
        <Combobox.ItemGroup>
          <Combobox.ItemGroupLabel />
          <Combobox.Item>
            <Combobox.ItemText />
            <Combobox.ItemIndicator />
          </Combobox.Item>
        </Combobox.ItemGroup>
      </Combobox.Content>
    </Combobox.Positioner>
  </Combobox.Root>
</template>

import { Combobox } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Combobox.Root>
      <Combobox.Label />
      <Combobox.Control>
        <Combobox.Input />
        <Combobox.Trigger />
        <Combobox.ClearTrigger />
      </Combobox.Control>
      <Combobox.Positioner>
        <Combobox.Content>
          <Combobox.ItemGroup>
            <Combobox.ItemGroupLabel />
            <Combobox.Item>
              <Combobox.ItemText />
              <Combobox.ItemIndicator />
            </Combobox.Item>
          </Combobox.ItemGroup>
        </Combobox.Content>
      </Combobox.Positioner>
    </Combobox.Root>
  )
}

import { Combobox, createListCollection } from '@destyler-ui/solid'

const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] })

export default function Basic() {
  return (
    <Combobox.Root collection={collection}>
      <Combobox.Label>Framework</Combobox.Label>
      <Combobox.Control>
        <Combobox.Input />
        <Combobox.Trigger />
        <Combobox.ClearTrigger />
      </Combobox.Control>
      <Combobox.Positioner>
        <Combobox.Content>
          <Combobox.ItemGroup>
            <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
            <Combobox.Item item={collection.items[0]}>
              <Combobox.ItemText>{collection.items[0]}</Combobox.ItemText>
              <Combobox.ItemIndicator />
            </Combobox.Item>
          </Combobox.ItemGroup>
        </Combobox.Content>
      </Combobox.Positioner>
    </Combobox.Root>
  )
}

<script module lang="ts">
  import type { ComboboxOpenChangeDetails, ComboboxValueChangeDetails } from '@destyler-ui/svelte'

  export interface BasicProps {
    disabled?: boolean
    multiple?: boolean
    onValueChange?: (details: ComboboxValueChangeDetails) => void
    onOpenChange?: (details: ComboboxOpenChangeDetails) => void
    readOnly?: boolean
    lazyMount?: boolean
    unmountOnExit?: boolean
  }
</script>

<script lang="ts">
  import { Combobox, createListCollection } from '@destyler-ui/svelte'

  const collection = createListCollection({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Solid', value: 'solid' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte', disabled: true },
    ],
  })

  let { onOpenChange, onValueChange, ...props }: BasicProps = $props()
  let value = $state<string[]>([])
</script>

<Combobox.Root {collection} bind:value {onOpenChange} {onValueChange} {...props}>
  <Combobox.Label>Framework</Combobox.Label>
  <Combobox.Control>
    <Combobox.Input data-testid="input" />
    <Combobox.Trigger data-testid="trigger">Open</Combobox.Trigger>
    <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
  </Combobox.Control>
  <Combobox.Positioner data-testid="positioner">
    <Combobox.Content>
      <Combobox.ItemGroup>
        <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
        {#each collection.items as item (item.value)}
          <Combobox.Item {item}>
            <Combobox.ItemText>{item.label}</Combobox.ItemText>
            <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
          </Combobox.Item>
        {/each}
      </Combobox.ItemGroup>
      <Combobox.List />
    </Combobox.Content>
  </Combobox.Positioner>
</Combobox.Root>

Examples

Basic

<script setup lang="ts">
import { ref } from 'vue'
import { createListCollection } from '@destyler-ui/vue'
import { Combobox } from '@destyler-ui/vue'

const frameworks = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})
const testProps = ref<string[]>([])
</script>

<template>
  <Combobox.Root :collection="frameworks" v-model="testProps">
    <Combobox.Label>Framework</Combobox.Label>
    <Combobox.Control>
      <Combobox.Input data-testid="input" />
      <Combobox.Trigger data-testid="trigger">Open</Combobox.Trigger>
      <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
    </Combobox.Control>
    <Teleport to="body">
      <Combobox.Positioner data-testid="positioner">
        <Combobox.Content>
          <Combobox.ItemGroup>
            <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
            <Combobox.Item v-for="item in frameworks.items" :key="item.value" :item="item">
              <Combobox.ItemText>{{ item.label }}</Combobox.ItemText>
              <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
            </Combobox.Item>
          </Combobox.ItemGroup>
          <Combobox.List />
        </Combobox.Content>
      </Combobox.Positioner>
    </Teleport>
  </Combobox.Root>
</template>

import { useState } from 'react'
import { createListCollection } from '@destyler-ui/react'
import { Combobox } from '@destyler-ui/react'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})

interface BasicProps {
  disabled?: boolean
  multiple?: boolean
  onValueChange?: (details: { value: string[] }) => void
  onOpenChange?: (details: { open: boolean }) => void
  readOnly?: boolean
  lazyMount?: boolean
  unmountOnExit?: boolean
}

export function Basic(props: BasicProps) {
  const [value, setValue] = useState<string[]>([])

  const handleValueChange = (details: { value: string[] }) => {
    setValue(details.value)
    props.onValueChange?.(details)
  }

  return (
    <Combobox.Root
      collection={collection}
      value={value}
      onValueChange={handleValueChange}
      onOpenChange={props.onOpenChange}
      disabled={props.disabled}
      readOnly={props.readOnly}
      lazyMount={props.lazyMount}
      unmountOnExit={props.unmountOnExit}
    >
      <Combobox.Label>Framework</Combobox.Label>
      <Combobox.Control>
        <Combobox.Input data-testid="input" />
        <Combobox.Trigger data-testid="trigger">Open</Combobox.Trigger>
        <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
      </Combobox.Control>
      <Combobox.Positioner data-testid="positioner">
        <Combobox.Content>
          <Combobox.ItemGroup>
            <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
            {collection.items.map(item => (
              <Combobox.Item key={item.value} item={item}>
                <Combobox.ItemText>{item.label}</Combobox.ItemText>
                <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
              </Combobox.Item>
            ))}
          </Combobox.ItemGroup>
          <Combobox.List />
        </Combobox.Content>
      </Combobox.Positioner>
    </Combobox.Root>
  )
}

import { Combobox, createListCollection } from '@destyler-ui/solid/combobox'
import { createMemo, createSignal, For } from 'solid-js'
import { Portal } from 'solid-js/web'

const initialItems = ['React', 'Solid', 'Vue']

export function Basic() {
  const [items, setItems] = createSignal(initialItems)

  const collection = createMemo(() => createListCollection({ items: items() }))

  const handleInputChange = (details: Combobox.InputValueChangeDetails) => {
    setItems(
      initialItems.filter(item => item.toLowerCase().includes(details.inputValue.toLowerCase())),
    )
  }

  return (
    <Combobox.Root collection={collection()} onInputValueChange={handleInputChange}>
      <Combobox.Label>Framework</Combobox.Label>
      <Combobox.Control>
        <Combobox.Input />
        <Combobox.Trigger>Open</Combobox.Trigger>
        <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
      </Combobox.Control>
      <Portal>
        <Combobox.Positioner>
          <Combobox.Content>
            <Combobox.ItemGroup>
              <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
              <For each={collection().items}>
                {item => (
                  <Combobox.Item item={item}>
                    <Combobox.ItemText>{item}</Combobox.ItemText>
                    <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
                  </Combobox.Item>
                )}
              </For>
            </Combobox.ItemGroup>
          </Combobox.Content>
        </Combobox.Positioner>
      </Portal>
    </Combobox.Root>
  )
}

<script module lang="ts">
  import type { ComboboxOpenChangeDetails, ComboboxValueChangeDetails } from '@destyler-ui/svelte'

  export interface BasicProps {
    disabled?: boolean
    multiple?: boolean
    onValueChange?: (details: ComboboxValueChangeDetails) => void
    onOpenChange?: (details: ComboboxOpenChangeDetails) => void
    readOnly?: boolean
    lazyMount?: boolean
    unmountOnExit?: boolean
  }
</script>

<script lang="ts">
  import { Combobox, createListCollection } from '@destyler-ui/svelte'

  const collection = createListCollection({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Solid', value: 'solid' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte', disabled: true },
    ],
  })

  let { onOpenChange, onValueChange, ...props }: BasicProps = $props()
  let value = $state<string[]>([])
</script>

<Combobox.Root {collection} bind:value {onOpenChange} {onValueChange} {...props}>
  <Combobox.Label>Framework</Combobox.Label>
  <Combobox.Control>
    <Combobox.Input data-testid="input" />
    <Combobox.Trigger data-testid="trigger">Open</Combobox.Trigger>
    <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
  </Combobox.Control>
  <Combobox.Positioner data-testid="positioner">
    <Combobox.Content>
      <Combobox.ItemGroup>
        <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
        {#each collection.items as item (item.value)}
          <Combobox.Item {item}>
            <Combobox.ItemText>{item.label}</Combobox.ItemText>
            <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
          </Combobox.Item>
        {/each}
      </Combobox.ItemGroup>
      <Combobox.List />
    </Combobox.Content>
  </Combobox.Positioner>
</Combobox.Root>

Controlled

Control the selected value of the combobox programmatically.

<script setup lang="ts">
import { ref } from 'vue'
import { createListCollection } from '@destyler-ui/vue'
import { Combobox } from '@destyler-ui/vue'

const frameworks = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})
const value = ref<string[]>(['vue'])
</script>

<template>
  <output>{{ value.join(', ') }}</output>
  <Combobox.Root :collection="frameworks" v-model="value">
    <Combobox.Label>Framework</Combobox.Label>
    <Combobox.Control>
      <Combobox.Input data-testid="input" />
      <Combobox.Trigger data-testid="trigger">Open</Combobox.Trigger>
      <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
    </Combobox.Control>
    <Teleport to="body">
      <Combobox.Positioner data-testid="positioner">
        <Combobox.Content>
          <Combobox.ItemGroup>
            <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
            <Combobox.Item v-for="item in frameworks.items" :key="item.value" :item="item">
              <Combobox.ItemText>{{ item.label }}</Combobox.ItemText>
              <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
            </Combobox.Item>
          </Combobox.ItemGroup>
          <Combobox.List />
        </Combobox.Content>
      </Combobox.Positioner>
    </Teleport>
  </Combobox.Root>
</template>

import { useState } from 'react'
import { createListCollection } from '@destyler-ui/react'
import { Combobox } from '@destyler-ui/react'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})

export function Controlled() {
  const [value, setValue] = useState<string[]>(['vue'])

  return (
    <>
      <output>{value.join(', ')}</output>
      <Combobox.Root
        collection={collection}
        value={value}
        onValueChange={details => setValue(details.value)}
      >
        <Combobox.Label>Framework</Combobox.Label>
        <Combobox.Control>
          <Combobox.Input data-testid="input" />
          <Combobox.Trigger data-testid="trigger">Open</Combobox.Trigger>
          <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
        </Combobox.Control>
        <Combobox.Positioner data-testid="positioner">
          <Combobox.Content>
            <Combobox.ItemGroup>
              <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
              {collection.items.map(item => (
                <Combobox.Item key={item.value} item={item}>
                  <Combobox.ItemText>{item.label}</Combobox.ItemText>
                  <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
                </Combobox.Item>
              ))}
            </Combobox.ItemGroup>
            <Combobox.List />
          </Combobox.Content>
        </Combobox.Positioner>
      </Combobox.Root>
    </>
  )
}

import { Combobox, createListCollection } from '@destyler-ui/solid/combobox'
import { createSignal, For } from 'solid-js'
import { Portal } from 'solid-js/web'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})

export function Controlled() {
  const [value, setValue] = createSignal<string[]>(['vue'])

  return (
    <>
      <output>{value().join(', ')}</output>
      <Combobox.Root
        collection={collection}
        value={value()}
        onValueChange={details => setValue(details.value)}
      >
        <Combobox.Label>Framework</Combobox.Label>
        <Combobox.Control>
          <Combobox.Input />
          <Combobox.Trigger>Open</Combobox.Trigger>
          <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
        </Combobox.Control>
        <Portal>
          <Combobox.Positioner>
            <Combobox.Content>
              <Combobox.ItemGroup>
                <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
                <For each={collection.items}>
                  {item => (
                    <Combobox.Item item={item}>
                      <Combobox.ItemText>{item.label}</Combobox.ItemText>
                      <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
                    </Combobox.Item>
                  )}
                </For>
              </Combobox.ItemGroup>
            </Combobox.Content>
          </Combobox.Positioner>
        </Portal>
      </Combobox.Root>
    </>
  )
}

<script lang="ts">
  import { Combobox, createListCollection } from '@destyler-ui/svelte'

  const collection = createListCollection({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Solid', value: 'solid' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte', disabled: true },
    ],
  })
  let value = $state<string[]>(['vue'])
</script>

<output>{value.join(', ')}</output>
<Combobox.Root {collection} bind:value>
  <Combobox.Label>Framework</Combobox.Label>
  <Combobox.Control>
    <Combobox.Input data-testid="input" />
    <Combobox.Trigger data-testid="trigger">Open</Combobox.Trigger>
    <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
  </Combobox.Control>
  <Combobox.Positioner data-testid="positioner">
    <Combobox.Content>
      <Combobox.ItemGroup>
        <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
        {#each collection.items as item (item.value)}
          <Combobox.Item {item}>
            <Combobox.ItemText>{item.label}</Combobox.ItemText>
            <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
          </Combobox.Item>
        {/each}
      </Combobox.ItemGroup>
      <Combobox.List />
    </Combobox.Content>
  </Combobox.Positioner>
</Combobox.Root>

Initial Value

Seed the initial selection with defaultValue.

<script setup lang="ts">
import { createListCollection } from '@destyler-ui/vue'
import { Combobox } from '@destyler-ui/vue'

const frameworks = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})
</script>

<template>
  <Combobox.Root :collection="frameworks" :default-value="['vue']">
    <Combobox.Label>Framework</Combobox.Label>
    <Combobox.Control>
      <Combobox.Input data-testid="input" />
      <Combobox.Trigger data-testid="trigger">Open</Combobox.Trigger>
      <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
    </Combobox.Control>
    <Teleport to="body">
      <Combobox.Positioner data-testid="positioner">
        <Combobox.Content>
          <Combobox.ItemGroup>
            <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
            <Combobox.Item v-for="item in frameworks.items" :key="item.value" :item="item">
              <Combobox.ItemText>{{ item.label }}</Combobox.ItemText>
              <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
            </Combobox.Item>
          </Combobox.ItemGroup>
          <Combobox.List />
        </Combobox.Content>
      </Combobox.Positioner>
    </Teleport>
  </Combobox.Root>
</template>

import { createListCollection } from '@destyler-ui/react'
import { Combobox } from '@destyler-ui/react'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})

export function InitialValue() {
  return (
    <Combobox.Root
      collection={collection}
      defaultValue={['vue']}
    >
      <Combobox.Label>Framework</Combobox.Label>
      <Combobox.Control>
        <Combobox.Input data-testid="input" />
        <Combobox.Trigger data-testid="trigger">Open</Combobox.Trigger>
        <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
      </Combobox.Control>
      <Combobox.Positioner data-testid="positioner">
        <Combobox.Content>
          <Combobox.ItemGroup>
            <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
            {collection.items.map(item => (
              <Combobox.Item key={item.value} item={item}>
                <Combobox.ItemText>{item.label}</Combobox.ItemText>
                <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
              </Combobox.Item>
            ))}
          </Combobox.ItemGroup>
          <Combobox.List />
        </Combobox.Content>
      </Combobox.Positioner>
    </Combobox.Root>
  )
}

import { Combobox, createListCollection } from '@destyler-ui/solid/combobox'
import { For } from 'solid-js'
import { Portal } from 'solid-js/web'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})

export function InitialValue() {
  return (
    <Combobox.Root
      collection={collection}
      defaultValue={['vue']}
    >
      <Combobox.Label>Framework</Combobox.Label>
      <Combobox.Control>
        <Combobox.Input />
        <Combobox.Trigger>Open</Combobox.Trigger>
        <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
      </Combobox.Control>
      <Portal>
        <Combobox.Positioner>
          <Combobox.Content>
            <Combobox.ItemGroup>
              <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
              <For each={collection.items}>
                {item => (
                  <Combobox.Item item={item}>
                    <Combobox.ItemText>{item.label}</Combobox.ItemText>
                    <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
                  </Combobox.Item>
                )}
              </For>
            </Combobox.ItemGroup>
          </Combobox.Content>
        </Combobox.Positioner>
      </Portal>
    </Combobox.Root>
  )
}

<script lang="ts">
  import { Combobox, createListCollection } from '@destyler-ui/svelte'

  const collection = createListCollection({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Solid', value: 'solid' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte', disabled: true },
    ],
  })
</script>

<Combobox.Root {collection} defaultValue={["vue"]}>
  <Combobox.Label>Framework</Combobox.Label>
  <Combobox.Control>
    <Combobox.Input data-testid="input" />
    <Combobox.Trigger data-testid="trigger">Open</Combobox.Trigger>
    <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
  </Combobox.Control>
  <Combobox.Positioner data-testid="positioner">
    <Combobox.Content>
      <Combobox.ItemGroup>
        <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
        {#each collection.items as item (item.value)}
          <Combobox.Item {item}>
            <Combobox.ItemText>{item.label}</Combobox.ItemText>
            <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
          </Combobox.Item>
        {/each}
      </Combobox.ItemGroup>
      <Combobox.List />
    </Combobox.Content>
  </Combobox.Positioner>
</Combobox.Root>

Advanced

Advanced usage with custom filtering and item rendering.

<script setup lang="ts">
import { createListCollection, Combobox } from '@destyler-ui/vue'

const frameworks = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})
</script>

<template>
  <Combobox.Root :collection="frameworks" multiple>
    <Combobox.Label>Framework</Combobox.Label>
    <Combobox.Control>
      <Combobox.Input />
      <Combobox.Trigger>Open</Combobox.Trigger>
      <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
    </Combobox.Control>
    <Teleport to="body">
      <Combobox.Positioner>
        <Combobox.Content>
          <Combobox.ItemGroup>
            <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
            <Combobox.Item v-for="item in frameworks.items" :key="item.value" :item="item">
              <Combobox.ItemText>{{ item.label }}</Combobox.ItemText>
              <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
            </Combobox.Item>
          </Combobox.ItemGroup>
        </Combobox.Content>
      </Combobox.Positioner>
    </Teleport>
  </Combobox.Root>
</template>

import { createListCollection } from '@destyler-ui/react'
import { Combobox } from '@destyler-ui/react'

const collection = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ],
})

export function Advanced() {
  return (
    <Combobox.Root collection={collection} multiple>
      <Combobox.Label>Framework</Combobox.Label>
      <Combobox.Control>
        <Combobox.Input />
        <Combobox.Trigger>Open</Combobox.Trigger>
        <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
      </Combobox.Control>
      <Combobox.Positioner>
        <Combobox.Content>
          <Combobox.ItemGroup>
            <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
            {collection.items.map(item => (
              <Combobox.Item key={item.value} item={item}>
                <Combobox.ItemText>{item.label}</Combobox.ItemText>
                <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
              </Combobox.Item>
            ))}
          </Combobox.ItemGroup>
          <Combobox.List />
        </Combobox.Content>
      </Combobox.Positioner>
    </Combobox.Root>
  )
}

import { Combobox, createListCollection } from '@destyler-ui/solid/combobox'
import { For } from 'solid-js'
import { Portal } from 'solid-js/web'

export function Advanced() {
  const collection = createListCollection({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Solid', value: 'solid' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte', disabled: true },
    ],
  })
  return (
    <Combobox.Root collection={collection}>
      <Combobox.Label>Framework</Combobox.Label>
      <Combobox.Control>
        <Combobox.Input />
        <Combobox.Trigger>Open</Combobox.Trigger>
        <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
      </Combobox.Control>
      <Portal>
        <Combobox.Positioner>
          <Combobox.Content>
            <Combobox.ItemGroup>
              <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
              <For each={collection.items}>
                {item => (
                  <Combobox.Item item={item}>
                    <Combobox.ItemText>{item.label}</Combobox.ItemText>
                    <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
                  </Combobox.Item>
                )}
              </For>
            </Combobox.ItemGroup>
          </Combobox.Content>
        </Combobox.Positioner>
      </Portal>
    </Combobox.Root>
  )
}

<script lang="ts">
  import { Combobox, createListCollection } from '@destyler-ui/svelte'

  const collection = createListCollection({
    items: [
      { label: 'React', value: 'react' },
      { label: 'Solid', value: 'solid' },
      { label: 'Vue', value: 'vue' },
      { label: 'Svelte', value: 'svelte', disabled: true },
    ],
  })
</script>

<Combobox.Root {collection} multiple>
  <Combobox.Label>Framework</Combobox.Label>
  <Combobox.Control>
    <Combobox.Input />
    <Combobox.Trigger>Open</Combobox.Trigger>
    <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
  </Combobox.Control>
  <Combobox.Positioner>
    <Combobox.Content>
      <Combobox.ItemGroup>
        <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
        {#each collection.items as item (item.value)}
          <Combobox.Item {item}>
            <Combobox.ItemText>{item.label}</Combobox.ItemText>
            <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
          </Combobox.Item>
        {/each}
      </Combobox.ItemGroup>
      <Combobox.List />
    </Combobox.Content>
  </Combobox.Positioner>
</Combobox.Root>

With Field

Combine combobox with a form field for validation and labeling.

<script setup lang="ts">
import { createListCollection } from '@destyler-ui/vue'
import {  Combobox } from '@destyler-ui/vue'
import { Field } from '@destyler-ui/vue'

const frameworks = createListCollection({
  items: ['React', 'Solid', 'Vue'],
})
</script>

<template>
  <Field.Root>
    <Combobox.Root :collection="frameworks">
      <Combobox.Label>Label</Combobox.Label>
      <Combobox.Control>
        <Combobox.Input />
        <Combobox.Trigger>Open</Combobox.Trigger>
        <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
      </Combobox.Control>
      <Combobox.Positioner>
        <Combobox.Content>
          <Combobox.ItemGroup>
            <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
            <Combobox.Item v-for="item in frameworks.items" :key="item" :item="item">
              <Combobox.ItemText>{{ item }}</Combobox.ItemText>
              <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
            </Combobox.Item>
          </Combobox.ItemGroup>
        </Combobox.Content>
      </Combobox.Positioner>
    </Combobox.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'
import { createListCollection } from '@destyler-ui/react'
import { Combobox } from '@destyler-ui/react'

const collection = createListCollection({
  items: ['React', 'Solid', 'Vue'],
})

interface WithFieldProps {
  disabled?: boolean
  readOnly?: boolean
  invalid?: boolean
  required?: boolean
}

export function WithField(props: WithFieldProps) {
  return (
    <Field.Root disabled={props.disabled} readOnly={props.readOnly} invalid={props.invalid} required={props.required}>
      <Combobox.Root collection={collection} disabled={props.disabled} readOnly={props.readOnly}>
        <Combobox.Label>Label</Combobox.Label>
        <Combobox.Control>
          <Combobox.Input />
          <Combobox.Trigger>Open</Combobox.Trigger>
          <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
        </Combobox.Control>
        <Combobox.Positioner>
          <Combobox.Content>
            <Combobox.ItemGroup>
              <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
              {collection.items.map(item => (
                <Combobox.Item key={item} item={item}>
                  <Combobox.ItemText>{item}</Combobox.ItemText>
                  <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
                </Combobox.Item>
              ))}
            </Combobox.ItemGroup>
            <Combobox.List />
          </Combobox.Content>
        </Combobox.Positioner>
      </Combobox.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Combobox, createListCollection } from '@destyler-ui/solid/combobox'
import { Field } from '@destyler-ui/solid/field'
import { For } from 'solid-js'

export function WithField(props: Field.RootProps) {
  const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] })

  return (
    <Field.Root {...props}>
      <Combobox.Root collection={collection}>
        <Combobox.Label>Label</Combobox.Label>
        <Combobox.Control>
          <Combobox.Input />
          <Combobox.Trigger>Open</Combobox.Trigger>
          <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
        </Combobox.Control>
        <Combobox.Positioner>
          <Combobox.Content>
            <For each={collection.items}>
              {item => (
                <Combobox.Item item={item}>
                  <Combobox.ItemText>{item}</Combobox.ItemText>
                  <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
                </Combobox.Item>
              )}
            </For>
          </Combobox.Content>
        </Combobox.Positioner>
      </Combobox.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script module lang="ts">
  export interface WithFieldProps {
    disabled?: boolean
    readOnly?: boolean
    invalid?: boolean
    required?: boolean
  }
</script>

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'
  import { Combobox, createListCollection } from '@destyler-ui/svelte'

  const props: WithFieldProps = $props()
  const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] })
</script>

<Field.Root {...props}>
  <Combobox.Root {collection} disabled={props.disabled} readOnly={props.readOnly}>
    <Combobox.Label>Label</Combobox.Label>
    <Combobox.Control>
      <Combobox.Input />
      <Combobox.Trigger>Open</Combobox.Trigger>
      <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
    </Combobox.Control>
    <Combobox.Positioner>
      <Combobox.Content>
        <Combobox.ItemGroup>
          <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
          {#each collection.items as item (item)}
            <Combobox.Item {item}>
              <Combobox.ItemText>{item}</Combobox.ItemText>
              <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
            </Combobox.Item>
          {/each}
        </Combobox.ItemGroup>
        <Combobox.List />
      </Combobox.Content>
    </Combobox.Positioner>
  </Combobox.Root>
  <Field.HelperText>Additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Root Provider

<script setup lang="ts">
import { Combobox, useCombobox } from '@destyler-ui/vue'
import { createListCollection } from '@destyler-ui/vue'
import { computed, ref } from 'vue'

const initialItems = ['React', 'Solid', 'Vue']

const items = ref(initialItems)

const collection = computed(() => createListCollection({ items: items.value }))

const handleInputChange = (details: Combobox.InputValueChangeDetails) => {
  items.value = initialItems.filter((item) => item.toLowerCase().includes(details.inputValue.toLowerCase()))
}

const combobox = useCombobox({
  get collection() {
    return collection.value
  },
  onInputValueChange: handleInputChange,
})
</script>

<template>
  <button @click="combobox.focus()">Focus</button>

  <Combobox.RootProvider :value="combobox">
    <Combobox.Label>Framework</Combobox.Label>
    <Combobox.Control>
      <Combobox.Input />
      <Combobox.Trigger>Open</Combobox.Trigger>
      <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
    </Combobox.Control>
    <Teleport to="body">
      <Combobox.Positioner>
        <Combobox.Content>
          <Combobox.ItemGroup>
            <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
            <Combobox.Item v-for="item in collection.items" :key="item" :item="item">
              <Combobox.ItemText>{{ item }}</Combobox.ItemText>
              <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
            </Combobox.Item>
          </Combobox.ItemGroup>
        </Combobox.Content>
      </Combobox.Positioner>
    </Teleport>
  </Combobox.RootProvider>
</template>

import { useMemo, useState } from 'react'
import { createListCollection } from '@destyler-ui/react'
import { Combobox, useCombobox } from '@destyler-ui/react'

const initialItems = ['React', 'Solid', 'Vue']

export function RootProvider() {
  const [items, setItems] = useState(initialItems)

  const collection = useMemo(() => createListCollection({ items }), [items])

  const combobox = useCombobox({
    collection,
    onInputValueChange: ({ inputValue }) => {
      setItems(initialItems.filter(item => item.toLowerCase().includes(inputValue.toLowerCase())))
    },
  })

  return (
    <>
      <button type="button" onClick={() => combobox.focus()}>Focus</button>

      <Combobox.RootProvider value={combobox}>
        <Combobox.Label>Framework</Combobox.Label>
        <Combobox.Control>
          <Combobox.Input />
          <Combobox.Trigger>Open</Combobox.Trigger>
          <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
        </Combobox.Control>
        <Combobox.Positioner>
          <Combobox.Content>
            <Combobox.ItemGroup>
              <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
              {collection.items.map(item => (
                <Combobox.Item key={item} item={item}>
                  <Combobox.ItemText>{item}</Combobox.ItemText>
                  <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
                </Combobox.Item>
              ))}
            </Combobox.ItemGroup>
            <Combobox.List />
          </Combobox.Content>
        </Combobox.Positioner>
      </Combobox.RootProvider>
    </>
  )
}

import { Combobox, createListCollection, useCombobox } from '@destyler-ui/solid/combobox'
import { createMemo, createSignal, For } from 'solid-js'
import { Portal } from 'solid-js/web'

const initialItems = ['React', 'Solid', 'Vue']

export function RootProvider() {
  const [items, setItems] = createSignal(initialItems)

  const collection = createMemo(() => createListCollection({ items: items() }))

  const handleInputChange = (details: Combobox.InputValueChangeDetails) => {
    setItems(
      initialItems.filter(item => item.toLowerCase().includes(details.inputValue.toLowerCase())),
    )
  }

  const combobox = useCombobox({
    get collection() {
      return collection()
    },
    onInputValueChange: handleInputChange,
  })

  return (
    <>
      <button onClick={() => combobox().focus()}>Focus</button>

      <Combobox.RootProvider value={combobox}>
        <Combobox.Label>Framework</Combobox.Label>
        <Combobox.Control>
          <Combobox.Input />
          <Combobox.Trigger>Open</Combobox.Trigger>
          <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
        </Combobox.Control>
        <Portal>
          <Combobox.Positioner>
            <Combobox.Content>
              <Combobox.ItemGroup>
                <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
                <For each={collection().items}>
                  {item => (
                    <Combobox.Item item={item}>
                      <Combobox.ItemText>{item}</Combobox.ItemText>
                      <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
                    </Combobox.Item>
                  )}
                </For>
              </Combobox.ItemGroup>
            </Combobox.Content>
          </Combobox.Positioner>
        </Portal>
      </Combobox.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Combobox, createListCollection, useCombobox } from '@destyler-ui/svelte'

  const initialItems = ['React', 'Solid', 'Vue']
  let items = $state(initialItems)
  const collection = $derived(createListCollection({ items }))
  const id = $props.id()
  const combobox = useCombobox(() => ({
    collection,
    id,
    onInputValueChange({ inputValue }) {
      items = initialItems.filter(item => item.toLowerCase().includes(inputValue.toLowerCase()))
    },
  }))
</script>

<button type="button" onclick={() => combobox().focus()}>Focus</button>
<Combobox.RootProvider value={combobox}>
  <Combobox.Label>Framework</Combobox.Label>
  <Combobox.Control>
    <Combobox.Input />
    <Combobox.Trigger>Open</Combobox.Trigger>
    <Combobox.ClearTrigger>Clear</Combobox.ClearTrigger>
  </Combobox.Control>
  <Combobox.Positioner>
    <Combobox.Content>
      <Combobox.ItemGroup>
        <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>
        {#each collection.items as item (item)}
          <Combobox.Item {item}>
            <Combobox.ItemText>{item}</Combobox.ItemText>
            <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
          </Combobox.Item>
        {/each}
      </Combobox.ItemGroup>
      <Combobox.List />
    </Combobox.Content>
  </Combobox.Positioner>
</Combobox.RootProvider>

API Reference

Root

Prop	Default	Type
`collection*`	—	`ListCollection<T>` The collection of items to display in the combobox
`allowCustomValue`	—	`false \| true` Whether to allow typing custom values in the input
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`autoFocus`	—	`false \| true` Whether to autofocus the input on mount
`closeOnSelect`	—	`false \| true` Whether to close the combobox when an item is selected.
`composite`	`true`	`false \| true` Whether the combobox is a composed with other composite widgets like tabs
`defaultInputValue`	—	`string` The initial text of the combobox input when it is first rendered. Use when you do not need to control the input value.
`defaultOpen`	—	`false \| true` The initial open state of the combobox when it is first rendered. Use when you do not need to control its open state.
`defaultValue`	—	`string[]` The initial value of the combobox when it is first rendered. Use when you do not need to control the state of the combobox.
`disabled`	—	`false \| true` Whether the combobox is disabled
`disableLayer`	—	`false \| true` Whether to disable registering this a dismissable layer
`form`	—	`string` The associate form of the combobox.
`highlightedValue`	—	`string` The active item's id. Used to set the `aria-activedescendant` attribute
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; label: string; control: string; input: string; content: string; trigger: string; clearTrigger: string; item: (id: string, index?: number) => string; positioner: string; itemGroup: (id: string \| number) => string; itemGroupLabel: (id: string \| number) => string; }>` The ids of the elements in the combobox. Useful for composition.
`inputBehavior`	`"none"`	`"autohighlight" \| "autocomplete" \| "none"` Defines the auto-completion behavior of the combobox. - `autohighlight`: The first focused item is highlighted as the user types - `autocomplete`: Navigating the listbox with the arrow keys selects the item and the input is updated
`inputValue`	—	`string` The current value of the combobox's input
`invalid`	—	`false \| true` Whether the combobox is invalid
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`loopFocus`	`true`	`false \| true` Whether to loop the keyboard navigation through the items
`modelValue`	—	`string[]` The current selected values of the combobox's input
`multiple`	—	`false \| true` Whether to allow multiple selection. Good to know: When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`. It is recommended to render the selected items in a separate container.
`name`	—	`string` The `name` attribute of the combobox's input. Useful for form submission
`navigate`	—	`(details: combobox.NavigateDetails) => void` Function to navigate to the selected item
`open`	—	`false \| true` Whether the combobox is open
`openOnChange`	`true`	`false \| true \| ((details: combobox.InputValueChangeDetails) => boolean)` Whether to show the combobox when the input value changes
`openOnClick`	`false`	`false \| true` Whether to open the combobox popup on initial click on the input
`openOnKeyPress`	`true`	`false \| true` Whether to open the combobox on arrow key press
`placeholder`	—	`string` The placeholder text of the combobox's input
`positioning`	—	`calendar.PositioningOptions` The positioning options to dynamically position the menu
`readOnly`	—	`false \| true` Whether the combobox is readonly. This puts the combobox in a "non-editable" mode but the user can still interact with it
`required`	—	`false \| true` Whether the combobox is required
`scrollToIndexFn`	—	`(details: combobox.ScrollToIndexDetails) => void` Function to scroll to a specific index
`selectionBehavior`	`"replace"`	`"clear" \| "replace" \| "preserve"` The behavior of the combobox input when an item is selected - `replace`: The selected item string is set as the input value - `clear`: The input value is cleared - `preserve`: The input value is preserved
`translations`	—	`combobox.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Emit	Event
`focusOutside`	`[event: FocusOutsideEvent]` Function called when the focus is moved outside the component
`highlightChange`	`[details: HighlightChangeDetails<T>]` Function called when an item is highlighted using the pointer or keyboard navigation.
`inputValueChange`	`[details: InputValueChangeDetails]` Function called when the input's value changes
`interactOutside`	`[event: InteractOutsideEvent]` Function called when an interaction happens outside the component
`openChange`	`[details: OpenChangeDetails]` Function called when the popup is opened
`pointerDownOutside`	`[event: PointerDownOutsideEvent]` Function called when the pointer is pressed down outside the component
`update:modelValue`	`[value: string[]]` The callback fired when the model value changes.
`update:open`	`[open: boolean]` Event handler called when the open state of the combobox changes.
`valueChange`	`[details: ValueChangeDetails<T>]` Function called when a new item is selected

ClearTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`item*`	—	`any` The item to render
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`persistFocus`	—	`false \| true` Whether hovering outside should clear the highlighted state

ItemContext

No serializable props or emits are declared for this part.

ItemGroup

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`id`	—	`string`

ItemGroupLabel

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

List

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes, T>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Trigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`focusable`	—	`false \| true` Whether the trigger is focusable

Root

Prop	Default	Type
`collection*`	—	`ListCollection<T>` The collection of items
`allowCustomValue`	—	`false \| true` Whether to allow typing custom values in the input
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`autoFocus`	—	`false \| true` Whether to autofocus the input on mount
`closeOnSelect`	—	`false \| true` Whether to close the combobox when an item is selected.
`composite`	`true`	`false \| true` Whether the combobox is a composed with other composite widgets like tabs
`defaultInputValue`	—	`string` The initial value of the combobox's input when it is not controlled. Prefer this over seeding with `inputValue` for uncontrolled usage.
`defaultOpen`	—	`false \| true` The initial open state of the combobox when it is first rendered. Use when you do not need to control its open state.
`defaultValue`	—	`string[]` The initial value of the combobox when it is first rendered. Use when you do not need to control the state of the combobox.
`disabled`	—	`false \| true` Whether the combobox is disabled
`disableLayer`	—	`false \| true` Whether to disable registering this a dismissable layer
`form`	—	`string` The associate form of the combobox.
`highlightedValue`	—	`null \| string` The active item's id. Used to set the `aria-activedescendant` attribute
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; label: string; control: string; input: string; content: string; trigger: string; clearTrigger: string; item: (id: string, index?: number) => string; positioner: string; itemGroup: (id: string \| number) => string; itemGroupLabel: (id: string \| number) => string; }>` The ids of the elements in the combobox. Useful for composition.
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`inputBehavior`	`"none"`	`"autohighlight" \| "autocomplete" \| "none"` Defines the auto-completion behavior of the combobox. - `autohighlight`: The first focused item is highlighted as the user types - `autocomplete`: Navigating the listbox with the arrow keys selects the item and the input is updated
`inputValue`	—	`string` The controlled value of the combobox's input
`invalid`	—	`false \| true` Whether the combobox is invalid
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`loopFocus`	`true`	`false \| true` Whether to loop the keyboard navigation through the items
`multiple`	—	`false \| true` Whether to allow multiple selection. Good to know: When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`. It is recommended to render the selected items in a separate container.
`name`	—	`string` The `name` attribute of the combobox's input. Useful for form submission
`navigate`	—	`(details: combobox.NavigateDetails) => void` Function to navigate to the selected item
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`onFocusOutside`	—	`(event: calendar.FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onHighlightChange`	—	`(details: combobox.HighlightChangeDetails<T>) => void` Function called when an item is highlighted using the pointer or keyboard navigation.
`onInputValueChange`	—	`(details: InputValueChangeDetails) => void` Function called when the input's value changes
`onInteractOutside`	—	`(event: calendar.InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`	—	`(details: combobox.OpenChangeDetails) => void` Function called when the popup is opened
`onPointerDownOutside`	—	`(event: calendar.PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`	—	`(details: combobox.ValueChangeDetails<T>) => void` Function called when a new item is selected
`open`	—	`false \| true` Whether the combobox is open
`openOnChange`	`true`	`false \| true \| ((details: InputValueChangeDetails) => boolean)` Whether to show the combobox when the input value changes
`openOnClick`	`false`	`false \| true` Whether to open the combobox popup on initial click on the input
`openOnKeyPress`	`true`	`false \| true` Whether to open the combobox on arrow key press
`placeholder`	—	`string` The placeholder text of the combobox's input
`positioning`	—	`calendar.PositioningOptions` The positioning options to dynamically position the menu
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`readOnly`	—	`false \| true` Whether the combobox is readonly. This puts the combobox in a "non-editable" mode but the user can still interact with it
`required`	—	`false \| true` Whether the combobox is required
`scrollToIndexFn`	—	`(details: combobox.ScrollToIndexDetails) => void` Function to scroll to a specific index
`selectionBehavior`	`"replace"`	`"clear" \| "replace" \| "preserve"` The behavior of the combobox input when an item is selected - `replace`: The selected item string is set as the input value - `clear`: The input value is cleared - `preserve`: The input value is preserved
`translations`	—	`combobox.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.
`value`	—	`string[]` The controlled keys of the selected items

ClearTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseComboboxContext<T>) => ReactNode`

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`item*`	—	`any` The item to render
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`persistFocus`	—	`false \| true` Whether hovering outside should clear the highlighted state

ItemContext

Prop	Default	Type
`children*`	—	`(context: UseComboboxItemContext) => ReactNode`

ItemGroup

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemGroupLabel

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

List

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseComboboxReturn<T>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Trigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`focusable`	—	`false \| true` Whether the trigger is focusable

Root

Prop	Default	Type
`collection*`	—	`ListCollection<T>` The collection of items
`allowCustomValue`	—	`false \| true` Whether to allow typing custom values in the input
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`autoFocus`	—	`false \| true` Whether to autofocus the input on mount
`closeOnSelect`	—	`false \| true` Whether to close the combobox when an item is selected.
`composite`	`true`	`false \| true` Whether the combobox is a composed with other composite widgets like tabs
`defaultInputValue`	—	`string` The initial value of the combobox's input when it is not controlled. Prefer this over seeding with `inputValue` for uncontrolled usage.
`defaultOpen`	—	`false \| true` The initial open state of the combobox when it is first rendered. Use when you do not need to control its open state.
`defaultValue`	—	`string[]` The initial value of the combobox when it is first rendered. Use when you do not need to control the state of the combobox.
`disabled`	—	`false \| true` Whether the combobox is disabled
`disableLayer`	—	`false \| true` Whether to disable registering this a dismissable layer
`form`	—	`string` The associate form of the combobox.
`highlightedValue`	—	`null \| string` The active item's id. Used to set the `aria-activedescendant` attribute
`ids`	—	`Partial<{ root: string; label: string; control: string; input: string; content: string; trigger: string; clearTrigger: string; item: (id: string, index?: number) => string; positioner: string; itemGroup: (id: string \| number) => string; itemGroupLabel: (id: string \| number) => string; }>` The ids of the elements in the combobox. Useful for composition.
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`inputBehavior`	`"none"`	`"autohighlight" \| "autocomplete" \| "none"` Defines the auto-completion behavior of the combobox. - `autohighlight`: The first focused item is highlighted as the user types - `autocomplete`: Navigating the listbox with the arrow keys selects the item and the input is updated
`inputValue`	—	`string` The controlled value of the combobox's input
`invalid`	—	`false \| true` Whether the combobox is invalid
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`loopFocus`	`true`	`false \| true` Whether to loop the keyboard navigation through the items
`multiple`	—	`false \| true` Whether to allow multiple selection. Good to know: When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`. It is recommended to render the selected items in a separate container.
`name`	—	`string` The `name` attribute of the combobox's input. Useful for form submission
`navigate`	—	`(details: combobox.NavigateDetails) => void` Function to navigate to the selected item
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`onFocusOutside`	—	`(event: combobox.FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onHighlightChange`	—	`(details: combobox.HighlightChangeDetails<T>) => void` Function called when an item is highlighted using the pointer or keyboard navigation.
`onInputValueChange`	—	`(details: InputValueChangeDetails) => void` Function called when the input's value changes
`onInteractOutside`	—	`(event: combobox.InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`	—	`(details: OpenChangeDetails) => void` Function called when the popup is opened
`onPointerDownOutside`	—	`(event: combobox.PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`	—	`(details: combobox.ValueChangeDetails<T>) => void` Function called when a new item is selected
`open`	—	`false \| true` Whether the combobox is open
`openOnChange`	`true`	`false \| true \| ((details: InputValueChangeDetails) => boolean)` Whether to show the combobox when the input value changes
`openOnClick`	`false`	`false \| true` Whether to open the combobox popup on initial click on the input
`openOnKeyPress`	`true`	`false \| true` Whether to open the combobox on arrow key press
`placeholder`	—	`string` The placeholder text of the combobox's input
`positioning`	—	`combobox.PositioningOptions` The positioning options to dynamically position the menu
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`readOnly`	—	`false \| true` Whether the combobox is readonly. This puts the combobox in a "non-editable" mode but the user can still interact with it
`required`	—	`false \| true` Whether the combobox is required
`scrollToIndexFn`	—	`(details: combobox.ScrollToIndexDetails) => void` Function to scroll to a specific index
`selectionBehavior`	`"replace"`	`"clear" \| "replace" \| "preserve"` The behavior of the combobox input when an item is selected - `replace`: The selected item string is set as the input value - `clear`: The input value is cleared - `preserve`: The input value is preserved
`translations`	—	`combobox.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.
`value`	—	`string[]` The controlled keys of the selected items

ClearTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Content

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseComboboxContext<T>) => Element`

Control

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.InputHTMLAttributes<HTMLInputElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`item*`	—	`any` The item to render
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`persistFocus`	—	`false \| true` Whether hovering outside should clear the highlighted state

ItemContext

Prop	Default	Type
`children*`	—	`(context: UseComboboxItemContext) => Element`

ItemGroup

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ItemGroupLabel

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

List

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseComboboxReturn<T>`
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Trigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`focusable`	—	`false \| true` Whether the trigger is focusable

Root

Prop	Default	Type
`collection*`	—	`MaybeFunction<ListCollection<T>>` The collection of items
`allowCustomValue`	—	`false \| true` Whether to allow typing custom values in the input
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`autoFocus`	—	`false \| true` Whether to autofocus the input on mount
`children`	—	`Snippet<[]> \| undefined`
`closeOnSelect`	—	`false \| true` Whether to close the combobox when an item is selected.
`composite`	`true`	`false \| true` Whether the combobox is a composed with other composite widgets like tabs
`defaultInputValue`	—	`string` The initial value of the combobox's input when it is not controlled. Prefer this over seeding with `inputValue` for uncontrolled usage.
`defaultOpen`	—	`false \| true` The initial open state of the combobox when it is not controlled. Prefer this over seeding with `open` for uncontrolled usage.
`defaultValue`	—	`string[]` The initial keys of the selected items when it is not controlled. Prefer this over seeding with `value` for uncontrolled usage.
`disabled`	—	`false \| true` Whether the combobox is disabled
`disableLayer`	—	`false \| true` Whether to disable registering this a dismissable layer
`form`	—	`string` The associate form of the combobox.
`highlightedValue`	—	`null \| string` The active item's id. Used to set the `aria-activedescendant` attribute
`id`	—	`string`
`ids`	—	`Partial<{ root: string; label: string; control: string; input: string; content: string; trigger: string; clearTrigger: string; item: (id: string, index?: number) => string; positioner: string; itemGroup: (id: string \| number) => string; itemGroupLabel: (id: string \| number) => string; }>` The ids of the elements in the combobox. Useful for composition.
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`inputBehavior`	`"none"`	`"autocomplete" \| "autohighlight" \| "none"` Defines the auto-completion behavior of the combobox. - `autohighlight`: The first focused item is highlighted as the user types - `autocomplete`: Navigating the listbox with the arrow keys selects the item and the input is updated
`inputValue`	—	`string` The controlled value of the combobox's input
`invalid`	—	`false \| true` Whether the combobox is invalid
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`loopFocus`	`true`	`false \| true` Whether to loop the keyboard navigation through the items
`multiple`	—	`false \| true` Whether to allow multiple selection. Good to know: When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`. It is recommended to render the selected items in a separate container.
`name`	—	`string` The `name` attribute of the combobox's input. Useful for form submission
`navigate`	—	`(details: import("@destyler/combobox").NavigateDetails) => void` Function to navigate to the selected item
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`onFocusOutside`	—	`(event: import("@destyler/calendar").FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onHighlightChange`	—	`(details: import("@destyler/combobox").HighlightChangeDetails<T>) => void` Function called when an item is highlighted using the pointer or keyboard navigation.
`onInputValueChange`	—	`(details: import("@destyler/combobox").InputValueChangeDetails) => void` Function called when the input's value changes
`onInteractOutside`	—	`(event: import("@destyler/calendar").InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`	—	`(details: import("@destyler/combobox").OpenChangeDetails) => void` Function called when the popup is opened
`onPointerDownOutside`	—	`(event: import("@destyler/calendar").PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`	—	`(details: import("@destyler/combobox").ValueChangeDetails<T>) => void` Function called when a new item is selected
`open`	—	`false \| true` Whether the combobox is open
`openOnChange`	`true`	`false \| true \| ((details: import("@destyler/combobox").InputValueChangeDetails) => boolean)` Whether to show the combobox when the input value changes
`openOnClick`	`false`	`false \| true` Whether to open the combobox popup on initial click on the input
`openOnKeyPress`	`true`	`false \| true` Whether to open the combobox on arrow key press
`placeholder`	—	`string` The placeholder text of the combobox's input
`positioning`	—	`import("@destyler/calendar").PositioningOptions` The positioning options to dynamically position the menu
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`readOnly`	—	`false \| true` Whether the combobox is readonly. This puts the combobox in a "non-editable" mode but the user can still interact with it
`required`	—	`false \| true` Whether the combobox is required
`scrollToIndexFn`	—	`(details: import("@destyler/combobox").ScrollToIndexDetails) => void` Function to scroll to a specific index
`selectionBehavior`	`"replace"`	`"clear" \| "replace" \| "preserve"` The behavior of the combobox input when an item is selected - `replace`: The selected item string is set as the input value - `clear`: The input value is cleared - `preserve`: The input value is preserved
`skipAnimationOnMount`	`false`	`false \| true` Whether to allow the initial presence animation.
`translations`	—	`import("@destyler/combobox").IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.
`value`	—	`string[]` The controlled keys of the selected items

ClearTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

Content

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`render*`	—	`Snippet<[UseComboboxContext<T>]>`

Control

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Input

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"input">]>`
`children`	—	`Snippet<[]> \| undefined`

Item

Prop	Default	Type
`item*`	—	`unknown`
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`persistFocus`	—	`false \| true`

ItemContext

Prop	Default	Type
`render*`	—	`Snippet<[UseComboboxItemContext]>`

ItemGroup

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`id`	—	`string`

ItemGroupLabel

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

ItemIndicator

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

ItemText

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`

Label

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"label">]>`
`children`	—	`Snippet<[]> \| undefined`

List

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Positioner

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseComboboxReturn<T>`
`asChild`	—	`Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`immediate`	—	`false \| true` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state
`present`	—	`false \| true` Whether the node is present (controlled by the user)
`skipAnimationOnMount`	`false`	`false \| true` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Trigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`