Select 2

Module Drupal Illustration Voir sur
Nb téléchargements : 18965


  • Field widgets
  • Render element
  • Views integration
  • Facets integration
  • Documentation
  • Miscellaneous
  • User interface





permet de redesigner une select Back-officex


Status : Published
Projects : Modules
Maintenance status : Actively maintained
Development status : Under active development
Supported Branches : 8.x-1.
shield Stable releases for this project are covered by the security advisory policy.


Integrates Drupal autocomplete and select fields with the Select2 jQuery library.

It provides a render element (for usage in forms) and two field widgets.
One for simple select fields and another for entity reference fields.

The render element supports several select2 features:

  • Single and multiple selection
  • Internationalization
  • Integrates nicely with the seven theme

When the field widget is used in the entity reference context this module provides more features:

  • Autocomplete: The select options will not be rendered in the page and instead fetched by API during typing.
  • Autocreate: Like core's entity reference field this widget can create new entities on the fly.



Install this module like every other Drupal module. Also, it's needed to get the select2 library.

Composer (recommended)

If you would like to install the select2 library with composer, you probably used the drupal composer template to set up your project. It's recommended to use asset-packagist to install JavaScript libraries. So you will need to add the following to your composer.json file into the repositories section:

        "type": "composer",
        "url": ""

It's also needed to extend the 'installer-path' section:

    "web/libraries/{$name}": [

And add a new 'installer-types' section next to the 'installer-path' in the 'extra' section:

    "installer-types": ["bower-asset", "npm-asset"],

After this you can install the library with "composer require oomphinc/composer-installers-extender npm-asset/select2" and the library will be downloaded into the libraries folder.


Render element

You can use the select2 element in your forms like every other form element (see Form and render elements).

    $form['select2'] = [
      '#type' => 'select2',
      '#title' => t('My select2 form element'),
      '#options' => ['foo', 'bar'],

The select2 element sets useful defaults for the select2 configuration options. Nevertheless, you are able to override them:

    $form['select2'] = [
      '#type' => 'select2',
      '#title' => t('My select2 form element'),
      '#options' => ['foo', 'bar'],
      '#select2' => [
        'allowClear' => FALSE,


The select2 library provides the possibility to use your own theme for the select2 widgets. If you have your own theme, you can customize the appearance of the select2 widget:

Add a 'select2.theme' entry to the libraries.yml of your theme. This module will use your defined theme automatically.

          css/my-select2-theme.css: {}

To start with your own select2 theme, it's recommended to copy all style definitions with a '--default' from the select2/dist/css/select2.css file into your my-select2-theme.css file. Then replace '--default' with '--my_theme' (machine name of your theme) and start customizing.

Note: This module already provides a theme for Drupal's claro theme.

Toutes les informations proviennent du site