Combobox

Default example

Pizza
Pasta
Fries
Rice
Beans
<BaseCombobox
options="[ 'Pizza', 'Pasta', 'Fries', 'Rice', 'Beans' ]"
v-model="selectedFoods"
placeholder="Selecteer gerechten..."
label="Kies gerechten"
/>

Props (7)

  • optionsarrayThe options for the combobox component
  • v-modelstringModel value of the radio buttons
  • placeholderstringThe placeholder for the combobox component
  • labelstringThe label for the combobox component
  • tooltipstringText of the tooltip shown via an info button next to the label
  • hintstringThe hint text shown below the combobox
  • errorstringThe error message shown below the combobox

Geavanceerd voorbeeld

👩‍💻
Alice Vance
👨‍💻
Bob Smith
🧑‍🚀
Charlie Ding
👩‍🎤
Diana Prince
🕵️‍♂️
Ethan Hunt
<BaseCombobox
v-model="userSelection"
:options="userOptions"
item-key="id"
search-key="name"
placeholder="Selecteer teamleden..."
label="Kies Teamleden"
>
<template #selected-item="{ item, remove }">
<div>
<span class="avatar"> {{ item.avatar }} </span>
<span class="name"> {{ item.name }} </span>
</div>
</template>
<template #combobox-item="{ item }">
<div>
<span> {{ item.avatar }} </span>
<div>
<span> {{ item.name }} </span>
<span> {{ item.email }} </span>
</div>
</div>
</template>
</BaseCombobox>

Props (8)

  • v-modelstringModel value of the combobox
  • optionsstringThe options for the combobox component
  • item-keystringThe key of each item to uniquely identify it
  • search-keystringThe key of each item to search on
  • placeholderstringThe placeholder for the combobox component
  • labelstringThe label for the combobox component
  • hintstringThe hint text shown below the combobox
  • errorstringThe error message shown below the combobox