List filter not working when radio button clicked

Description

I have a quick look style on my home page with three custom radio buttons to choose from. My collection list is directly below. When I select a radio button the entire list disappears. Site URL

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

Steps to Reproduce

  1. Using the lumos framework, I created properties for the attributes. Added the attributes to the form, collection list and radio buttons
  2. Turned my collection list into a component
  3. Finished the design. I do think the values for my radio buttons are off. Not sure if I named them correctly. I am using the hidden (none) paragraph in my card component as my list field connector.

Expected Behavior

Once published, when I click the protected button, all the items with protected show up. Same with scheduled and available. I am using the paragraph in my card component as my list field connector.

Actual Behavior

when I click (whichever) all my items disappear

Video/Screenshots

Required: Please provide a short screen recording showing the issue

Additional Context

  • Browser: [e.g., Chrome 120, Safari 17]
  • Device: [e.g., Desktop, iPhone 14]

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

Hey @jillbascome! You’re really close to having this work :flexed_biceps:

The core issue is that each radio input has fs-list-value=“name” — that’s a placeholder the Lumos framework inserted but never replaced with your actual CMS data. When you click a radio, the filter looks for CMS items where the status field contains the literal text “name,” and since nothing matches that, everything disappears.

The fix is straightforward — replace “name” with the exact text your CMS status field outputs for each item. Since the paragraph inside each card already has fs-list-field=“status”, the filter will compare the radio’s fs-list-value against whatever text that paragraph renders on the published site.

Here’s what to do:

  1. Open your Webflow CMS collection and note the exact text stored in the status field for each item — things like Protected, Scheduled, Available for import. Casing and spelling must match exactly.

  2. In Webflow Designer, select each radio button and update fs-list-value from “name” to the matching CMS status text:

fs-list-value="Protected"
fs-list-value="Scheduled"
fs-list-value="Available for import"

(use your actual CMS values here)

  1. Remove the fs-list-field=“” attribute from the h3 heading on your card — it has an empty value right now, which can interfere with filtering.

  2. Delete the stray attributes on your radio inputs — protected=“value”, scheduled=“value”, and available-for-import=“value” aren’t valid fs-* attributes and can go.

  3. Publish and test on your live staging URL — Attributes don’t run in Designer or preview mode.

Also worth a quick check: make sure your CMS items actually have content in the status field, since an empty field won’t match even with the correct setup.

Let us know how it goes after those changes — if things are still disappearing after publishing, drop your staging URL and we’ll dig deeper :folded_hands:

Hi Finn,

I went through the site again and I think I have one glitch removed. I checked and my properties on the check UI component with the the form buttons seem to be in the right place. I think my issue is how do a pull the status name from the status reference field in the produce varieties cms. The cms referenced is the badges containing the name and the badge icon. I was using it that way to filter the badge icons on the cards, which is working using the conditionality feature. Should I use the nested attribute with this in order to reference the status name from the reference field in my produce varieties cms? Will “name” in the cms here (when I click the purple button) be the name from the status reference field or the name of the produce. My filter still isn’t working.

?

Hi @jillbascome how did it go after referencing the status name from the reference field?
Could you share the web page link, thanks

Hi Jesse. Thats my problem. I can’t find how to get the reference from the status reference field in my produce varieties cms. When I click for the cms I don’t see the status reference field anywhere even though I know its there. So when I click the quick search buttons on the published site I just get a blank page. I am a bit twisted around, but I have used the attributes many times… Any help greatly appreciated.

Hi…Is there anything I can do better, or that I have done wrong. Any help would be greatly appreciated

Hi @jillbascome

Here’s a loom showing how to get status connected to the cms items

The vid goes through whole setup

Implement & let me know

Thanks

Hi Jesse,

I implemented it but its still not working right…https://agriguardlocalfirst.webflow.io/

I know its close but its still not there. This a bit of a tricky job, I know. I am grateful for the help thus far and would have never figured out the solution you showed me but if you could take a look one more time…please

From here you can see that I implemented all your recommendations

Ok cool no problem @jillbascome let me dig in some more, will keep you posted

Hi @jillbascome

Finally identified the part you missed in the previous loom

Here’s a loom showing how to set it up

Everything should workout now

Let me know!

https://webflow.com/design/agriguardlocalfirst?utm_medium=project_link&utm_source=designer&utm_content=agriguardlocalfirst&workflow=comment&pageId=69aab02d9c52a2ec2173ff88&locale=en

I’m sorry Jesse but it still isn’t working. I had already set the attributes name and value as recommended previously. I think I will just rebuild that page so that I can start fresh with the instruction video and no components. I think I can ensure it will work as I have used this attribute many times. I will let you know if there are any issues on the new build, but if you can see something that could help complete this one, I would be grateful.

Hey @jillbascome

From the screenshots the issue is clear

Name should correspond to Attribute 2 Name
ValueAttribute 2 Value

Only that is needed

You can get rid of this attribute in the 2nd screenshot

NameAttribute 2 Name
ValueAttribute 2 Value

Take note that NAME matches ...2 Name
VALUE...2 Value

Good day Jesse, I am still struggling with my filtering system for this same site. I decided to skip the components and just filter from scratch. I thought I had everything working but I am still having issues. I have made sure all my attributes are correctly placed and even used the finsweet cloneable to make sure I had them in the right place, but its not filtering all the items that need to be filtered in that a lot of the items that should be showing are not (just one or two). I went into the cms to double check to see if all the correct selections are made and they appear to be in place. Plus I can still see all the info I need on the card. But they are not all showing when I click the radio button. And none of my categories are showing up. Some of the items are showing on the status. I am also having another issue with quarantine page although I think its because I didn’t put the collection list in the form for the radios to work?..I was also wondering would it be because I have 2 different statuses one for the import status and one for the quarantine and I don’t think I labled them differently not knowing if I should have (actually just thought of that). I have one more page of filtering (2 if you include my home page that I still haven’t resolved, but can with this produce catalogue correction). Once I resolve this the site will be ready for presentation, so I could really use the advice once more. Always grateful for any recommendations of instructions

Hey @jillbascome

Let me check this out & get back to you

Page 1: Produce Catalogue Page

I have made sure all my attributes are correctly placed and even used the finsweet cloneable to make sure I had them in the right place, but its not filtering all the items that need to be filtered in that a lot of the items that should be showing are not (just one or two). I went into the cms to double check to see if all the correct selections are made and they appear to be in place. Plus I can still see all the info I need on the card. But they are not all showing when I click the radio button.

Publish all the drafts in the Produce Varieties CMS Collection
Currently only 3 of the 40 entries are published, the rest show a Changes in draft message

And none of my categories are showing up. Some of the items are showing on the status.

This seems to have been sorted out & the Category radio buttons are now working as shown in the loom below

The Clear buttons

The Clear buttons currently only have the fs-list-element="clear" attribute
While this works, both of those buttons now act as a “Clear All” button & end up clearing all radio button selections from all filters on the page

Add the attribute fs-list-field="status" to the Status radio buttons Clear
& fs-list-field="category" to the Category radio buttons Clear

The Search input field

If you need the Search here... field to also work with the Card produce names add an fs-list-field="title" to the .card_produce_title names

Loom Link: Produce Catalogue Page Loom
One little update: Loom

Page 2: Quarantine Page

I am also having another issue with quarantine page although I think its because I didn’t put the collection list in the form for the radios to work?..I was also wondering would it be because I have 2 different statuses one for the import status and one for the quarantine and I don’t think I labled them differently not knowing if I should have (actually just thought of that).

On the Quarantine page, the radio buttons are setup correctly
The Status radios have the correct attributes & work as expected
The Type radios also have the correct attributes but don’t currently work

To get the Type radios working, add the attribute fs-list-field="type" to the relevant text on the Collection Item cards
I show how to achieve this on the Quarantine Page Loom below

The Clear buttons

Add the two needed attributes to get the Clear buttons working

fs-list-element="clear" to both buttons
Then fs-list-field="status" to the Status radio buttons Clear
& fs-list-field="type" to the Type radio buttons Clear

The Search input field

If you need the Search here... field to also work with the Card title names add an fs-list-field="title" to the .q-title names as shown in the loom

Loom Link: Quarantine Information Page Loom

Page 3: News & Updates Page

For the News & Updates page, you just need to add the fs-list-element="list" on the .updates-list Collection List
Everything else checks out

The Search input field

If you need the Search here... field to also work with the Card title names add an fs-list-field="title" to the .tag_title names as shown in the loom

Loom Link: News & Updates Page Loom

That should be all for all your 3 filter pages

Let me know how it goes

Thanks

Everything works great now! Thank you so much

Glad to hear @jillbascome

Let me know if you need any help on the homepage