stimulus-multiselect

This controller automatically will convert a selectfield to a usable dropdown containing all its options.

Installation

Requires stimulus.js and works best with webpack-encore.

• npm -i @nfy-npm/stimulus-multiselect in your console
• import '@nfy-npm/stimulus-multiselect' in your entrypoint
• @import "~@nfy-npm/stimulus-multiselect/dist/css/_multiselect.scss"; after bootstrap in your css
• yarn dev
• profit

Usage

set data-attribute="multiselect" to your select field and make it multiple

This Controller requires:

• element:
  The element needs to be of type select and the attribute multiple. Additionally unlike a default select, it also supports a placeholder attribute.

Alternative Values:

• data-multiselect-target="all":
  the all target will be converted to a special option that automatically selects/unselects all options of the dropdown
• data-multiselect-max-display-value:
  This determines how many fields can be shown in the selected display of the dropdown The default value is 5
• data-multiselect-all-text-value:
  This text will be shown if you have selected more than the max-display-value and all options are checked
• data-multiselect-number-text-value:
  This text will be shown if you have selected more than the max-display-value. To show the number of items that are selected you can add a {count} placeholder.

Example:

<select multiple data-controller="multiselect"
        placeholder="select some stuff"
        data-multiselect-max-display-value="3"
        data-multiselect-all-text-value="you selected ALL the things!"
        data-multiselect-number-text-value="you selected {count} of the things!"
>
  <option value="" data-multiselect-target="all">select ALL the things!</option>
  <option value="bs1">thing 1</option>
  <option value="bs2">thing 2</option>
  <option value="bs3">thing 3</option>
  <option value="bs4">thing 4</option>
  <option value="bs5">thing 5</option>
  <option value="bs6">thing 6</option>
</select>