Combobox

Basic combobox

<FuiCombobox
  :options="[
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'orange', label: 'Orange' },
    { value: 'grape', label: 'Grape' },
  ]"
  placeholder="Pick a fruit"
/>

With v-model

Selected: (none)

<script setup>
const selected = ref()
</script>

<template>
  <FuiCombobox v-model="selected" :options="options" placeholder="Select a country" />
</template>

Appearance

<FuiCombobox :options="options" placeholder="Outline" appearance="outline" />
<FuiCombobox :options="options" placeholder="Underline" appearance="underline" />
<FuiCombobox :options="options" placeholder="Filled darker" appearance="filled-darker" />
<FuiCombobox :options="options" placeholder="Filled lighter" appearance="filled-lighter" />

Sizes

<FuiCombobox :options="options" placeholder="Small" size="small" />
<FuiCombobox :options="options" placeholder="Medium" size="medium" />
<FuiCombobox :options="options" placeholder="Large" size="large" />

With prefix icon

<FuiCombobox :options="people" placeholder="Select a person">
  <template #contentBefore>
    <svg><!-- person icon --></svg>
  </template>
</FuiCombobox>

States

<FuiCombobox :options="options" placeholder="Disabled" disabled />
<FuiCombobox :options="options" placeholder="Invalid" invalid />
<script setup>
const val = ref('banana')
</script>
<template>
  <FuiCombobox v-model="val" :options="options" placeholder="Clearable" clearable />
</template>

Filtering

<FuiCombobox :options="countries" placeholder="Type to filter countries" />

Scrollable list (many options)

<FuiCombobox
  :options="countries"
  placeholder="Search a country"
  style="width: 280px"
/>

Props

Prop	Type	Default	Description
modelValue	string | undefined	undefined	Selected value
options	FuiComboboxOption[]	required	Combobox options
placeholder	string	''	Placeholder text
disabled	boolean	false	Disabled state
invalid	boolean	false	Error state
size	'small' | 'medium' | 'large'	'medium'	Component size
appearance	'outline' | 'underline' | 'filled-darker' | 'filled-lighter'	'outline'	Visual appearance
clearable	boolean	false	Show clear button when selected
freeform	boolean	false	Allow arbitrary text input
openOnFocus	boolean	true	Open dropdown on input focus
openOnClick	boolean	true	Open dropdown on input click

FuiComboboxOption

Prop	Type	Description
value	string	Option value
label	string	Display label
disabled?	boolean	Option disabled

Events

Event	Payload	Description
update:modelValue	string | undefined	Emitted when selection changes