CMS Filter
Create advanced and complex no-code filter systems for Webflow CMS Collection List content.
![CMS Filter](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/626b33d375ee01fd4c2c8386_CMS%20FILTER.png)
Implement in Webflow Applying attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
Required for minimum setup
Below is a list of three Attributes that are required for CMS Filter.
![how to add cms filter list attribute](https://cdn.prod.website-files.com/6132770a5e2efb2a37b68270/618815cf2b77c77fc751e616_cms-filter-list-min-min.webp)
ONLY USE ONE FORM. You should not have more than one Form Block component to use CMS Filter.
All checkboxes, radios, selects, range sliders, inputs, and any other form element go inside this one Form Block.
![how to add cms filter list attribute](https://cdn.prod.website-files.com/6132770a5e2efb2a37b68270/6190f46b7e2f73636ecca2c3_cmsfilter-filters-min.webp)
Checkbox Label, Radio Label, Select, or Text Input Field
Text Block, Heading, Paragraph or Text Link
The IDENTIFIER value connects a Filter UI element to the correct field from Webflow CMS. The IDENTIFIER value is like the name of a CMS field. However, it does not need to match your CMS field. IDENTIFIER values can be whatever you want, but they should be descriptive, like "Countries", "States", "Cities", etc.
The video below shows this process:
1. Add fs-cmsfilter-field="Countries" to the Filter UI.
--- Add this to each Checkbox Label in the Filter UI that should filter by Country. The text of the label will act as the search term. If the label of the checkbox is "Spain", the checkbox will filter by "Spain".
2. Add fs-cmsfilter-field="Countries" to the dynamic text inside the CMS Item template in your CMS filtered list.
--- Add it to the text element connected to the "Countries" CMS field. Any CMS Item that has "Spain" from this CMS field will be filtered.
Please look at the video below to see this concept in action. After a few implementations, you'll be a pro 💪
More attributes to use
Below is a list of Attributes that can help you customize your filter system.
For example, fs-cmsfilter-field = "countries, states, cities" will filter by all three categories.
To search for all CMS fields, use "*" as the value. For example fs-cmsfilter-field = "*"
![how to add an cmsfilter text field attribute](https://cdn.prod.website-files.com/6132770a5e2efb2a37b68270/618aaa44df33684a91f72a3d_fs-cmsfilter-text-field-min.webp)
Normal checkbox elements in our Filter UI get the fs-cmsfilter-field attribute on the Checkbox Label.
When creating a toggle, place the attribute on the Checkbox Input Field. This will enable a toggle effect for the checkbox.
+ Inside the CMS Collection Item, add an HTML Embed and give the HTML Embed the fs-cmsfilter-field = "IDENTIFIER" attribute. Inside the Embed block, add the Webflow CMS toggle field as a dynamic field.
See video below for entire workflow.
If a Submit Button (Webflow calls it Form Button) exists and is visible in your form, the Filter UI will filter on click of the Submit Button.
If the Submit Button does not exist or is not visible in your form, the Filter UI will filter the list instantly when a user interacts with any Filter UI element. Apply display: none to hide the submit button or delete the submit button from the page to have 'instant' filtering when filters are selected.
The display method allows you to have different filter experiences across multiple device sizes. For example, filter the list instantly for desktop experiences and filter the list on click for mobile experiences.
Text Block
Text Block
Div Block
This is not an empty state. It is an initial state. Use this attribute if you want zero items to show initially in your list. Once the user interacts with the Filter UI, items will show based on the selected filters. If the user then resets all filter selections, the initial state will show.
Apply this attribute to a div with any content inside. There can be a message, a design, or nothing at all. Setting this attribute anywhere on the page will 'turn on' initial state for the list.
Div Block, Button, Link Block, Text Block or Text Link
As filters are applied and removed from the list, 'active tags' will be added and removed from the page. This can help users better navigate complex filter systems with many filterable options and dropdowns.
This attribute is applied to the 'tag' element that will serve as the template. This template will be used for all active tags on the published page.
![how to add cmsfilter tag template attribute](https://cdn.prod.website-files.com/6132770a5e2efb2a37b68270/6187a0df9578c4c816b97c79_cmsfilter-tag-template-min.webp)
Text Block
Div Block, Link Block, Text Block or Image
Div Block
Add this attribute to any form element with fs-cmsfilter-field = "IDENTIFIER". Checkboxes, radios, text input all select all work.
When adding this attribute to the Checkbox/Radio Label element fs-cmsfilter-field = "IDENTIFIER", the class will be added to the parent Checkbox/Radio Field.
When adding this attribute to a text input or select input, the class will be added directly to this element.
If this is attribute is not set, '.fs-cmsfilter_active' is the default active class for all Filter UI elements.
Add to an element with fs-cmsfilter-element = "list" to use this class name for all filter UI elements with fs-cmsfilter-field = "IDENTIFIER".
![how to add cms filter active attribute](https://cdn.prod.website-files.com/6132770a5e2efb2a37b68270/61a508eeff9085721139156b_cms-filter-active-min.webp)
![how to add cms filter active class](https://cdn.prod.website-files.com/6132770a5e2efb2a37b68270/61a508ee8ec549dfae159a11_cms-filter-is-active-min.webp)
Use case:
I want a user to be able to select "All" items in the filter. When "All" items are selected, I want to show an active state for the "All" button.
❌ Checkbox ❌
A checkbox does not logically work with the "All" filter. If you are filtering by "All items", then you can not add more in addition to that. You can't not have "All" AND something else in addition to that. It's already everything, or "All". Checkboxes work like this — I want [this] AND [something else] in addition. Checkboxes are not the correct web elements for filtering by All.
✅ Radio ✅
A radio does logically work with the "All" filter. You can filter by "All items" OR something else. To use the active state for a "All" radio button, see the attribute option below with full explanation. Use checked = "checked" to manage the active state.
💡"All" is a Clear button💡
Showing "All items" is the equivalent of resetting all applied filters. Resetting all applied filters will show us the entire list of items, or "All items". We must use the "Clear" attribute to reset the grid and show "All items".
Know that this can only be applied to one Radio element in the Radio Group. If multiple Radios need to be selected, use Checkboxes instead.
Common use case: There is an "All" button that can show all filters. Since all items show on page load, this is what should be initially checked for page load.
This option can be achieved with the Webflow native "Start checked" checkbox in Checkbox Settings.
![start checked settings](https://cdn.prod.website-files.com/6132770a5e2efb2a37b68270/61df4d0e9c39292cfb4d73cf_Finsweet-screenshot-0s0bFoq2.webp)
Need to generate a custom url that loads the filter list based on the url?
Check out the "SHOW QUERY" option.
"any" = Any of the selected filters have to match in the item for the item to be filtered.
Default is "any". If you want "any", you don't have to add this attribute.
Example:
There are Services checkboxes for "SEO", "Branding", and "Development". If all 3 filters are selected, and the filters are set to "all", the item in the CMS list must have ALL 3 services within the item for the item to be filtered. If an item has "SEO" and "Development" only, it would not be returned. We need ALL to match.
There are Services checkboxes for "SEO", "Branding", and "Development". If all 3 filters are selected, and the filters are set to "any", the item in the CMS list must have ANY of the 3 services within the item for the item to be filtered. If an item has "SEO" only, it will be returned. If an item has "Branding" and "Development", it will be returned. We need any 1 match.
These query params create custom urls with filter configuration. When loading this custom url, the grid will filter with the information from the query params.
For example:
https://finsweet.com/attributes/cms-filter?countries=Spain&categories=Museum
By default, active tags will show without categories, like "Spain", "Barcelona", "Museum".
This option adds categories as titles like this "Country: Spain", "City: Barcelona", "Attraction: Museum"
Add to an element with fs-cmsfilter-field = "IDENTIFIER" to apply this Option to a specific CMS field. For example, you only want the "Countries" filter to show a category title on the active tag.
For example, by default, a search input that shows results from all fields will show "*" as the category title on the active tag. Override this default to "Search" to give the user more context into what the active tag represents.
Useful for 'pausing' the filter from updating until the user is done typing.
For example, setting this option on a search text input can prevent filtered results from updating with each character entered. Setting a debounce value can show filtered results after the user has likely stopped typing.
Add to any element with fs-cmsfilter-element = "list" to add debounce to all Filter UI elements globally.
By default, form submissions are disabled in Attributes CMS Filter. Set this attribute to true to enable form submissions in your Filter UI.
It is required to have a form submit button inside the form.
Useful for filtering through a long list of radio or checkbox options inside a form, which the user should submit.
For example, if I search or filter "SEO" in the Filter UI, the Collection Items that match "SEO" will highlight the SEO text field.
Apply to any Filter UI elements. Text Field, Checkbox, Select, anything.
By default, the class "fs-cmsfilter_highlight" is used for styling the highlight.
By default, the class "fs-cmsfilter_highlight" is used for styling the highlight.
Adding a value of "filter-highlight-active" will make "filter-highlight-active" the new active class when the filter is updated.
Working examples
See this solution working live in this Webflow project.
![Capri Island](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/6176a270abe8b65cad6b7e60_capri.png)
Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.
![American Museum of Natural History](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/61769fe47dc17e2ec1b051e5_american-museum.png)
Is a natural history museum on the Upper West Side of Manhattan, New York City.
![The Vatican Museums](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/61769e2d89f7614a11d8d05f_vatican-museum.png)
The Vatican Museums are the public museums of the Vatican City.
![Christ the Redeemer](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/61769d7737aa9cd8e4f99d94_cristo-redentor.png)
Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil.
![Statue of Unity](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/61769aa7d0bfbaa57488fe43_statue-of-unity.png)
Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel.
![The Grand Canyon](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/617698b237aa9c261ff96d4a_grand-canyon.png)
The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States.
![Walt Disney World](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/6176976f1733a6ad64e75ba8_disney-world.png)
Is an entertainment resort complex in Bay Lake and Lake Buena Vista, Florida, United States.
![Iguazu Falls](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/617695945b9a2b03081fe893_iguazu-falls.png)
Iguazú Falls are waterfalls of the Iguazu River on the border of the Argentine and Brazil.
![Copacabana Beach](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/6176945c24f631b0b04f81e0_capacabana.png)
Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil.
![Taj Mahal](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/617692c835bb8eae46a81fac_taj-mahal.png)
The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.
![Central Park](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/617691ecbe4c147c34778455_central-park.png)
An urban park in New York City located between the Upper West and Upper East Sides of Manhattan.
![Golden Gate Bridge](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/617690b23d9094330044afa2_golden-gate.png)
The Golden Gate Bridge is a suspension bridge spanning the Golden Gate.
![Statue of Liberty](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/61768ea48d8dbcda75a67526_statue-of-liberty.png)
Is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City.
![Trevi Fountain](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d4db241e1f4a035b94f7d_trevi-fountain.png)
The Trevi Fountain is a fountain in the Trevi district in Rome, Italy.
![The Colosseum](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d4d34419572269ee4af9a_colosseum.png)
The Colosseum is an oval amphitheater in the center of the city of Rome, Italy.
![Parque Güell](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d4c7e8dd0b1754ac58190_parque-guell.png)
Parc Güell is a privatized park system composed of gardens and architectural elements.
![Casa Milà](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d4bb72e46c621142d896d_casa-mila.png)
Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance.
![Sagrada Família](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d4a9ea81280f5cddcc537_sagrada-familia.png)
Is a large unfinished Roman Catholic minor basilica in the Eixample district of Barcelona.
![Louvre Museum](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d49558b9178dae048413c_louvre-museum.png)
It is the home of many of the most known work of arts, including the Mona Lisa.
![Arc de Triomphe](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d48be53c13302bb681052_arc-de-triomphe.png)
The Arc de Triomphe de l'Étoile is one of the most famous monuments in Paris, France.
![Torre Eiffel](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d47e0c97e96208324fa0f_eiffel-tower.png)
It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
![](https://cdn.prod.website-files.com/6132770a5e2efb2a37b68270/6132770a5e2efb28eeb68324_person-shrugging_1f937.png)
![Capri Island](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/6176a270abe8b65cad6b7e60_capri.png)
Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.
![American Museum of Natural History](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/61769fe47dc17e2ec1b051e5_american-museum.png)
Is a natural history museum on the Upper West Side of Manhattan, New York City.
![The Vatican Museums](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/61769e2d89f7614a11d8d05f_vatican-museum.png)
The Vatican Museums are the public museums of the Vatican City.
![Christ the Redeemer](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/61769d7737aa9cd8e4f99d94_cristo-redentor.png)
Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil.
![Statue of Unity](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/61769aa7d0bfbaa57488fe43_statue-of-unity.png)
Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel.
![The Grand Canyon](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/617698b237aa9c261ff96d4a_grand-canyon.png)
The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States.
![Walt Disney World](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/6176976f1733a6ad64e75ba8_disney-world.png)
Is an entertainment resort complex in Bay Lake and Lake Buena Vista, Florida, United States.
![Iguazu Falls](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/617695945b9a2b03081fe893_iguazu-falls.png)
Iguazú Falls are waterfalls of the Iguazu River on the border of the Argentine and Brazil.
![Copacabana Beach](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/6176945c24f631b0b04f81e0_capacabana.png)
Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil.
![Taj Mahal](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/617692c835bb8eae46a81fac_taj-mahal.png)
The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.
![Central Park](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/617691ecbe4c147c34778455_central-park.png)
An urban park in New York City located between the Upper West and Upper East Sides of Manhattan.
![Golden Gate Bridge](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/617690b23d9094330044afa2_golden-gate.png)
The Golden Gate Bridge is a suspension bridge spanning the Golden Gate.
![Statue of Liberty](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/61768ea48d8dbcda75a67526_statue-of-liberty.png)
Is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City.
![Trevi Fountain](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d4db241e1f4a035b94f7d_trevi-fountain.png)
The Trevi Fountain is a fountain in the Trevi district in Rome, Italy.
![The Colosseum](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d4d34419572269ee4af9a_colosseum.png)
The Colosseum is an oval amphitheater in the center of the city of Rome, Italy.
![Parque Güell](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d4c7e8dd0b1754ac58190_parque-guell.png)
Parc Güell is a privatized park system composed of gardens and architectural elements.
![Casa Milà](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d4bb72e46c621142d896d_casa-mila.png)
Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance.
![Sagrada Família](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d4a9ea81280f5cddcc537_sagrada-familia.png)
Is a large unfinished Roman Catholic minor basilica in the Eixample district of Barcelona.
![Louvre Museum](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d49558b9178dae048413c_louvre-museum.png)
It is the home of many of the most known work of arts, including the Mona Lisa.
![Arc de Triomphe](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d48be53c13302bb681052_arc-de-triomphe.png)
The Arc de Triomphe de l'Étoile is one of the most famous monuments in Paris, France.
![Torre Eiffel](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d47e0c97e96208324fa0f_eiffel-tower.png)
It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
![](https://cdn.prod.website-files.com/6132770a5e2efb2a37b68270/6132770a5e2efb28eeb68324_person-shrugging_1f937.png)
![Central Park](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/617691ecbe4c147c34778455_central-park.png)
An urban park in New York City located between the Upper West and Upper East Sides of Manhattan.
![The Grand Canyon](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/617698b237aa9c261ff96d4a_grand-canyon.png)
The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States.
![Arc de Triomphe](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d48be53c13302bb681052_arc-de-triomphe.png)
The Arc de Triomphe de l'Étoile is one of the most famous monuments in Paris, France.
![Taj Mahal](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/617692c835bb8eae46a81fac_taj-mahal.png)
The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.
![Walt Disney World](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/6176976f1733a6ad64e75ba8_disney-world.png)
Is an entertainment resort complex in Bay Lake and Lake Buena Vista, Florida, United States.
![Capri Island](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/6176a270abe8b65cad6b7e60_capri.png)
Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.
![Christ the Redeemer](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/61769d7737aa9cd8e4f99d94_cristo-redentor.png)
Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil.
![The Colosseum](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d4d34419572269ee4af9a_colosseum.png)
The Colosseum is an oval amphitheater in the center of the city of Rome, Italy.
![American Museum of Natural History](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/61769fe47dc17e2ec1b051e5_american-museum.png)
Is a natural history museum on the Upper West Side of Manhattan, New York City.
![The Vatican Museums](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/61769e2d89f7614a11d8d05f_vatican-museum.png)
The Vatican Museums are the public museums of the Vatican City.
![Louvre Museum](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d49558b9178dae048413c_louvre-museum.png)
It is the home of many of the most known work of arts, including the Mona Lisa.
![Casa Milà](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d4bb72e46c621142d896d_casa-mila.png)
Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance.
![Golden Gate Bridge](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/617690b23d9094330044afa2_golden-gate.png)
The Golden Gate Bridge is a suspension bridge spanning the Golden Gate.
![Sagrada Família](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d4a9ea81280f5cddcc537_sagrada-familia.png)
Is a large unfinished Roman Catholic minor basilica in the Eixample district of Barcelona.
![Statue of Liberty](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/61768ea48d8dbcda75a67526_statue-of-liberty.png)
Is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City.
![Copacabana Beach](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/6176945c24f631b0b04f81e0_capacabana.png)
Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil.
![Torre Eiffel](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d47e0c97e96208324fa0f_eiffel-tower.png)
It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
![Parque Güell](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d4c7e8dd0b1754ac58190_parque-guell.png)
Parc Güell is a privatized park system composed of gardens and architectural elements.
![Statue of Unity](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/61769aa7d0bfbaa57488fe43_statue-of-unity.png)
Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel.
![Trevi Fountain](https://cdn.prod.website-files.com/6132770a5e2efb56eab6828c/616d4db241e1f4a035b94f7d_trevi-fountain.png)
The Trevi Fountain is a fountain in the Trevi district in Rome, Italy.
![](https://cdn.prod.website-files.com/6132770a5e2efb2a37b68270/6132770a5e2efb28eeb68324_person-shrugging_1f937.png)
Combinations using CMS Filter:
You can combine this Attribute with others to create more complex solutions.
Frequently Asked Questions
Everything you need to know about this attributes solution.
Add this class to a blank div on the page, then set the background color. On the published page, the highlight color will be that new background color.
Define both filters under the same form block and hide/show respectively for either desktop or mobile.
You can create a div with a message, image or just leave it empty and apply the “fs-cmsfilter-element=initial” attribute to it