Create a Tag Input with Flags Using Select2

Have you ever wanted to create a user-friendly, Gmail-style tag input system where users can select from a list of options with avatars, flags, or images? In this tutorial, I’ll walk you through building a sleek, email-style multi-select dropdown using jQuery Select2, enhanced with country flags to make your UI not only functional—but also beautiful.

Let’s dive in! 💻

💡 Why Use Select2?

Select2 is a jQuery-based replacement for standard HTML select elements. It supports searching, tagging, remote data sets, and infinite scrolling. It also allows you to customize the rendering of options and selections, which we’ll use to add flag images beside each country name.

🚀 The Final Output

Before we get started, here’s what we’re building:

✅ A multi-select dropdown
✅ Gmail-style pills for each selected item
✅ Country flag images next to each option
✅ Clean and responsive UI

🖼️ How to Add Flag Images

Make sure your image files (e.g., belgium.webp, canada.webp, greece.webp) are in the same folder as your HTML file or adjust the paths accordingly.

You can also use external flag image URLs from sites like Flagpedia or CountryFlags for more scalable options.