You're likely encountering this issue because Webflow’s native dropdown widget doesn’t support form elements like checkboxes inside it, and standard HTML <select>
elements don’t allow full customization or custom UI interactions like multi-select without the Cmd/Ctrl key.
Here’s how to build a custom multi-select dropdown with checkboxes and an always-expanded view using Webflow's native tools (no code):
1. Avoid the Native Dropdown and Select Elements
- Do not use Webflow’s native Dropdown or Select form elements.
- They are limited in customization, and the Select field requires Cmd/Ctrl for multi-select, which isn't usable on mobile and limits UX.
2. Build a Custom Dropdown with Checkboxes
Use Webflow’s Div Blocks and Interactions to visually recreate a dropdown with checkbox options:
- Create a Div Block as the main container and style it to look like a dropdown field.
- Inside it, place a Text Block or Form Text Field (read-only) to display selected items.
- Below that, add another Div Block (e.g., a "dropdown list") that contains your selectable options.
- Each option should be built with:
- A Checkbox component (from the Form Elements panel).
- A Text Block label next to it.
- Set the dropdown list to be hidden by default (
display: none
) and show it on click using Interactions.
3. Set Up Show/Hide Interactions
- Add an on-click interaction to the dropdown container or a custom arrow icon to toggle the visibility of the dropdown list Div.
- To dismiss it, you can add a close area or detect clicks outside with custom code (optional).
4. Style for Expanded View
- If you want the list always expanded (like a list of checkboxes), skip the hide/show interaction step.
- Just stack checkboxes vertically in a styled container that blends with the page design (e.g., simulates a dropdown box).
5. Capture Selected Values (Optional)
If you need to submit the selected options via a form:
- Each checkbox should have a unique name or ID.
- Webflow will submit each checked checkbox value as part of the form upon form submission.
If you need to display selected options dynamically in the dropdown label area, that would require custom JavaScript, which Webflow doesn't support natively in the Designer but can be added in Page Settings > Footer Code.
Summary
Webflow’s native dropdowns and select fields don’t support checkboxes or customizable multi-selects without Cmd-click. To create a multi-select dropdown with checkboxes and expanded view, use custom Div Blocks + Checkbox elements, style them to look like a dropdown, and use Interactions to manage visibility and interactivity without relying on native form field limitations.