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?
TL;DR
- Add
fs-cmsfilter-element="list"to the CMS Collection List andfs-cmsfilter-field="your-field-name"to each CMS item. - Apply
fs-cmsfilter-element="filter"to the radio button container, and set radio inputs withtype="radio", matchingvalueandfs-cmsfilter-fieldto the CMS field exactly. - Disable pagination, include FINSweet’s script before
</body>, and ensure it loads after the DOM is ready.
When using FINSweet Attributes CMS Filter with radio button filters in Webflow, ensuring all CMS items are detected and displayed correctly requires specific setup steps.
1. Set Proper Attributes on the CMS List
- Ensure
fs-cmsfilter-element="list"is added to your CMS Collection List wrapper. - This attribute tells FINSweet that this element contains the items to be filtered.
2. Use the Correct Attributes on the CMS Items
- Each CMS item inside your list should have
fs-cmsfilter-field="your-field-name", where "your-field-name" matches the name you’ll reference in your filter. - For example, if filtering by "Category", use
fs-cmsfilter-field="category"and ensure the corresponding CMS field has exact matching values.
3. Configure the Radio Buttons Correctly
- Wrap all radio button options in a form or div with
fs-cmsfilter-element="filter". - For each radio input, use
fs-cmsfilter-field="your-field-name"with the value set to the filtering term — it must match the Collection item’s field data exactly. - Use normal Webflow radio button inputs with these attributes:
type="radio"name="your-filter-group"(helps group radios together)value="ExactFilterValue"— Value must exactly match the Collection’s field text for this field.
4. Match Data Precisely
- Confirm that the value in your CMS item’s field matches exactly (case-sensitive, no extra spaces) with the radio’s value.
- If filtering fails, inspect each item and radio value side-by-side to confirm they match.
5. Initialize Attributes CMS Library Correctly
- Make sure FINSweet's CMS Library script is included on the page. Use the official CDN from their Attributes site.
- Place the script just before the
</body>tag. Confirm it loads properly (check browser console for errors).
6. Double-Check Layout Rendering
- Webflow’s default behavior or pagination settings may prevent all items from loading.
- Disable Pagination on the Collection List if active.
- If using Load More or Mix CMS filters, be sure they are compatible and set up properly with attributes like
fs-cmsload-element="list"orfs-cmsload-mode="pagination".
7. Verify JavaScript Loads After DOM Renders
- If your filter isn’t applying after loading, place the script after the CMS List and Filters in the document flow, or use
DOMContentLoadedto ensure it initializes last.
Summary
To ensure all CMS items are properly recognized and filterable with FINSweet Attributes CMS Filter and radio buttons:
- Use correct fs-cmsfilter attributes on the list, fields, and radio inputs.
- Match filter values exactly with CMS field values.
- Disable pagination, and verify that all items are loaded/rendered.
- Confirm FINSweet script is loaded and initializes after the DOM is ready.
This setup will allow users to filter Webflow CMS content using radio buttons effectively.
