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

Disabled

Add the disabled attribute to the multiselect element to disable it. You can also disable individual options by setting the disabled property on specific options.

<qtm-multiselect
  disabled
  placeholder="Disabled multiselect"
  [options]="[
    { value: 'france', label: 'France' },
    { value: 'italy', label: 'Italy' },
    { value: 'spain', label: 'Spain' }
  ]"
/>

<qtm-multiselect
  placeholder="Multiselect with disabled option"
  [options]="[
    { value: 'france', label: 'France' },
    { value: 'italy', label: 'Italy', disabled: true },
    { value: 'spain', label: 'Spain' }
  ]"
/>

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.

app.component.html

<qtm-multiselect
  placeholder="Custom renderValue"
  [options]="[
    { value: 'france', label: 'France' },
    { value: 'italy', label: 'Italy' },
    { value: 'spain', label: 'Spain' }
  ]"
  [renderValue]="customRenderValue">
</qtm-multiselect>

app.component.ts

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(', ')}`;
}

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.

app.component.html

<qtm-multiselect
  placeholder="Autosuggest"
  isSearchable
  [options]="[
    { value: 'france', label: 'France' },
    { value: 'italy', label: 'Italy' },
    { value: 'spain', label: 'Spain' }
  ]">
</qtm-multiselect>

API

Loading API documentation...