Combobox ​

A choice of one out of a long list, found by typing. Use a select while the list fits on the screen; once it does not, a field that filters the list is faster than scrolling.

<script setup lang="ts">
import { ref } from 'vue'

const zone = ref('Asia/Tashkent')
const zones = [
  { value: 'Europe/London', label: 'London', hint: 'UTC+0' },
  { value: 'Europe/Berlin', label: 'Berlin', hint: 'UTC+1' },
  { value: 'Asia/Tashkent', label: 'Tashkent', hint: 'UTC+5' },
  // …
]
</script>

<template>
  <OCombobox v-model="zone" :items="zones" aria-label="Time zone" />
</template>

Typing narrows the list to the items whose label contains the text. The arrow keys move through it, Enter chooses, Esc closes. Leaving the field without choosing puts the chosen item's label back: the value is always one of the items, never a loose piece of text.

It looks like an input and takes the full width of its container, so it sits in an OField like one.

Placeholder and nothing found ​

<OCombobox v-model="region" :items="regions" placeholder="Region" empty-text="No such region" aria-label="Region" />

Disabled ​

<OCombobox :items="regions" placeholder="Region" disabled aria-label="Region" />

Props ​

class and style go to the wrapper; other attributes (aria-label, name) go to the field.

Built on Reka UI Combobox.