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.

Clearing ​

clearable turns the dropdown arrow into a clear button as soon as something is selected — the arrow is only useful while the field is empty, and two targets in the same corner of a 36px field is a mis-click waiting to happen.

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

Clearing empties the query, returns focus to the input and sets the model to null — or to [] when multiple.

Rename it for a non-English app with clearLabel, which is its accessible name.

Multiple ​

multiple lets the field hold several values. The model becomes an array and chosen rows keep their tick.

<script setup lang="ts">
const selected = ref(['acme', 'bolt'])
</script>

<template>
  <ICombobox v-model="selected" :items="clients" multiple clearable />
</template>

Each value is drawn as a removable chip inside the field, and the input stays a query box — so the labels are readable at a glance and there is still somewhere to type. Remove one with its cross, or with ⌫ while the query is empty — the first press marks the last chip and the next removes it, as in ITagsInput. The field wraps and grows rather than clipping, the same trade ITagsInput makes.

The popup stays open as you tick rows, so a run of choices is one visit rather than one visit each.

Reach for ITagsInput instead when the values are free text rather than a fixed list, and for ICheckbox when there are only a handful of options and hiding them behind a popup buys nothing.

Props ​

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