How can I ensure that all items in a Webflow collection are recognized and displayed correctly when using FINSweet attributes CMS filters on a form, list, and text items to filter based on a selected radio button?

To ensure that all items in a Webflow CMS collection are correctly recognized and displayed when using Finsweet's CMS Filter with radio button filters, your structure must follow the required Finsweet Attributes and data-attribute patterns precisely.

Here’s how to ensure the filter works correctly:

1. Connect Finsweet CMS Filter with Your CMS List

• Make sure your Collection List Wrapper has the required attribute:
  fs-cmsfilter-element="list"
• Ensure the parent wrapper of all your filters (radio buttons) has this attribute:
  fs-cmsfilter-element="filters"
• Add individual filter group container for your radio button input group with:
  fs-cmsfilter-field="your-field"
  Replace your-field with the name of the CMS field used to filter (exactly as in Webflow CMS).

2. Structure Radio Buttons Properly

• Each radio button input inside the filter group must:
• Be an input of type="radio"
• Have the attribute fs-cmsfilter-value="Value" where "Value" matches the CMS field value exactly.
• Share the same name attribute to group them (e.g., name="category-filter").

Example:

• If your CMS has a Category field with values like "Design", "Development", ensure the field name in the attribute and radio button values match exactly.

3. Ensure Field Names Match CMS Field Slugs

• Webflow field names (like "Category") may have different slugs in the backend (e.g., category).
• Use the exact Field API Name (slug) from your CMS inside the fs-cmsfilter-field attribute.
• You can find this in the collection settings > the name below the field input.

4. Check CMS Items Have the Target Field

• Each item in the collection must have a value in the field you’re filtering by (e.g., all items must have a "Category").
• If any item is missing this value, it won’t show up when filters are used.

5. Add the Right Item Tags for Filtering

• Each dynamic item inside the Collection List must include the attribute:
  fs-cmsfilter-field="your-field" fs-cmsfilter-value="ItemValue"`
• Replace "your-field" and "ItemValue" appropriately.
• This lets Finsweet know what value each item represents for filtering.

6. Initialize Finsweet Attributes via Script

• At the bottom of your page, ensure the correct Finsweet CMS Filter attributes JavaScript is initialized.
• If using Attributes (no-code), the Attributes script should already be included by default in the Webflow project settings when you follow their instructions.

7. Confirm With Finsweet Debugger

• Use the Finsweet Attributes Debugger by adding ?fs-attributes-debug=true to your page URL (e.g., yourdomain.com/collection?fs-attributes-debug=true) to verify your setup is properly recognized.

Summary

To display all Webflow CMS items correctly when filtering with Finsweet CMS Filters and radio buttons:

• Set fs-cmsfilter-field on both the input filters and CMS items.
• Match field slugs exactly as they appear in Webflow.
• Ensure all CMS items have the relevant field filled.
• Use correct structure and required Attributes as per Finsweet’s documentation.

This guarantees the filter logic works consistently across your collection list.