ICombobox ​

A select you can type into. It takes the same items as ISelect and filters them against the query. The field shows the selected option's label; the model holds its value.

<script setup lang="ts">
const client = ref('')

const clients = [
  { label: 'Acme Industries', value: 'acme' },
  { label: 'Bolt Logistics', value: 'bolt' },
  { label: 'Cirrus Systems', value: 'cirrus' },
]
</script>

<template>
  <ICombobox v-model="client" :items="clients" placeholder="Search clients" />
</template>

A plain string is expanded to { label: value, value }, so a list of names needs no shaping.

Groups ​

An entry with its own items becomes a labelled run of options. A group disappears once nothing inside it matches — type cir and watch "Recent" go.

<ICombobox
  v-model="client"
  placeholder="Search clients"
  :items="[
    { label: 'Recent', items: ['Acme Industries', 'Bolt Logistics'] },
    {
      label: 'Archived',
      items: [
        { label: 'Cirrus Systems', value: 'cirrus' },
        { label: 'Delta Foundry', value: 'delta' },
      ],
    },
  ]"
/>

Sizes ​

<ICombobox v-model="client" :items="clients" size="sm" />
<ICombobox v-model="client" :items="clients" size="md" />
<ICombobox v-model="client" :items="clients" size="lg" />

Empty results ​

emptyText is the line shown when the query matches nothing. The empty slot replaces that markup entirely and receives the current query.

<ICombobox
  v-model="client"
  :items="clients"
  placeholder="Type something unmatched"
  empty-text="No clients match that."
/>

Create from the query ​

Set create to offer a row for whatever was typed when nothing matches. Choosing it emits create with the trimmed query and leaves the model alone — add the option and select it yourself.

<script setup lang="ts">
const client = ref('')
const clients = ref([{ label: 'Acme Industries', value: 'acme' }])

function onCreate(query: string) {
  const value = slugify(query)
  clients.value.push({ label: query, value })
  client.value = value
}
</script>

<template>
  <ICombobox
    v-model="client"
    :items="clients"
    placeholder="Search or add a client"
    create
    :create-label="query => `Add ${query}`"
    @create="onCreate"
  />
</template>

Virtualized rows ​

For lists in the thousands, virtual renders only the rows on screen. The field below holds 5,000 options.

<ICombobox
  v-model="sku"
  :items="fiveThousandItems"
  virtual
  placeholder="Search 5,000 SKUs"
/>

virtual cannot be combined with grouped items: groups are flattened and their labels dropped, with a warning in dev. estimateSize is the assumed row height in px, used to size the scrollbar before the rows are measured — set it when you have restyled rows to a different height.

Use virtual for lists in the thousands.

Invalid ​

<ICombobox v-model="client" :items="clients" placeholder="Search clients" invalid />

Inside an IFormField the field passes its own validity down, so invalid rarely needs setting by hand.

Props ​

disabled, multiple, dir and the rest of Reka UI's ComboboxRoot props are forwarded.

Events ​

Reka UI's own ComboboxRoot events are re-emitted unchanged.

Slots ​

Item shapes ​

interface ComboboxItemOption {
  label: string
  value: string
  disabled?: boolean
}

interface ComboboxItemGroup {
  label: string
  items: (ComboboxItemOption | string)[]
}

Attributes you set land on the input, so aria-label and friends reach the control the reader types into.