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
    :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.

component.vue

<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"
    isSearchable
    :options="options"
    :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[]