Vanilla JavaScript

@stackline/multiselect

Framework-agnostic multiselect dropdown with search, grouping, templates, and switchable skins.

Install

Production package

npm install @stackline/multiselect

Option 2

Direct download

stackline-multiselect-1.0.4.zip

Live demo

Settings-only skin switcher

Updates only settings.theme and settings.skin

Usage

Option 1: use with npm

<link rel="stylesheet" href="./node_modules/@stackline/multiselect/src/stackline-multiselect.css">
<div id="countries"></div>
<script src="./node_modules/@stackline/multiselect/src/stackline-multiselect.js"></script>
<script>
  var dropdown = new StacklineMultiSelect("#countries", {
    data: [
      { id: 1, itemName: "Brazil" },
      { id: 2, itemName: "Canada" },
      { id: 3, itemName: "Portugal" }
    ],
    selected: [{ id: 2, itemName: "Canada" }],
    settings: {
      text: "Select countries",
      enableSearchFilter: true,
      theme: "material",
      skin: "material",
      showClearAll: true
    }
  });
</script>

Alternative

Option 2: use direct files

<link rel="stylesheet" href="./stackline-multiselect.css">
<div id="countries-direct"></div>
<script src="./stackline-multiselect.js"></script>
<script>
  var dropdown = new StacklineMultiSelect("#countries-direct", {
    data: [
      { id: 1, itemName: "Brazil" },
      { id: 2, itemName: "Canada" },
      { id: 3, itemName: "Portugal" }
    ],
    selected: [{ id: 2, itemName: "Canada" }],
    settings: {
      text: "Select countries",
      enableSearchFilter: true,
      theme: "material",
      skin: "material",
      showClearAll: true
    }
  });
</script>

Configuration

Core settings

Setting Default Purpose
singleSelectionfalseUse one selected item.
enableSearchFiltertrueShow the search field.
enableCheckAlltrueShow select all and clear all.
showClearAlltrueShow the global remove button.
badgeShowLimit4Show a counter after visible chips.
groupBy""Group options by a field name.
limitSelection0Limit selected items.
theme / skin"classic"Choose the visual skin.

Custom skins

Create any skin name

dropdown.setTheme("brand");
.stackline-dropdown.theme-brand {
  --stackline-ms-primary: #7c3aed;
  --stackline-ms-primary-soft: rgba(124, 58, 237, 0.14);
  --stackline-ms-surface: #ffffff;
  --stackline-ms-surface-soft: #f5f3ff;
  --stackline-ms-outline: #c4b5fd;
  --stackline-ms-outline-strong: #7c3aed;
  --stackline-ms-on-surface: #22183f;
  --stackline-ms-on-surface-muted: #6b5d80;
  --stackline-ms-chip-bg: #ede9fe;
  --stackline-ms-chip-text: #5b21b6;
}

Events