Multiselect
Dropdown multiselect allow users to select multiple items from a list of predefined items in a dropdown menu. Items are displayed as checkboxes items to make the user understand the multiselection capability.
Use the options
property to set options to the multiselect component. By setting the value
property, options can be checked at the first render.
<qtm-multiselect
placeholder="Default multiselect"
options={[
{ value: "france", label: "France" },
{ value: "italy", label: "Italy" },
{ value: "spain", label: "Spain" }
]}>
</qtm-multiselect>
<qtm-multiselect
placeholder="Multiselect with checked options"
value={[
"france"
]}
options={[
{ value: "france", label: "France" },
{ value: "italy", label: "Italy" },
{ value: "spain", label: "Spain" }
]}>
</qtm-multiselect>
Sizes
The multiselect component can be render in small
, medium
and large
sizes.
<qtm-multiselect
size="small"
placeholder="Select an option"
options={[
{ value: "france", label: "France" },
{ value: "italy", label: "Italy" },
{ value: "spain", label: "Spain" }
]}>
</qtm-multiselect>
...
Placement
The multiselect list can be displayed on top
or bottom
using the placement
property.
...
<qtm-multiselect
placement="top"
placeholder="Select an option displayed on top"
options={[
{ value: "france", label: "France" },
{ value: "italy", label: "Italy" },
{ value: "spain", label: "Spain" }
]}>
</qtm-multiselect>
Scrollable
Set the scrollable
property to true
to make the multiselect component scrollable. By default, 6 options are diisplayed. You can change the number of displayed options by setting the nbVisibleOptions
property.
...
<qtm-multiselect
scrollable="top"
nbVisibleOptions={4}
placeholder="Scrollable multiselect with 4 displayed options"
options={[
{ value: "france", label: "France" },
{ value: "italy", label: "Italy" },
{ value: "spain", label: "Spain" },
{ value: "portugal", label: "Portugal" },
{ value: "germany", label: "Germany" },
{ value: "england", label: "England" },
{ value: "norway", label: "Norway" }
]}>
</qtm-multiselect>
Custom Rendering
You can customize how the selected values are displayed in the multiselect input using the renderValue
property. This property accepts a function that takes the selected options and returns a string.
<template>
<qtm-multiselect
placeholder="Custom renderValue"
:options="options"
:renderValue="customRenderValue"
/>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'france', label: 'France' },
{ value: 'italy', label: 'Italy' },
{ value: 'spain', label: 'Spain' }
],
};
},
methods: {
customRenderValue(selected) {
return `Selected: ${selected
.sort(
(a, b) =>
['france', 'italy', 'spain'].indexOf(a.value) - ['france', 'italy', 'spain'].indexOf(b.value)
)
.map(option => option.label)
.join(', ')}`;
}
}
};
</script>
Autosuggest
You can activate the Autosuggest to filter through the list of items to give the user a smaller range of options to choose from.
<template>
<qtm-multiselect
placeholder="Autosuggest"
:options="options"
isSearchable
:renderValue="customRenderValue"
/>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'france', label: 'France' },
{ value: 'italy', label: 'Italy' },
{ value: 'spain', label: 'Spain' }
],
};
}
};
</script>
API
qtm-multiselect
Property | Type | Default | Description |
---|---|---|---|
classes | string | '' | list of classes to override or extend the styles applied to the component. You can use available utility classes by importing |
disabled | boolean | false | If true, the component is disabled. |
inputId | string | input id of the multiselect | |
isSearchable | boolean | false | Determines if the input is searchable (editable) |
name | string | Name of the multiselect | |
nbVisibleOptions | number | the number of visible options when the dropdown overlay is scrollable | |
options | MultiselectOption[] | [] | List of options in dropdown overlay, ex: [{value: "option1", label: "Option 1"},... ] |
placeholder | string | '' | The short hint displayed in the input before the user enters a value |
placement | "bottom" | "top" | 'bottom' | Placement of dropdown overlay |
renderValue | (selected: MultiselectOption[]) => string | null | Custom function to render the selected values. It receives an array of selected options and should return a string to be displayed in the input field. |
scrollable | boolean | false | if true, the dropdown-overlay is scrollable |
size | "large" | "medium" | "small" | 'medium' | The size of child elements( menu-item, text-input & checkbox) in the multiselect |
value | string[] | [] | set attribute 'value' to checked option list if you want these options to be active in the first render, ex: ['option1', 'option2',..] |
Event | Type | Description |
---|---|---|
blur | CustomEvent<void> | Callback fired when the multiselect element loses focus. |
focus | CustomEvent<void> | Callback fired when the multiselect element has focus. |
value-changed | CustomEvent<OnChangeData> | The callback is triggered when an option is selected. Upon selection, you can retrieve the event details using 'event.detail', which provides an object {selectedOptions: selectedOptionValue[] |