FormCombobox

A text field with a list of options (role combobox and listbox), filtered while typing without caring for case or accents. Options can come from a server and values can be created.

import { FormCombobox } from '@zairakai/vue-components/Form'

Usage

<FormCombobox />

Example

Fruit

• Apple
• Banana
• Cherry
• Date
• Elderberry

Value: none

<script setup>
  import { ref } from 'vue'

  const fruit = ref('')
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']
</script>

<template>
  <FormCombobox
    v-model="fruit"
    :options="fruits"
    label="Fruit"
    placeholder="Type to filter"
  />
  <p>Value: {{ fruit || 'none' }}</p>
</template>

Props

Name	Type	Default	Description
id	string
class	string
name	string
form	string
options	array|object	() => []	Strings, { value, label, disabled } objects or a { value: label } object.
modelValue	string|array	undefined	The chosen value, or the array of values when multiple.
multiple	boolean	false
label	string
placeholder	string
required	boolean	false
disabled	boolean	false
remote	boolean	false	The options come from a server: they are not filtered here, listen to the search event.
loading	boolean	false
creatable	boolean	false	Allow a value that is not in the options (tags).
emptyText	string	'No result'
removeLabel	string	'Remove'

Events

Name	Description
update:modelValue
search
open
close

Slots

Name	Description
option

See Theming for the class hooks and the data-* state of the components.