Bootstrap 5 · Advanced

Multi-Select Dropdown

A checkbox dropdown that summarizes selections as badges.

Requires Bootstrap 5. Add the CDN tags below to your page (styles in <head>, scripts before </body>). The downloaded file already includes them.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="card border-0 shadow-sm" style="max-width:340px"><div class="card-body">
  <label class="form-label small fw-semibold">Select skills</label>
  <div class="dropdown"><button class="btn btn-outline-secondary w-100 text-start dropdown-toggle" data-bs-toggle="dropdown" id="msLabel">Choose…</button>
    <div class="dropdown-menu w-100 p-2" id="msMenu"><div class="form-check"><input class="form-check-input" type="checkbox" value="React"><label class="form-check-label small">React</label></div><div class="form-check"><input class="form-check-input" type="checkbox" value="Vue"><label class="form-check-label small">Vue</label></div><div class="form-check"><input class="form-check-input" type="checkbox" value="Svelte"><label class="form-check-label small">Svelte</label></div></div>
  </div>
  <div class="mt-2 d-flex flex-wrap gap-1" id="msTags"></div>
</div></div>

var menu=document.getElementById('msMenu'),label=document.getElementById('msLabel'),tags=document.getElementById('msTags');
menu.addEventListener('change',function(){var sel=[].filter.call(menu.querySelectorAll('input'),function(c){return c.checked}).map(function(c){return c.value});label.textContent=sel.length?sel.length+' selected':'Choose…';tags.innerHTML=sel.map(function(s){return '<span class="badge text-bg-primary">'+s+'</span>'}).join('')});

Free to use.This component uses Bootstrap 5 (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.