Skip to main content
🏠FormMultiselectVersion: 2.0.0-beta.7

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.

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.

index.html
<qtm-multiselect
placeholder="Custom renderValue">
</qtm-multiselect>

<script>
const multiselect = document.querySelector('qtm-multiselect');

multiselect.options = [
{ value: 'france', label: 'France' },
{ value: 'italy', label: 'Italy' },
{ value: 'spain', label: 'Spain' }
];

multiselect.renderValue = (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.

index.html
<qtm-multiselect is-searcheable="true">
</qtm-multiselect>

<script>
const multiselect = document.querySelector('qtm-multiselect');

multiselect.options = [
{ value: 'france', label: 'France' },
{ value: 'italy', label: 'Italy' },
{ value: 'spain', label: 'Spain' }
];
</script>

API

qtm-multiselect

PropertyTypeDefaultDescription
classesstring''list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabledbooleanfalseIf true, the component is disabled.
inputIdstringinput id of the multiselect
isSearchablebooleanfalseDetermines if the input is searchable (editable)
namestringName of the multiselect
nbVisibleOptionsnumberthe number of visible options when the dropdown overlay is scrollable
optionsMultiselectOption[][]List of options in dropdown overlay, ex: [{value: "option1", label: "Option 1"},... ]
placeholderstring''The short hint displayed in the input before the user enters a value
placement"bottom" | "top"'bottom'Placement of dropdown overlay
renderValue(selected: MultiselectOption[]) => stringnullCustom 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.
scrollablebooleanfalseif true, the dropdown-overlay is scrollable
size"large" | "medium" | "small"'medium'The size of child elements( menu-item, text-input & checkbox) in the multiselect
valuestring[][]set attribute 'value' to checked option list if you want these options to be active in the first render, ex: ['option1', 'option2',..]
EventTypeDescription
blurCustomEvent<void>Callback fired when the multiselect element loses focus.
focusCustomEvent<void>Callback fired when the multiselect element has focus.
valueChangedCustomEvent<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[]