Multi Select Dropdown

In modern web applications, user-friendly interfaces are a key to success. Multi-select dropdowns with tags are widely used in admin dashboards, product filters, and signup forms. In this tutorial, we will create a fully functional multi-select component from scratch using pure HTML, CSS, and JavaScript. No libraries required.

What We’ll Learn

How to design a dropdown UI for multiple selections
How to show selections as removable tags
How to extract and display the selected values
How to make it responsive and interactive

HTML Structure

The HTML defines the layout of the component. It includes:

A container for selected tags (selected-items)
A dropdown arrow (dropdown-arrow)
A list of clickable options inside the dropdown
A submit button to display the selected values
An output area to show results

<div class="container">
 <div class="multi-select" id="multiSelect">
  <div class="selected-items" id="selectedItems"></div>
  <div class="dropdown-arrow">&#9662;</div>
  <div class="dropdown" id="dropdown">
   <div data-value="apple">Apple</div>
   <div data-value="banana">Banana</div>
   <div data-value="cherry">Cherry</div>
   <div data-value="grape">Grape</div>
   <div data-value="mango">Mango</div>
  </div>
 </div>
 <div class="out-box">
  <button id="showBtn">Submit</button>
  <div id="output">Selected items...</div>
 </div>
</div>

CSS Styling

The CSS styles the component to look clean and modern. It includes:

Layout and spacing for the container
Dropdown behavior with arrow rotation
Styling of selected tags (background color, close icon)
Show/hide dropdown logic via classes
Output box styling

* {
 font-family: sans-serif;
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
body {
 height: 100vh;
 background: #f0f0f0;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}
.container {
 width: 370px;
 background-color: white;
 padding: 20px;
 border-radius: 10px;
 box-shadow: 2px 2px 10px #ccc;
}
.multi-select {
 width: 100%;
 border: 1px solid #ccc;
 border-radius: 6px;
 padding: 10px 40px 10px 10px;
 background: white;
 position: relative;
 cursor: pointer;
}
.dropdown {
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 background: white;
 border: 1px solid #ccc;
 max-height: 150px;
 overflow-y: auto;
 z-index: 100;
 display: none;
}
.multi-select.active .dropdown {
 display: block;
}
.dropdown div {
 padding: 10px;
 cursor: pointer;
}
.dropdown div:hover {
 background: #f0f0f0;
}
.selected-items {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
 min-height: 30px;
 width: 100%;
}
.selected-items span {
 background: #aaa;
 color: white;
 padding: 5px 10px;
 border-radius: 5px;
 font-size: 14px;
 display: flex;
 align-items: center;
 gap: 5px;
}
.selected-items span i {
 cursor: pointer;
}
.dropdown-arrow {
 position: absolute;
 right: 10px;
 top: 50%;
 transform: translateY(-50%);
 pointer-events: none;
 font-size: 18px;
 transition: transform 0.3s ease;
}
.multi-select.active .dropdown-arrow {
 transform: translateY(-50%) rotate(180deg);
}
#showBtn {
 padding: 15px 50px;
 cursor: pointer;
 background: #333;
 color: white;
 border: none;
 border-radius: 5px;
 margin: 20px 0;
}
#output {
 padding: 10px;
 width: 100%;
 background: white;
 border: 1px solid #ccc;
 border-radius: 5px;
 min-height: 50px;
}

JavaScript Functionality

JavaScript adds interactivity to the component. Here’s what each part does:

Toggle dropdown: Clicking on the field shows/hides the dropdown.
Select item: Clicking an option adds a tag and stores the value.
Remove tag: Clicking the x icon removes the selected tag.
Outside click: Closes the dropdown if clicked outside.
Submit button: Displays selected values in the output box.

const multiSelect = document.getElementById('multiSelect');
const dropdown = document.getElementById('dropdown');
const selectedItems = document.getElementById('selectedItems');
const output = document.getElementById('output');
const showBtn = document.getElementById('showBtn');

const selectedValues = new Set();

multiSelect.addEventListener('click', () => {
 multiSelect.classList.toggle('active');
});

dropdown.addEventListener('click', (e) => {
 const value = e.target.getAttribute('data-value');
 const label = e.target.textContent;

 if (!selectedValues.has(value)) {
  selectedValues.add(value);

  const tag = document.createElement('span');
  tag.innerHTML = `${label} <i data-remove="${value}">&times;</i>`;
  selectedItems.appendChild(tag);
 }
});

selectedItems.addEventListener('click', (e) => {
 if (e.target.dataset.remove) {
  const valueToRemove = e.target.dataset.remove;
  selectedValues.delete(valueToRemove);
  e.target.parentElement.remove();
 }
});

document.addEventListener('click', (e) => {
 if (!multiSelect.contains(e.target)) {
  multiSelect.classList.remove('active');
 }
});

showBtn.addEventListener('click', () => {
 if (selectedValues.size === 0) {
  output.textContent = 'No items selected.';
 } else {
  output.textContent = 'Selected: ' + Array.from(selectedValues).join(', ');
 }
});

Conclusion

And there you have it, a modern, responsive, and fully custom multi-select dropdown with tag support and output functionality. This component is ideal for forms, filters, or anywhere users need to choose multiple options with clarity and control.

You can enhance it further by:

Adding a search bar inside the dropdown
Limiting the maximum number of selections
Integrating with backend form submissions

Watch Video on YouTube

Multi Select Dropdown with HTML, CSS & JS

Download The Source File

Get immediate access to the original source file with a simple click, and start customizing it to fit your needs.

Learning Axis

youtube.com/@learning-axis

HTML

CSS

* {
  font-family: sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
 }

body {
  height: 100vh;
  background: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }

.container {
  width: 370px;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 2px 2px 10px #ccc;
 }

.multi-select {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px 40px 10px 10px;
  background: white;
  position: relative;
  cursor: pointer;
 }

.selected-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 30px;
  width: 100%;
 }

.selected-items span {
  background: #aaa;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
 }

.selected-items span i {
  cursor: pointer;
 }

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  max-height: 150px;
  overflow-y: auto;
  z-index: 100;
 }

.dropdown div {
  padding: 10px;
  cursor: pointer;
 }

.dropdown div:hover {
  background: #f0f0f0;
 }

.multi-select.active .dropdown {
  display: block;
 }

.dropdown-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 18px;
  transition: transform 0.3s ease;
 }

.multi-select.active .dropdown-arrow {
  transform: translateY(-50%) rotate(180deg);
 }

#showBtn {
  padding: 15px 50px;
  cursor: pointer;
  background: #333;
  color: white;
  border: none;
  border-radius: 5px;
  margin: 20px 0;
 }

#output {
  padding: 10px;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  min-height: 50px;
 }

const multiSelect = document.getElementById('multiSelect');
 const dropdown = document.getElementById('dropdown');
 const selectedItems = document.getElementById('selectedItems');
 const output = document.getElementById('output');
 const showBtn = document.getElementById('showBtn');

const selectedValues = new Set();

multiSelect.addEventListener('click', () => {
  multiSelect.classList.toggle('active');
 });

dropdown.addEventListener('click', (e) => {
  const value = e.target.getAttribute('data-value');
  const label = e.target.textContent;

if (!selectedValues.has(value)) {
   selectedValues.add(value);

const tag = document.createElement('span');
   tag.innerHTML = `${label} <i data-remove="${value}">×</i>`;
   selectedItems.appendChild(tag);
  }
 });

selectedItems.addEventListener('click', (e) => {
  if (e.target.dataset.remove) {
   const valueToRemove = e.target.dataset.remove;
   selectedValues.delete(valueToRemove);
   e.target.parentElement.remove();
  }
 });

document.addEventListener('click', (e) => {
  if (!multiSelect.contains(e.target)) {
   multiSelect.classList.remove('active');
  }
 });

showBtn.addEventListener('click', () => {
  if (selectedValues.size === 0) {
   output.textContent = 'No items selected.';
  } else {
   output.textContent = 'Selected: ' + Array.from(selectedValues).join(', ');
  }
 });

Projects

Web Integrations