Combobox

Searchable select: type to filter the options. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue
import { UiCombobox } from '@ziyarago/ui/vue'

Default

Vue
<UiCombobox
  label="Airport"
  placeholder="Search airport"
  v-model="value"
  :options="[{ value: 'jed', label: 'Jeddah (JED)' }, { value: 'med', label: 'Madinah (MED)' }, { value: 'ruh', label: 'Riyadh (RUH)' }, { value: 'tas', label: 'Tashkent (TAS)' }, { value: 'ist', label: 'Istanbul (IST)' }]"
 />

Empty

Vue
<UiCombobox
  label="Nationality"
  placeholder="Start typing"
  empty-text="Nothing found"
  v-model="value"
  :options="[{ value: 'uz', label: 'Uzbekistan' }, { value: 'kz', label: 'Kazakhstan' }, { value: 'tr', label: 'Turkey' }]"
 />

Sizes

Vue
<UiCombobox
  size="xs"
  label="City"
  v-model="value"
  :options="[{ value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }, { value: 'taif', label: 'Taif' }]"
 />

<UiCombobox
  size="sm"
  label="City"
  v-model="value"
  :options="[{ value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }, { value: 'taif', label: 'Taif' }]"
 />

<UiCombobox
  size="md"
  label="City"
  v-model="value"
  :options="[{ value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }, { value: 'taif', label: 'Taif' }]"
 />

<UiCombobox
  size="lg"
  label="City"
  v-model="value"
  :options="[{ value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }, { value: 'taif', label: 'Taif' }]"
 />

<UiCombobox
  size="xl"
  label="City"
  v-model="value"
  :options="[{ value: 'makkah', label: 'Makkah' }, { value: 'madinah', label: 'Madinah' }, { value: 'jeddah', label: 'Jeddah' }, { value: 'taif', label: 'Taif' }]"
 />

API reference

Searchable single-choice dropdown. Use for long option lists where typing to filter is faster than scrolling.

Props

PropType and valuesDefaultDescription
modelValuev-modelstring | number—Value of the selected option.
options{ value: string | number; label: string; disabled?: boolean }[]'[]'Available options. Filtering is a case-insensitive match on label. An option with disabled: true cannot be chosen.
labelstring—Label shown above the control.
hintstring—Helper text under the control. Hidden while error is set.
errorstring—Error message under the control. Turns the control red and is announced with role="alert".
placeholderstring—Defaults to "Search…".
emptyTextstring'—'Shown when no option matches the query.
clearablebooleanfalseShows a clear (x) button while a value is selected; it calls change with null.
filter(option, query) => boolean—Custom matcher. Default is a case-insensitive substring match on label.
disabledbooleanfalseDisables the control.
sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with the value of the chosen option.

Notes

  • Selecting from the list is the only way to set a value: free text is never emitted.
  • The list closes on outside click and on Escape.