Building Active Classes in CMS Filter with Attributes in Webflow

Welcome to a walkthrough of active classes in CMS filter with attributes. We launched attributes 10 days ago and received a lot of feedback from our community. One popular request was how to create an active state for checkboxes and radios in Webflow. In response to this feedback, we have introduced a new feature that allows users to create a custom active class on the filter UI elements. This feature is based on the feedback we received and aims to provide more flexibility in styling and managing active states within Webflow's CMS filter.

The New Attribute: fscms Filter Active

The new attribute called fscms filter active allows users to specify the class name for the active state of the filter UI elements. There are two ways to add this attribute:

1. On the field identifier: Any element with a CMS filter field identifier attribute can receive the active class.
2. On the list: Applying it to the list that is being filtered will make every single filter field receive the active class.

Applying the Active Class

When adding the fscms filter active attribute to the field identifier or the list, the class is added to the parent element of the field or the list. This is important to understand as it ensures that the entire outer box of the checkbox or radio field receives the active class, allowing for complete styling control over the elements.

Example: Applying the Active Class

Let's look at an example to understand how to use the active class in Webflow. Using the fscms filter active attribute, we can create an active state for checkboxes and radios. Let's start by applying the active class to the checkbox section by adding the attribute to the label.

fscms filter active="is active filter"

In this example, "is active filter" is the name of the active class we want to apply. By adding this attribute to the label of the checkbox, we can create a custom active state for the checkbox.

Using Combo Classes for Active States

In Webflow, combo classes can be used to create different styles for specific elements while inheriting the base styles from the parent class. This allows for more customization when applying active classes. Let's say we want to create an active class for the search field that has a different style from the global active class. We can achieve this by creating a combo class for the specific element and adding the fscms filter active attribute to it.

is active filter (base class)search-field-active (combo class)

By creating a combo class for the search field and applying the active attribute to it, we can customize the active state for the search field while still inheriting the base styles from the global active class.

Global vs. Specific Active Styles

It's important to understand the difference between applying the active class globally to the list versus applying it specifically to individual elements. When the active class is applied to the list, it becomes a global style that is inherited by all the elements within the list. On the other hand, applying the active class to individual elements allows for specific customization for each element.

CSS Management for Active Classes

After applying the active classes in Webflow, users can further manage and customize the styles using CSS. By understanding how the classes are applied and inherited, users can fine-tune the active states to achieve the desired visual effects.

Testing and Deployment

After applying the active classes, it's important to thoroughly test the functionality to ensure that the active states are working as intended. This may involve publishing the changes and checking the active states on the live site to ensure that the styles are applied correctly.

Conclusion

In conclusion, the new feature of active classes in CMS filter with attributes provides a powerful tool for customizing the active states of elements in Webflow. By understanding how to apply and manage the active classes, users can create visually appealing and functional interactive elements within their web projects. Whether it's a global active style applied to a list or specific customizations using combo classes, the new feature offers flexibility and control over the visual design of web elements.

By experimenting with the active classes and testing them in real-world scenarios, users can gain a better understanding of how to utilize this feature effectively. With the ability to create custom active states for checkboxes, radios, and other UI elements, Webflow users can enhance the interactivity and user experience of their web projects. If you have any questions or need assistance with the active classes feature, feel free to reach out to our support team. We are here to help you make the most of this powerful feature in Webflow's CMS filter.

Remember, with the right understanding and implementation of active classes, you can significantly elevate the visual appeal and functionality of your web projects in Webflow. Happy designing!