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

Loading API documentation...