Build a custom multi-select dropdown in Webflow using checkboxes and JavaScript. Learn how to create dynamic dropdowns with multiple selections, smart labels, and clean UX.
<script>
(function () {
function getCheckboxShortText(checkbox) {
// 1) Explicit short label via data attribute (on input or label)
if (checkbox.dataset.short) {
return checkbox.dataset.short.trim();
}
const parentLabel = checkbox.closest('label');
if (parentLabel && parentLabel.dataset.short) {
return parentLabel.dataset.short.trim();
}
// 2) If you wrap the short title, e.g. <strong>Series A</strong>
if (parentLabel) {
const titleEl = parentLabel.querySelector('[data-short], .option-title, strong, b');
if (titleEl) {
return titleEl.textContent.trim();
}
}
// 3) Fallback: take text before the first "("
const raw = (parentLabel ? parentLabel.textContent : checkbox.value || '').trim();
const beforeParen = raw.split('(')[0].trim();
return beforeParen || raw || 'Option';
}
document.querySelectorAll('.w-dropdown').forEach(function (drop) {
const triggerTextEl = drop.querySelector('.ms-trigger-text');
if (!triggerTextEl) return;
const placeholder =
triggerTextEl.getAttribute('data-placeholder') || 'Select…';
const checkboxes = drop.querySelectorAll(
'.w-dropdown-list input[type="checkbox"]'
);
function updateTriggerText() {
const selected = Array.from(checkboxes).filter(cb => cb.checked);
if (!selected.length) {
triggerTextEl.textContent = placeholder;
return;
}
const labels = selected.map(getCheckboxShortText);
const text = labels.join(', ');
const MAX_CHARS = 32;
triggerTextEl.textContent =
text.length > MAX_CHARS
? `${selected.length} selected`
: text;
}
checkboxes.forEach(cb =>
cb.addEventListener('change', updateTriggerText)
);
updateTriggerText();
});
})();
</script>
Webflow doesn’t support multi-select dropdowns out of the box—but with a small amount of custom JavaScript, you can create a fully functional, accessible multi-select dropdown using checkboxes.
In this tutorial, you’ll learn how to build a custom multi-select dropdown in Webflow that allows users to select multiple options, displays selected values dynamically, and gracefully handles long selections with smart truncation.
This approach works with native Webflow components, requires no third-party libraries, and is ideal for filters, forms, onboarding flows, and advanced UI patterns.
Webflow’s native Select field only allows single selections. While Webflow does support checkboxes, it doesn’t provide a built-in way to combine them into a dropdown interface.
That’s why most advanced Webflow projects rely on:
This method gives you full control over design, behaviour, and accessibility—without relying on external plugins.
The custom multi-select dropdown built in this tutorial includes:
This makes it suitable for production-level Webflow sites.
The logic follows a simple pattern:
To improve usability, the script intelligently chooses how to display selected values:
This keeps the UI clean and readable at all times.
This pattern is ideal for:
Because it’s built on native Webflow elements, it also works well with form submissions and automation tools.
This multi-select dropdown:
Since all content is rendered client-side and form-compatible, it is safe for SEO and indexing.
