aldeed:autoform-select2

September 16, 2026 · View on GitHub

An add-on Meteor package for aldeed:autoform. Provides a single custom input type, "select2", which renders an input using the select2 plugin.

Prerequisites

Select2 Library

You must use select2 4.0+.

Option 1:

Add this to <head>:

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

Option 2:

Install the NPM package (and its jQuery dependency):

$ meteor npm i --save jquery select2

Then in your client/main.js:

import 'select2';
import 'select2/dist/css/select2.css';

Option 3:

Get the files from GitHub and add them directly in your app /client/lib folder.

Troubleshooting

If you get $.select2 is not a function then you'll likely have to initialize select2 on import:

import initSelect2 from 'select2';
initSelect2();

If you use select2 < 4.1.0 you will get issues with jQuery4, which deprecated a few functions. For this you can either update to select2 >= 4.1.0 or shim the jquery functions via:

jQuery.isArray = Array.isArray;
jQuery.trim = (text) => {
  return text == null ? "" : text.trim();
};

For more troubleshooting read the select2 docs: https://select2.org/troubleshooting/common-problems/

AutoForm

In a Meteor app directory, enter:

$ meteor add aldeed:autoform

Select2 Bootstrap CSS (optional)

If using with Bootstrap, you can add the theme.

$ meteor npm i --save select2-bootstrap-theme

And add an additional import AFTER the other two in your client/main.js:

import 'select2';
import 'select2/dist/css/select2.css';
import 'select2-bootstrap-theme/dist/select2-bootstrap.css';

Installation

In a Meteor app directory, enter:

$ meteor add aldeed:autoform-select2

You can import this library dynamically or statically.

Dynamically, in your client/main.js:

import { AutoFormSelect2 } from 'meteor/aldeed:autoform-select2';
// ...
await AutoFormSelect2.load()

Or statically, in your client/main.js:

import 'meteor/aldeed:autoform-select2/static';

Installing Bootstrap theme

As of version 4.x there is no tight coupling to Bootstrap themes anymore. If you want to use the Bootstrap theme, you can install create use the following code:

const from = Template.afSelect2
from.helpers({
  atts: function addFormControlAtts () {
    const { select2Options, ...rest } = this.atts
    // Add bootstrap class
    return AutoForm.Utility.addClass(rest, 'form-control')
  }
})

Usage

Specify "select2" for the type attribute of any input. This can be done in a number of ways:

In the schema, which will then work with a quickForm or afQuickFields:

{
  tags: {
    type: Array,
    autoform: {
      type: 'select2',
      afFieldInput: {
        multiple: true
      }
    }
  },
  'tags.$': String
}

Or on the afFieldInput component or any component that passes along attributes to afFieldInput:

{{> afQuickField name="tags" type="select2" multiple=true}}

{{> afFormGroup name="tags" type="select2" multiple=true}}

{{> afFieldInput name="tags" type="select2" multiple=true}}

Setting Select2 Options

To provide select2 options, set a select2Options attribute equal to a helper function that returns the options object. Most of the data- attributes that the plugin recognizes should also work.

Example:

{{> afFieldInput name="tags" type="select2" multiple=true select2Options=s2Opts}}

Template.example.helpers({
  s2Opts() {
    return { placeholder: 'foo', tags: true };
  },
});

Demo

Live

Contributing

Anyone is welcome to contribute. Fork, make your changes, and then submit a pull request.