Select2 integration for Stimulus

Lightweight controller that wires Select2 to @hotwired/stimulus.

Install

npm install stimulus-select2 @hotwired/stimulus jquery select2

Usage

Make sure Select2 is loaded (via a bundler import or script tag) before the controller connects.

import { Application } from "@hotwired/stimulus";
import Select2Controller from "stimulus-select2";
import "select2";
import "select2/dist/css/select2.css";

const application = Application.start();
application.register("select2", Select2Controller);

<select
  data-controller="select2"
  data-select2-placeholder="Pick a color"
  data-select2-width="style"
>
  <option></option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="red">Red</option>
</select>

Any data-select2-* attributes are converted to Select2 options using the same camelCasing that jQuery applies to data-* keys.

Development

• npm run build – generate dist bundles (CJS, ESM, and UMD)
• npm test – run the Vitest suite
• npm run dev – watch and rebuild the bundles
• npm run demo – build and open a local browser demo at /demo