(2022) Webflow CMS Filter Active Class | No-Code Attributes

In this video, we learn how to build Active states for checkboxes and radios in CMS Filter with Attributes.
TIMESTAMPS:
00:00 - Intro
00:28 - Docs Overview
02:20 - Add Attributes to Filter
03:03 - Combo vs. Global class
05:21 - Add Active Class to Filter
06:55 - Add Active Class to List
08:18 - Combo Class
09:10 - Live Example
10:07 - Thank You
ATTRIBUTES: Add advanced features to your Webflow project without code. Attributes is the new way to implement ‪@Finsweet‬ into your ‪@Webflow‬ project.
See all videos from the playlist: • Attributes
-----------------------------------------------
// RESOURCES FROM THE VIDEO
Attributes: finsweet.com/attributes
Attributes Support Service: www.finsweet.com/attributes/s...
Live Example: cms-filter-example.webflow.io/
Webflow Cloneable: finsweet.info/attributes-cms-...
Subscribe to Finsweet: ruclips.net/user/Finsweet?su...
Get the full list of FREE Finsweet products: www.finsweet.com/subscribe
-----------------------------------------------
// ABOUT US
We’re Finsweet - a Webflow enterprise partner, badass product creator, and educational content powerhouse. We are taking Webflow to a new level and sharing everything with you along the way!
🙌 Join our community - finsweet.com/fin-pro
🔥 Add superpowers to your Webflow website - finsweet.com/attributes
🧰 Extend your Webflow workflow - finsweet.com/extension
🚀 Build clear, scalable & organized Webflow websites - www.finsweet.com/client-first
👀 Check out products used at Finsweet - www.finsweet.com/recommended
🛍️ Buy Finsweet merch - finsweet.com/merch
-----------------------------------------------
// SOCIAL
Finsweet Live: / finsweetlive
Podcast: anchor.fm/finsweet
Twitter: / thatsfinsweet
Instagram: / thatsfinsweet
Facebook: / thatsfinsweet
Dribbble: dribbble.com/thatsfinsweet
Behance: www.behance.net/thatsfinsweet/
Webflow: webflow.com/team/Finsweet/
-----------------------------------------------
// TAGS
#active #filter #state #webflow #attributes
-----------------------------------------------
Thanks for your support! 🤟

[@FestieBestieHydration]

Thank GOD for this, I have spent 4 hours trying to figure out how to make my checkboxes into buttons and the answer is all right here where it should be. Thank you

[@AndreyBest2010]

Thanks for your work

[@templa946]

Hey guys thanks for everything. Not sure Youll ever seee this but is there away of putting an active class on the filtered element?

[@liamlegaillard9840]

Hello I have a question is it possible to couple its filters to a leaflet card? I am creating a real estate website and I need the geolocation of the properties. For the moment I'm just able to geolocate it but I can't manage to filter them at the same time as the map.

[@haydosx]

How do I apply an active state to a div? Not a field or label. e.g. I want to show the text "Showing x results of y items" only when the list is being filtered. There seems to be fs-cmsfilter-element attributes for "empty" and "initial", but not "active".

[@lebaodzung93]

Hi I have the reset button (named 'All') as one of the filter options and need it to appear active when chosen as well. How can I do this? Thank you in advance!

[@juan_carrea]

Hi! How can I set a disabled checkbox? Ex.: I clicked Toyota but there are no options available in "Gasoline" fuel type so I'd like to disable that checkbox (the user can't click on "Gasoline"). I'd like to show Gasoline checkbox but in disable status.

[@shalaerblin]

How to use option Filter All? I want to have active All button which shows all of the products

[@Gerardeath]

Works fine on Chrome but not on Safari, how can I fix it?
Any suggestion?