Combobox

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

Show Code

<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

Show Code

<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>

Advanced

Advanced usage with custom filtering and item rendering.

Show Code

<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.

Show Code

<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

Show Code

<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({
  collection: 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({ collection: 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
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
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 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
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 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?: solid_js457.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
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 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
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 keys of the selected items

ClearTrigger

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js457.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?: solid_js457.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?: solid_js457.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?: solid_js457.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?: solid_js457.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?: solid_js457.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?: solid_js457.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?: solid_js457.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?: solid_js457.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?: solid_js457.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?: solid_js457.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?: solid_js457.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?: solid_js457.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?: solid_js457.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("/home/runner/work/ui/ui/packages/svelte/dist/types").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
defaultOpen	—	false | true
defaultValue	—	string[]
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 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
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: NavigateDetails) => void) | undefined Function to navigate to the selected item
onExitComplete	—	() => void Function called when the animation ends in the closed state
onFocusOutside	—	((event: FocusOutsideEvent) => void) | undefined Function called when the focus is moved outside the component
onHighlightChange	—	(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").ComboboxHighlightChangeDetails<T>) => void Function called when an item is highlighted using the pointer or keyboard navigation.
onInputValueChange	—	(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").ComboboxInputValueChangeDetails) => void Function called when the input's value changes
onInteractOutside	—	((event: InteractOutsideEvent) => void) | undefined Function called when an interaction happens outside the component
onOpenChange	—	(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").ComboboxOpenChangeDetails) => void Function called when the popup is opened
onPointerDownOutside	—	((event: PointerDownOutsideEvent) => void) | undefined Function called when the pointer is pressed down outside the component
onValueChange	—	(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").ComboboxValueChangeDetails<T>) => void Function called when a new item is selected
open	—	false | true Whether the combobox is open
openOnChange	true	false | true | ((details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").ComboboxInputValueChangeDetails) => 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	—	PositioningOptions | undefined 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: ScrollToIndexDetails) => void) | undefined 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	—	IntlTranslations | undefined Specifies the localized strings that identifies the accessibility elements and their states
unmountOnExit	false	false | true Whether to unmount on exit.
value	—	string[] The keys of the selected items

ClearTrigger

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>
children	—	Snippet<[]> | undefined

Content

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Context

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

Control

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Input

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]>
children	—	Snippet<[]> | undefined

Item

Prop	Default	Type
item*	—	unknown
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
persistFocus	—	false | true

ItemContext

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

ItemGroup

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
id	—	string

ItemGroupLabel

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

ItemIndicator

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

ItemText

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>
children	—	Snippet<[]> | undefined

Label

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>
children	—	Snippet<[]> | undefined

List

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Positioner

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

RootProvider

Prop	Default	Type
value*	—	UseComboboxReturn<T>
asChild	—	Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").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("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>
children	—	Snippet<[]> | undefined