Why can't I add a checkbox inside a dropdown widget in Webflow? And how can I create a multi-select dropdown with an expanded view in Webflow that allows the user to select multiple options without relying on the Cmd key?

You're running into limitations because Webflow's native Dropdown widget is not designed for form inputs like checkboxes. Additionally, Webflow does not provide a native multi-select dropdown UI out of the box.

​

Here's how to work around this and create a custom dropdown with checkboxes for multi-select functionality.

​

1. Understand the Limitation

​

• The Webflow Dropdown widget is intended for navigation and interactions, not for embedding form elements like checkboxes.
• Embedding checkboxes may work visually but lacks proper form functionality and user expectations (e.g., clicking inside closes the dropdown).
• The default Select field in Webflow does allow multiple selection using Ctrl/Cmd-click, but this is unintuitive for most users.

​

2. Design a Custom Multi-Select Dropdown with Checkboxes

​

To mimic a multi-select dropdown with checkboxes:

​

• Use a regular Div block as the main container. Style it to look like a dropdown.
• Inside this div, place a label or placeholder div to show selected items.
• Add another hidden div (Dropdown panel) under the placeholder to act as the custom dropdown list.
• Inside the dropdown panel, insert checkbox input elements with labels representing options.
• Use Webflow Interactions (IX2) to:
• Toggle the visibility of the dropdown panel when the main div is clicked.
• Close the panel when clicking outside.
• Use custom JavaScript (embedded via an HTML Embed component) to:
• Update visible selections dynamically when checkboxes are selected.
• Track selected values and sync them with a real form field if needed (e.g., a hidden input).

​

3. Add Custom Logic with JavaScript

​

Because Webflow doesn’t support dynamic form logic for checkboxes in dropdowns, you’ll need basic JS:

​

• Keep track of which checkboxes are checked.
• Update a hidden input field with comma-separated values (or JSON) before form submission.
• This ensures the selected data is actually sent with the Webflow Form Submission.

​

Example strategies:

• Use class targeting to limit the behavior to your custom dropdown elements.
• Use event listeners for checkbox change events to update the display text and hidden input value.

​

4. Create a Usable Design

​

• Add visual indicators (like a Down arrow icon).
• Use sticky or scrollable dropdown panels if the list is long.
• Make sure the dropdown is keyboard-accessible where possible.

​

Summary

​

You can't add checkboxes inside Webflow's native Dropdown because it's a navigation tool, not a form input container. To create a multi-select dropdown UI, design a custom dropdown using divs, checkboxes, interactions, and custom JavaScript to simulate the functionality and capture selected values for form submission.