How can I add and style an "All" button for CMS Filter

Attributes
1

To style a radio button that shows “All” results from your list on page load you’ll need to have a non-cms radio button, this radio button should be in the same group name as the other radios in your form.

Note: this does not use the fs-cmsfilter-active = is-active option

To give this button an active state and for it to be checked on load:

  1. Set the style to custom

Set Custom Style

  1. Set the attribute checked = checked on the radio input

checked = checked

  1. To clear the filters add the fs-cmsfilter-element = clear attribute to the button’s label

fs-cmsfilter-element = clear

  1. You can now style the Checked state by selecting it from the style panel state dropdown, note that this will only affect the input (the radio circle) you can use this as the background, styling the rest of the button should be done with custom CSS.

Here is a CSS example that changes the filters label color when the filter is active:

<style>
    .directory_radio-input.w--redirected-checked ~ .directory_radio-label {
    	color: #bcfd2e;
    	}
</style>

This selector will match the radio button with the class directory_radio-input that is also in a checked state with the class w--redirected-checked. Then, the adjacent sibling selector (~) is used to select the label that comes after the radio button and apply the color property.

Style Active State

Custom CSS for Label Color

  1. Publish and test!
7 Likes
3

Hey Luis! This works great, except the reset resets all of the filter items rather than just the radio buttons.

Is there an attributes approach to configuring it so that it will only reset its own radio button group?

4

Hey @memetican! To clear a specific set of filters you can add this Attribute alongside the fs-cmsfilter-element="clear" replacing the IDENTIFIER to the one for your group of radios or checkboxes!

Screen Shot 2023-09-12 at 01.05.59
Screen Shot 2023-09-12 at 01.05.591870×680 47.8 KB

1 Like
5

Really appreciate this! I think the primary documentation could use quite a bit of work here to make this more clear. It’s pretty confusing on this specific use case currently, especially since it mentions nothing of the custom code.

1 Like
6

Hey @jakeschlegel86! We are reworking the docs now to improve clarity!
We are eager to share the new docs!

1 Like