Django Forms: Django-select2 Not rendering multi select box correctly

Im using django-select2 : Django-Select2 — Django-Select2 8.0.1.dev16+g81c9b25 documentation

Im attempting to create a multiple tag select dropdown box similar to this:

The problem is its not loading as expected and is like this:

Below is my code. Im using the Select2TagWidget currently but I have tried the following other widgets:


class BankForm(ModelForm):
     required_css_class = "required"
     formField1 = forms.ModelMultipleChoiceField(
       label="Lead Bank",

class Meta:
model = AdditionalBank
fields = [

""" Labels for the fields we didn't override """
labels = {}

Ive added the correct path to my file

path("select2/", include("django_select2.urls")),

I have the redis queue setup correctly in my file. Im pretty confident the rest of the configuration is setup correctly outlined in the docs for django-select2

My Front end form is rendering this html/css:

<select name="lead\_bank" lang="None" data-minimum-input-length="1" data-theme="default" data-allow-clear="false" data-tags="true" data-token-separators="\[\&quot;,\&quot;, \&quot; \&quot;\]" required="" id="id\_lead\_bank" class="django-select2" multiple="">

<option value="1">Citi</option>

<option value="2" selected="">USBank</option>

<option value="3">Wells Fargo</option>

<option value="4" selected="">NY Bank</option>


Keep in mind I am very new to front end dev. Primarily a backend dev.

Thank you in advance !

That type of “enhanced widget” is something handled within the browser.

In the Add note example at the top, what JavaScript / CSS libraries were used to create those effects?

If that’s how you want the box to appear, that’s what you need to replicate. Also see API Documentation — Django-Select2 8.0.1.dev16+g81c9b25 documentation

Hey @KenWhitesell. Unfortunately I dont know what javascript or css libraries are being used to render that form. I just pulled it from a google search images of a “Multi Select tag Form”

In that case, you may want to redo your search, but look for the JavaScript libraries that create that type of widget.

1 Like

Have you included the {{form.meida}} tag in your template? Last time I used the Select2Widget. The documentation was missing instructions to include it. This loads the CSS and JSS the widget uses in your frontend.