Advanced CMS Filtering with a Custom Select Dropdown

One such case is the native <select> element. It’s notoriously difficult to style consistently across browsers using CSS, which is why many developers opt for custom dropdown components. But what if we could keep the native functionality and accessibility — while integrating it seamlessly into Webflow?

In this tutorial, I’ll show you how to build a custom dropdown filter by combining:

• Webflow’s Custom Element feature – used to embed a native HTML <select> element that dynamically populates its options from a CMS Collection.
• Finsweet’s Filter Attributes – used to connect the dropdown’s UI with Webflow CMS filtering logic, making it easy to filter content and customize the behavior without writing code.

This isn’t about writing JavaScript from scratch — it’s about understanding how to bridge no-code tools with native web standards to get full control over UX. It’s a clean, scalable approach that works especially well for filtering CMS-based content like blogs, projects, or listings.

At Pixerry Studio, we apply this hybrid mindset daily — not relying on templates or hacks, but using the right tools with the right logic to build smart, flexible, high-performing websites.

Want to skip the setup and jump straight into a working version? Clone the Webflow Project
Get full access to the Webflow project with all filters, CMS structure, and Finsweet integration pre-configured.

Explore it, reverse-engineer it, and make it your own.

Step 1: Create Your CMS Structure

Set up the Webflow CMS with the collections you want to filter.

1. Main Collection: For example, a Jobs collection (with fields like Name, Department, and Location).
2. Reference Collections: Create separate collections for Departments, Locations, etc.
3. In your main collection, add Reference Fields that link to these filter collections.

Why use dynamic <option> values?

When your filter options are bound to CMS collections, you avoid hardcoding values. This means your filters always stay in sync with your CMS content — automatically updated, easier to manage, and future-proof.

Step 2: Build the Filter and Result List in Webflow

Filter Section:

1. Add a Form Block – Webflow requires a form wrapper for the built-in select to function properly.
2. Inside the Form, add a Dropdown component.
3. Inside the dropdown’s menu, drag in a Custom Element.
   • Set its Tag to select.
   • Give it a name attribute (e.g., department).
4. Inside the <select>, add another Custom Element.
   • Set its Tag to option.
   • Important: Add an empty value attribute (just the name, no value). This is required for the Finsweet filter to work.
5. Bind dynamic options:
   • Add a Collection List directly after your custom <option> element.
   • Bind it to your reference collection (Departments, Locations, etc.).
   • Inside the Collection Item, add a Custom Element:
     • Set the Tag to option.
     • Set the value attribute to be bound to the referenced CMS field (e.g., Name).
     • Insert the label text dynamically (e.g., category name).
   • Style the options if needed.

Result List:

1. In a new section or div block, add another Collection List.
2. Bind it to your Main Collection (Jobs in this example).
3. Bind dynamic fields like:
   • Job Title
   • Department (via Reference field)
   • Location
4. Style the layout as needed.

Step 3: Apply Finsweet Custom Select Attributes

1. Follow Finsweet’s Custom Select documentation to apply fs-cmsfilter attributes.
2. Add:
   • fs-cmsfilter-element="custom-select" to your select wrapper
   • fs-cmsfilter-element="option" to each dynamic option
3. Important: Your first <option> must include a value attribute with no value set (e.g., value="") — this acts as the “All” filter.
4. Optional UX enhancements:
   • Use fs-customselect-reset, fs-customselect-hideinitial, and other modifiers
   • Improve UX with fixed height, scrollable option list, and styled scrollbar

Step 4: Connect Filters to the CMS List with Finsweet Attributes

1. Apply Finsweet CMS Filter Attributes.
2. Add:
   • fs-cmsfilter-element="filters" to the wrapper around your filter form
   • fs-cmsfilter-element="list" to the Collection List of filtered items
   • fs-cmsfilter-field="IDENTIFIER" to your <select> — where IDENTIFIER matches the CMS field (e.g., department)
3. Make sure your <select> has a name attribute — this is required for the filter to bind properly.

Step 5: Publish and Test Your Site

• Click Publish to preview on the live domain
• Test filtering behavior
• Style or refine UX details (reset buttons, loading states, etc.)