Filter + select not working

Finsweet Components
1

Description

We have a filter with 2 checkbox lists en 1 select field with data pulled from cms. The checkboxes separately work quite fine, but if you click one checkbox in the 2 different lists, it already stops working properly as you see in the result count. With that, when something is checked, the select field list stops giving the cms options. When unchecked, it shows the list again in select.

Site URL

Required: Please provide a staging/production URL where we can see the issue

Expected Behavior

All filter functions work and the select field stays populated.

Actual Behavior

After clicking a checkbox, the select field provides 0 options. And the filter doesn’t work properly.

NDA Notice: If you’re under an NDA, please feel free to send us a Direct Message/Email with the above information.

2

Hey @studiopiraat, there are actually two separate things going on here — and both are fixable without any code.

Issue 1: Select field loses its options when a checkbox is checked

This is a known behavior. List Filter targets all lists with fs-list-element="list" on the page, which means it’s also hitting the hidden collection list that populates your “Geschreven door” dropdown. When a checkbox filters the page, that source list gets filtered too — leaving the select with 0 options.

The fix is to use fs-list-instance to scope which list belongs to which context. Two ways to do it:

  1. Add fs-list-instance="main" (or any unique name) to both your main CMS collection list and your filter form. This excludes the select’s source list from that filter context.
  2. Add fs-list-instance="main" to a common parent wrapper that contains both the filter form AND the main collection list, but does NOT wrap the hidden select-value source list.

Either approach works — go with whichever fits your current structure.

Issue 2: Combining checkboxes from both groups gives wrong results

Looking at your HTML, both the “Thema” and “Soort” checkbox groups have data-name="Checkbox". When two groups share the same name, the filter engine treats them as one group, which breaks the cross-group logic.

Fix this by giving each group a unique name in Webflow’s checkbox field settings:

  • “Thema” checkboxes → set Name to thema
  • “Soort” checkboxes → set Name to soort

Checkboxes within the same group should still share a name with each other — just make sure each group is distinct.

Try both fixes together and let us know how it goes! :flexed_biceps: