<template>
<w-stack align-items="center" direction="column" gap="large" justify-content="center" full-width>
<w-combobox id="single-combobox" label="Insurance"></w-combobox>
<w-combobox id="single-combobox" label="Insurance">
<div slot="hint">
Hint from slot with
<w-link href="https://watson.docplanner.design/" target="_blank">
rich content
</w-link>
in it.
</div>
</w-combobox>
</w-stack>
</template>
<script type="module">
const comboboxItemsList = [
{
title: 'No insurance',
value: 'no-insurance'
},
{
title: 'AXA',
value: 'axa'
},
{
title: 'Allianz',
value: 'allianz'
},
{
title: 'Cega',
value: 'cega'
}, {
title: 'iMed24',
value: 'imed24'
},
{
title: 'Inter Partner',
value: 'inter-partner'
},
{
title: 'Lux Med',
value: 'lux-med'
}
];
const comboboxModelValue = [];
const singleCombobox = document.querySelector('#single-combobox');
function onComboboxClick(event) {
console.log('Combobox clicked', event);
}
function onComboboxItemClick(event) {
const [, data] = [...event.detail];
console.log(`Item clicked: ${data.title}`);
}
function onComboboxUpdateModelValue(event) {
const [selection] = [...event.detail] || '';
const selectedItems = selection.map(item => {
return item.title;
});
singleCombobox['model-value'] = selectedItems;
}
singleCombobox.items = comboboxItemsList;
singleCombobox['model-value'] = comboboxModelValue;
singleCombobox.addEventListener('click', onComboboxClick);
singleCombobox.addEventListener('item-click', onComboboxItemClick);
singleCombobox.addEventListener('update:modelValue', onComboboxUpdateModelValue);
</script>
Props
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
trigger-type |
Determines whether the combobox is triggering on click or input typing. |
string |
click |
click, input |
|
multiselect |
Determines whether the combobox is multiselect or not. |
boolean |
|
false, true |
|
loading |
Determines whether the combobox is loading or not. |
Boolean |
|
false, true |
|
error |
Optional error message to be shown under the combobox field. |
string,boolean |
|
|
|
hint |
Optional text about the expected combobox. |
string |
|
|
|
label |
The label for the combobox field. |
string |
|
|
|
placeholder |
Placeholder text to display within the combobox field. |
string |
|
|
|
required |
Determines whether the combobox is required or not. |
boolean |
|
false, true |
|
target |
Type string or an actual DOM node where you want render component |
string|object |
body |
|
|
use-teleport |
When it is set to true, combobox menu will teleport the content part into the target. |
boolean |
false |
false, true |
|
open |
Controls whether the dropdown is open or not. |
boolean |
false |
false, true |
|
position |
Controls the position of the dropdown menu in relation to the trigger. `bottom-left` will align it to the bottom left of the trigger. `bottom-right` will align it to the bottom right of the trigger. `top-left`and 'top-right' will align it to the top left and right respectively. |
string |
bottom-left |
bottom-left, bottom-right, top-left, top-right |
|
items |
Controls the number of dropdown items and dropdown groups to display. |
array |
|
[{ heading: string, items: array [ { title: string, trailingIcon: string, leadingIcon: string, href: string, to: string, value: string | number } ], hideDivider: boolean }] |
|
v-model model-value |
Selection of the combobox. Accepts an array of item objects. For single selection, pass in an array of one object. |
array |
|
[{ title: string, value: string }] |
|
translations |
Object with all necessary translations. |
object |
{ triggerIconSearch: 'Search', triggerRemoveSelectedItems: 'Remove selected items', triggerIconToggle: 'Toggle', itemIconCheck: 'Item selected', messageResultsNotFound: 'No results found' } |
{ triggerIconSearch: string, triggerRemoveSelectedItems: string, triggerIconToggle: string, itemIconCheck: string, messageResultsNotFound: string} |
|
readonly |
Determines whether the combobox is readonly or not. |
boolean |
|
false, true |
|
filter-fn |
Custom function to filter combobox items. |
Function |
getComboboxItemsFiltered |
|
Events
|
Name |
Description |
Type |
|---|---|---|
|
input |
|
{ "names": [ "undefined" ] } |
|
item-click |
This event is emitted when the combobox item is clicked. |
{ "names": [ "Event, Object<string, string>" ] } |
|
v-model update:modelValue |
This event is emitted when the combobox selection is changed. |
{ "names": [ "Array" ] } |
Slots
|
Name |
Description |
|---|---|
|
hint |
Use it to provide rich content for input hint. Takes precedence over hint property. |