How can I apply the is-active class to my Webflow View-all radio button using FinSweet's attributes method for filtering a CMS of blog posts?

To apply the is-active class to a "View All" radio button using Finsweet's Attributes for CMS filtering in Webflow, you need to use their active class feature properly and identify the structure of your radio button group.

1. Ensure Radio Button Group Has Correct Attributes

• For each filter option (including "View All"), apply the attribute:
  fs-cmsfilter-field="your-field-name"
• For the radio inputs, use:
  fs-cmsfilter-type="single" — this ensures only one filter is selected at a time.

2. Add “View All” Button as a Filter Reset

• Make your "View All" act as a reset by applying:
  fs-cmsfilter-reset (to clear that specific filter field)
• Or if you want it to reset all filters, use:
  fs-cmsfilter-reset="all"

This tells Finsweet to treat it as a reset button, clearing the selected filter and showing all items.

3. Use Active Class Attribute

• Finsweet automatically adds the is-active class to active filter elements.
• To match this behavior for your "View All" button:
• Ensure the button is inside the radio group with the same fs-cmsfilter-field.
• When it resets the filter, Finsweet will apply is-active to it, as if it's another filter option.
• If you're using fs-cmsfilter-reset="all", Finsweet will only apply is-active if it's styled like a filter button, not a separate reset control.

4. Add Switch Behavior with Custom Script (if Needed)

If the "View All" is not treated as one of the radio buttons (i.e., not grouped with the others), Finsweet might not automatically apply the is-active class. In that case:

• Use a small custom script to toggle the class manually, like detecting a click on the reset element and assigning is-active to that element while removing it from others.
• However, best practice is to group the "View All" with the other radio buttons and use fs-cmsfilter-reset so no scripts are needed.

Summary

To apply the is-active class to a “View All” radio button using Finsweet Attributes:

• Group the "View All" button with your field radio buttons using the same fs-cmsfilter-field.
• Add the attribute fs-cmsfilter-reset (for per-field reset) to the "View All" button.
• Finsweet will automatically assign the is-active class when the filter is cleared.
• Avoid using JavaScript unless the setup requires non-standard structure.