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?

TL;DR
  • Add fs-cmsfilter-element="filter", fs-cmsfilter-field="[field-name]", and fs-cmsfilter-active (no value) to your "View All" radio button.  
  • Leave fs-cmsfilter-value empty or set to match the unfiltered state, and ensure no other filters have fs-cmsfilter-active by default for correct default selection and is-active class application.

To apply the is-active class to your "View All" radio button using FinSweet’s Attributes for CMS filtering, you need to configure it correctly based on their attribute documentation for active states.

​

1. Use the fs-cmsfilter-active Attribute

  • FinSweet applies an active class (e.g., is-active) to elements that use the filter when the attribute fs-cmsfilter-active is present.
  • This applies to buttons, checkboxes, or radio buttons that act as filters.
  • Your "View All" radio button must include both the filter group and the active-state attribute.

​

2. Add Necessary Attributes to the "View All" Button

  • Ensure your "View All" radio button contains:
  • fs-cmsfilter-element="filter"
  • fs-cmsfilter-field="[field-name]"
  • fs-cmsfilter-active
  • Leave fs-cmsfilter-value empty or match it with the default/unfiltered state.

​

Example (in Designer custom attributes):

  • fs-cmsfilter-element = filter
  • fs-cmsfilter-field = category (or your CMS field name)
  • fs-cmsfilter-value = `` (empty string or "All" depending on your config)
  • fs-cmsfilter-active (added without a value)

​

3. Set the Default Active Filter

  • If you want "View All" to be the default option when the page loads, make sure:
  • It is the only radio filter set with the fs-cmsfilter-active attribute when the page initializes.
  • All other filter buttons (other categories) do not have the fs-cmsfilter-active attribute by default.

​

4. Add and Style the is-active Class

  • Webflow and FinSweet will automatically add the is-active class to whichever filter has the fs-cmsfilter-active attribute.
  • Style the is-active class in Webflow’s Style panel to define how the active button looks.

​

5. Optional: Ensure Filter Type Is Set

  • If you are grouping radio buttons, make sure they share the same fs-cmsfilter-field.
  • Your other radio buttons should have the same fs-cmsfilter-element="filter" and relevant fs-cmsfilter-field, but different fs-cmsfilter-value.

​

Summary

To apply the is-active class to your "View All" radio filter in Webflow using FinSweet Attributes, add fs-cmsfilter-active along with the proper field and value. FinSweet will toggle the is-active class automatically based on user interaction or default page load.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I create animations that trigger when scrolling to different sections on my website built with Webflow and using CSS Scroll Snap, even when the "scroll into view" interaction doesn't work correctly?
How can I make the sign-up form modal in Webflow's homepage only appear once, either after initial load or after the user has signed up or closed out, and how and where can I insert the code to set a cookie?
Is there a way to handle the 10,000 character limit on custom code elements in Webflow?
Why does Webflow wrap text with a div instead of a span when using the CSS selector ".class > span" in custom code? How can I get around this?
Why isn't my Webflow site showing up in Google search results, even when searching by URL?
How can I display a div that will only be visible to Internet Explorer users, including IE 11, on my Webflow site? The purpose of this div is to display a message saying "For the best experience, please open using Chrome, Firefox, or Safari. Thanks!"
Has anyone experienced a situation where a CSS class is being added to the Body tag upon page load in Webflow, which overrides the default site styling? The attribute being added is 'data-wf-spring-theme-render' with a corresponding value. Thank you.
Why are the items after the load more button appearing twice when combining the finsweet attributes 'CMS filter' and 'CMS Load' in Webflow?
How can I create a background scroll interaction effect using Webflow?
How can I solve the issue of my custom fonts "jumping" back to the fallback font when launching my Webflow site in Google Chrome? I have already tried using .ttf, .eot, and .woff versions of the font, but it hasn't resolved the problem. Any suggestions?
How can I reset the tablet and phone versions of my website in Webflow to match the PC version and remove any unknown padding?
What is the maximum number of items that can be added to a collection in the Webflow Lite Account Plan?
How can I work around the limitation of having a collection list within a collection list in Webflow when designing a website for a tour company that needs to apply and group tags for tours?
How can I set up a custom email address using Webflow?
How can I make all external links open in a new tab by default on my Webflow site, while keeping internal links opening in the current tab? Is there a solution that doesn't involve manually ticking a box for each link? Thank you!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?