finsweet.com
Open in
urlscan Pro
188.114.96.3
Public Scan
URL:
https://finsweet.com/attributes/cms-filter
Submission: On April 21 via api from US — Scanned from NL
Submission: On April 21 via api from US — Scanned from NL
Form analysis 6 forms found in the DOM
Name: wf-form-CMS-Filter-1 — GET
<form id="wf-form-CMS-Filter-1" name="wf-form-CMS-Filter-1" data-name="CMS Filter 1" method="get" fs-cmsfilter-element="filters-1" class="fs_cmsfilter_form" data-wf-page-id="626c315ba1c26627929c2d56"
data-wf-element-id="52e6e2c9-a5a2-72b1-345a-c51144dc2ac2" aria-label="CMS Filter 1">
<div class="fs_cmsfilter_header">
<div class="fs_cmsfilter_filters">
<div class="fs-filtercms_header">
<div>Choose one country to filter the content:</div>
</div>
<div class="w-dyn-list">
<div role="list" class="fs-filtercms_filter-list w-dyn-items">
<div role="listitem" class="w-dyn-item"><label class="fs-filtercms_radio w-radio">
<div class="w-form-formradioinput w-form-formradioinput--inputType-custom fs-filtercms-radio-button w-radio-input"></div><input id="radio-0" type="radio" name="radio" data-name="Radio" style="opacity:0;position:absolute;z-index:-1"
value="Radio"><span fs-cmsfilter-active="is-active" fs-cmsfilter-field="countries" class="fs-filtercms_radio-label w-form-label" for="radio">United States</span>
</label></div>
<div role="listitem" class="w-dyn-item"><label class="fs-filtercms_radio w-radio">
<div class="w-form-formradioinput w-form-formradioinput--inputType-custom fs-filtercms-radio-button w-radio-input"></div><input id="radio-1" type="radio" name="radio" data-name="Radio" style="opacity:0;position:absolute;z-index:-1"
value="Radio"><span fs-cmsfilter-active="is-active" fs-cmsfilter-field="countries" class="fs-filtercms_radio-label w-form-label" for="radio">India</span>
</label></div>
<div role="listitem" class="w-dyn-item"><label class="fs-filtercms_radio w-radio">
<div class="w-form-formradioinput w-form-formradioinput--inputType-custom fs-filtercms-radio-button w-radio-input"></div><input id="radio-2" type="radio" name="radio" data-name="Radio" style="opacity:0;position:absolute;z-index:-1"
value="Radio"><span fs-cmsfilter-active="is-active" fs-cmsfilter-field="countries" class="fs-filtercms_radio-label w-form-label" for="radio">Brazil</span>
</label></div>
<div role="listitem" class="w-dyn-item"><label class="fs-filtercms_radio w-radio">
<div class="w-form-formradioinput w-form-formradioinput--inputType-custom fs-filtercms-radio-button w-radio-input"></div><input id="radio-3" type="radio" name="radio" data-name="Radio" style="opacity:0;position:absolute;z-index:-1"
value="Radio"><span fs-cmsfilter-active="is-active" fs-cmsfilter-field="countries" class="fs-filtercms_radio-label w-form-label" for="radio">Spain</span>
</label></div>
<div role="listitem" class="w-dyn-item"><label class="fs-filtercms_radio w-radio">
<div class="w-form-formradioinput w-form-formradioinput--inputType-custom fs-filtercms-radio-button w-radio-input"></div><input id="radio-4" type="radio" name="radio" data-name="Radio" style="opacity:0;position:absolute;z-index:-1"
value="Radio"><span fs-cmsfilter-active="is-active" fs-cmsfilter-field="countries" class="fs-filtercms_radio-label w-form-label" for="radio">Italy</span>
</label></div>
<div role="listitem" class="w-dyn-item"><label class="fs-filtercms_radio w-radio">
<div class="w-form-formradioinput w-form-formradioinput--inputType-custom fs-filtercms-radio-button w-radio-input"></div><input id="radio-5" type="radio" name="radio" data-name="Radio" style="opacity:0;position:absolute;z-index:-1"
value="Radio"><span fs-cmsfilter-active="is-active" fs-cmsfilter-field="countries" class="fs-filtercms_radio-label w-form-label" for="radio">France</span>
</label></div>
</div>
</div>
</div><a fs-cmsfilter-element="clear" href="#" class="fs_cmsfilter_clear-all">Clear all</a>
</div>
</form>Name: wf-form-CMS-Filter-2 — GET
<form id="wf-form-CMS-Filter-2" name="wf-form-CMS-Filter-2" data-name="CMS Filter 2" method="get" fs-cmsfilter-element="filters-2" class="fs_cmsfilter_form" data-wf-page-id="626c315ba1c26627929c2d56"
data-wf-element-id="f5eb6973-6f68-52ff-9b11-84682b6d0588" aria-label="CMS Filter 2">
<div class="fs_cmsfilter_header">
<div class="fs_cmsfilter_filters">
<div class="fs-filtercms_header">
<div>Choose any country you want to visit:</div>
</div>
<div class="w-dyn-list">
<div role="list" class="fs-filtercms_filter-list w-dyn-items">
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="Checkbox-0" type="checkbox" name="Checkbox" data-name="Checkbox" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-field="countries" class="fs-filtercms_check-label w-form-label" for="Checkbox">United States</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="Checkbox-1" type="checkbox" name="Checkbox" data-name="Checkbox" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-field="countries" class="fs-filtercms_check-label w-form-label" for="Checkbox">India</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="Checkbox-2" type="checkbox" name="Checkbox" data-name="Checkbox" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-field="countries" class="fs-filtercms_check-label w-form-label" for="Checkbox">Brazil</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="Checkbox-3" type="checkbox" name="Checkbox" data-name="Checkbox" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-field="countries" class="fs-filtercms_check-label w-form-label" for="Checkbox">Spain</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="Checkbox-4" type="checkbox" name="Checkbox" data-name="Checkbox" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-field="countries" class="fs-filtercms_check-label w-form-label" for="Checkbox">Italy</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="Checkbox-5" type="checkbox" name="Checkbox" data-name="Checkbox" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-field="countries" class="fs-filtercms_check-label w-form-label" for="Checkbox">France</span></label></div>
</div>
</div>
</div><a fs-cmsfilter-element="clear" href="#" class="fs_cmsfilter_clear-all">Clear all</a>
</div>
</form>Name: wf-form-CMS-Filter-3 — GET
<form id="wf-form-CMS-Filter-3" name="wf-form-CMS-Filter-3" data-name="CMS Filter 3" method="get" fs-cmsfilter-element="filters-3" data-wf-page-id="626c315ba1c26627929c2d56" data-wf-element-id="60e67a5a-0a1a-b571-b395-5f38e4675d23"
aria-label="CMS Filter 3">
<div class="fs-filtercms_filters-wrapper">
<div class="fs_cmsfilter_filters">
<div class="fs-filtercms_header">
<div class="fs-filtercms_label">Search here:</div><a fs-cmsfilter-clear="name, categories, place, countries" fs-cmsfilter-element="clear" href="#" class="fs_filtercms_clear">clear</a>
</div><input class="fs-filtercms_field w-input" maxlength="256" name="name" fs-cmsfilter-field="name, categories, place, countries" data-name="Name" placeholder="Find a tourist place here..." type="text" id="name">
</div>
<div class="fs_cmsfilter_filters">
<div class="fs-filtercms_header">
<div class="fs-filtercms_label">Choose any country you want to visit:</div><a fs-cmsfilter-clear="countries" fs-cmsfilter-element="clear" href="#" class="fs_filtercms_clear">clear</a>
</div>
<div class="w-dyn-list">
<div role="list" class="fs-filtercms_filter-list w-dyn-items">
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="Checkbox-3-1" type="checkbox" name="Checkbox-3" data-name="Checkbox 3" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-field="countries" class="fs-filtercms_check-label w-form-label" for="Checkbox-3">United States</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="Checkbox-3-2" type="checkbox" name="Checkbox-3" data-name="Checkbox 3" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-field="countries" class="fs-filtercms_check-label w-form-label" for="Checkbox-3">India</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="Checkbox-3-3" type="checkbox" name="Checkbox-3" data-name="Checkbox 3" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-field="countries" class="fs-filtercms_check-label w-form-label" for="Checkbox-3">Brazil</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="Checkbox-3-4" type="checkbox" name="Checkbox-3" data-name="Checkbox 3" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-field="countries" class="fs-filtercms_check-label w-form-label" for="Checkbox-3">Spain</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="Checkbox-3-5" type="checkbox" name="Checkbox-3" data-name="Checkbox 3" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-field="countries" class="fs-filtercms_check-label w-form-label" for="Checkbox-3">Italy</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="Checkbox-3-6" type="checkbox" name="Checkbox-3" data-name="Checkbox 3" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-field="countries" class="fs-filtercms_check-label w-form-label" for="Checkbox-3">France</span></label></div>
</div>
</div>
</div>
<div class="fs_cmsfilter_filters">
<div class="fs-filtercms_header">
<div class="fs-filtercms_label">Choose any category:</div><a fs-cmsfilter-clear="categories" fs-cmsfilter-element="clear" href="#" class="fs_filtercms_clear">clear</a>
</div>
<div class="w-dyn-list">
<div role="list" class="fs-filtercms_filter-list w-dyn-items">
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="checkbox-2-7" type="checkbox" name="checkbox-2" data-name="Checkbox 2" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-match="all" fs-cmsfilter-field="categories" class="fs-filtercms_check-label w-form-label" for="checkbox-2">Entertainment</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="checkbox-2-8" type="checkbox" name="checkbox-2" data-name="Checkbox 2" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-match="all" fs-cmsfilter-field="categories" class="fs-filtercms_check-label w-form-label" for="checkbox-2">Park</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="checkbox-2-9" type="checkbox" name="checkbox-2" data-name="Checkbox 2" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-match="all" fs-cmsfilter-field="categories" class="fs-filtercms_check-label w-form-label" for="checkbox-2">Adventure</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="checkbox-2-10" type="checkbox" name="checkbox-2" data-name="Checkbox 2" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-match="all" fs-cmsfilter-field="categories" class="fs-filtercms_check-label w-form-label" for="checkbox-2">Paid tour</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="checkbox-2-11" type="checkbox" name="checkbox-2" data-name="Checkbox 2" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-match="all" fs-cmsfilter-field="categories" class="fs-filtercms_check-label w-form-label" for="checkbox-2">Free tour</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="checkbox-2-12" type="checkbox" name="checkbox-2" data-name="Checkbox 2" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-match="all" fs-cmsfilter-field="categories" class="fs-filtercms_check-label w-form-label" for="checkbox-2">Culture</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="checkbox-2-13" type="checkbox" name="checkbox-2" data-name="Checkbox 2" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-match="all" fs-cmsfilter-field="categories" class="fs-filtercms_check-label w-form-label" for="checkbox-2">Historical</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="checkbox-2-14" type="checkbox" name="checkbox-2" data-name="Checkbox 2" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-match="all" fs-cmsfilter-field="categories" class="fs-filtercms_check-label w-form-label" for="checkbox-2">Most rated</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="checkbox-2-15" type="checkbox" name="checkbox-2" data-name="Checkbox 2" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-match="all" fs-cmsfilter-field="categories" class="fs-filtercms_check-label w-form-label" for="checkbox-2">Beach</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="checkbox-2-16" type="checkbox" name="checkbox-2" data-name="Checkbox 2" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-match="all" fs-cmsfilter-field="categories" class="fs-filtercms_check-label w-form-label" for="checkbox-2">Museum</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="checkbox-2-17" type="checkbox" name="checkbox-2" data-name="Checkbox 2" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-match="all" fs-cmsfilter-field="categories" class="fs-filtercms_check-label w-form-label" for="checkbox-2">Architecture</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="checkbox-2-18" type="checkbox" name="checkbox-2" data-name="Checkbox 2" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-match="all" fs-cmsfilter-field="categories" class="fs-filtercms_check-label w-form-label" for="checkbox-2">Nature</span></label></div>
<div role="listitem" class="w-dyn-item"><label class="w-checkbox fs-filtercms_checkbox"><input id="checkbox-2-19" type="checkbox" name="checkbox-2" data-name="Checkbox 2" class="w-checkbox-input fs-filtercms-check"><span
fs-cmsfilter-match="all" fs-cmsfilter-field="categories" class="fs-filtercms_check-label w-form-label" for="checkbox-2">Most visited</span></label></div>
</div>
</div>
</div>
<div class="fs_cmsfilter_filters"><select id="field" name="field" data-name="field" fs-cmsfilter-field="categories" class="fs-cms_select w-select">
<option value="">Select one...</option>
<option value="Most visited">Most visited</option>
<option value="Most rated">Most rated</option>
</select></div>
<div class="fs_cmsfilter_filters">
<div class="fs-filtercms_header">
<div class="fs-filtercms_label">Featured:</div><label class="w-checkbox fs-checkbox_toggle">
<div class="fs-checkbox_dot"></div><input id="Featured" type="checkbox" name="Featured" data-name="Featured" fs-cmsfilter-field="featured" class="w-checkbox-input fs-checkbox-field"><span for="Featured"
class="fs-checkbox_label w-form-label">Prime Video</span>
</label>
</div>
</div><a fs-cmsfilter-element="clear" href="#" class="fs_cmsfilter_clear-all">Clear all</a>
</div>
</form>Name: wf-form-subscribe — POST https://accounts.finsweet.com/v1/notifications
<form method="post" fs-formsubmit-element="form" name="wf-form-subscribe" data-name="subscribe" action="https://accounts.finsweet.com/v1/notifications" id="wf-form-subscribe" fs-formsubmit-enhance="true" class="form-important-class"
data-wf-page-id="626c315ba1c26627929c2d56" data-wf-element-id="181559ba-c634-e5c7-9fbb-8164a6db02f4" aria-label="subscribe">
<div class="news_form-wrapper"><label for="email-3" class="news_form-label">Fill your email here</label>
<div class="news_form-block">
<div class="news_field-bar">
<div class="news_bar"></div>
</div><input class="news_form-field w-input" maxlength="256" name="email" data-name="email" placeholder=" john@email.com" data-w-id="181559ba-c634-e5c7-9fbb-8164a6db02f8" type="email" id="email" required="">
<div class="w-embed"><input type="hidden" name="origin" value="Attributes"></div><input type="submit" data-wait="Please wait..." id="w-node-_181559ba-c634-e5c7-9fbb-8164a6db02fb-a6db02ea" class="new_form-button w-button" value="Subscribe">
</div>
<div data-theme="dark" id="w-node-_01fcc6e9-8c02-6c8d-3810-ce1a6b76308b-a6db02ea" class="w-form-formrecaptcha news_form-recaptcha g-recaptcha g-recaptcha-error g-recaptcha-disabled g-recaptcha-invalid-key"></div>
</div>
</form>Name: wf-form-Feedback---Success-Implementation — GET
<form id="wf-form-Feedback---Success-Implementation" name="wf-form-Feedback---Success-Implementation" data-name="Feedback - Success Implementation" method="get" fs-form-element="url-input" class="feedback-form_wrapper"
data-wf-page-id="626c315ba1c26627929c2d56" data-wf-element-id="4f2d1762-a0e1-ff58-5ea9-28de2fd05c62" aria-label="Feedback - Success Implementation">
<h3 class="text-color-green">🎉 Congrats!</h3>
<h4>Nice! How can we make your experience even better?</h4><textarea id="Feedback-Message-4" name="Feedback-Message" maxlength="5000" data-name="Feedback Message" placeholder="Example Text" class="feedback-form_text-area w-input"></textarea><input
type="submit" data-wait="Please wait..." class="button is-purple w-button" value="Submit your answer"><input type="hidden" name="url_origin" value="https://finsweet.com/attributes/cms-filter">
</form>Name: wf-form-Feedback---Failed-Implementation — GET
<form id="wf-form-Feedback---Failed-Implementation" name="wf-form-Feedback---Failed-Implementation" data-name="Feedback - Failed Implementation" method="get" fs-form-element="url-input" class="feedback-form_wrapper"
data-wf-page-id="626c315ba1c26627929c2d56" data-wf-element-id="4f2d1762-a0e1-ff58-5ea9-28de2fd05c74" aria-label="Feedback - Failed Implementation">
<h4>How can we make our documentation better?</h4><textarea id="Feedback-Message-5" name="Feedback-Message" maxlength="5000" data-name="Feedback Message" placeholder="Example Text" class="feedback-form_text-area w-input"></textarea><input
type="submit" data-wait="Please wait..." class="button is-purple w-button" value="Submit your answer"><input type="hidden" name="url_origin" value="https://finsweet.com/attributes/cms-filter">
</form>Text Content
HOW TO ADD AN ATTRIBUTE: Hey! Give us some feedback here. Collapse All All solutions Resources All resourcesWebflow LibraryFilter UI KitCombos Cloneable APIUpdates Support Log in with Finsweet Filter and Sort CMS FILTER Create advanced and complex no-code filter systems for Webflow CMS Collection List content. Get Started 51,012,485 loads per month Script Documentation Examples FAQ API Tutorial Cloneable Step #1 COPY THE CMS FILTER <SCRIPT> AND PASTE INTO THE <HEAD> OF YOUR PAGE <!-- [Attributes by Finsweet] CMS Filter --> <script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script> Copy Script Scroll horizontally to see documentation Step #2 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. LIST I want to filter the content of this COLLECTION LIST OR COLLECTION LIST WRAPPER See how it works Add this attribute Description Name fs-cmsfilter-element Value list Check live example here This is the CMS Collection List that will be filtered. FILTERS I want this FORM OR FORM BLOCK to have the Filter UI elements See how it works Add this attribute Description Name fs-cmsfilter-element Value filters This is the Webflow Form element that holds all Filter UI elements. 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. FIELD IDENTIFIER When I interact with this Filter UI CHECKBOX LABEL, RADIO LABEL, SELECT, OR TEXT INPUT FIELD See how it works element, I want to filter CMS items with this TEXT BLOCK, HEADING, PARAGRAPH OR TEXT LINK content Add this attribute Description Name fs-cmsfilter-field Value IDENTIFIER This is how the Filter UI elements communicate with the Webflow CMS List. 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 💪 Sorry, your browser doesn't support embedded videos. MORE ATTRIBUTES TO USE Below is a list of Attributes that can help you customize your filter system. SEARCH FIELD I want to use a TEXT INPUT FIELD element in my Filter UI See how it works Add this attribute Description Name fs-cmsfilter-field Value IDENTIFIER Text Input Field search allows multiple IDENTIFIER values to specify which CMS fields the search input should search for. 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 = "*" TOGGLE BUTTON I want to use a TOGGLE BUTTON element in my Filter UI See how it works Add this attribute Description Name fs-cmsfilter-field Value IDENTIFIER When creating a TOGGLE (true/false) button, there is one change to implementation. 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. Sorry, your browser doesn't support embedded videos. SUBMIT BUTTON I want the list to be filtered when the SUBMIT BUTTON is clicked. See how it works No attributes needed. 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. clear I want this BUTTON, LINK BLOCK OR TEXT LINK to clear all filters See how it works Add this attribute Description Name fs-cmsfilter-element Value clear When this element is clicked, it will clear all active filters. To clear filter categories individually, look at the available clear option below. The clear button must be nested inside the fs-cmsfilter-element = filters element. RESULTS COUNT I want this TEXT BLOCK to show the number of results on the Collection List See how it works Add this attribute Description Name fs-cmsfilter-element Value results-count This will show the number of results that are filtered in the list. If there are 42 items being shown in the filter results, this text element will show "42" ITEMS COUNT I want this TEXT BLOCK to show the total number items in the Collection List See how it works Add this attribute Description Name fs-cmsfilter-element Value items-count This will show the number of total items in the list. If there are 68 items in the Collection List, this text element will show "68" Useful for displaying information like "Showing 42 out of 68 results" I want this TEXT BLOCK to show the total number items that can be filtered from a single filter See how it works Add this attribute Description Name fs-cmsfilter-element Value filter-results-count This will show the number of total items in the list for a specific filter option. This element can be placed inside a Checkbox Field or Radio Field. It will show the total number of filterable items in the list for that specific checkbox or radio option. filter-results-count will update dynamically as the filter is being used. This will help lead users to meaningful filter combinations. For example, if there are 2 results for "Spain" the number "2" will show in this text field, indicating there are 2 total results for "Spain" EMPTY I want this DIV BLOCK to be the empty state of the list See how it works Add this attribute Description Name fs-cmsfilter-element Value empty This element will show when there are zero results. This is similar to the "Empty" state for a Webflow CMS List. INITiAL STATE I want 0 items to show originally and this DIV BLOCK to be the initial state See how it works Add this attribute Description Name fs-cmsfilter-element Value initial This element will show when there no filters applied. 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. TAG TEMPLATE I want this DIV BLOCK, BUTTON, LINK BLOCK, TEXT BLOCK OR TEXT LINK to be the 'active tag' template to show selected filters See how it works Add this attribute Description Name fs-cmsfilter-element Value tag-template This creates an 'active tag' system on your filter UI. 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. TAG TEXT I want this TEXT BLOCK to be the text label inside the tag template to show selected filters See how it works Add this attribute Description Name fs-cmsfilter-element Value tag-text The text that's nested inside the fs-cmsfilter-element="tag-template". This is the text element that will be used to display the active tag text. If not specified, the tag-template element itself will be used to display the tag text. TAG REMOVE I want this DIV BLOCK, LINK BLOCK, TEXT BLOCK OR IMAGE to remove the tag that is filtered See how it works Add this attribute Description Name fs-cmsfilter-element Value tag-remove The close element that is nested inside the fs-cmsfilter-element="tag-template". This element will remove the tag that is filtered when clicking on it. If not specified, the tag-template element itself will be used as the remove trigger. ANCHOR SCROLL When the user filters content, I want the page to immediately anchor scroll up to this DIV BLOCK See how it works Add this attribute Description Name fs-cmsfilter-element Value scroll-anchor When a user filters content, the page anchor scrolls this element. Useful for improving ux of filter interfaces with many items. Anchor scrolling to the top of the page will assure the user is always seeing content from the top of the List. Option ACTIVE CLASS I want to have a custom active class on the Filter UI elements See how it works Add this attribute Description Name fs-cmsfilter-active Value class-name Add an active class to a Filter UI element when it is selected. 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. Where? Add to an element with fs-cmsfilter-field = "IDENTIFIER" to use this class name for this specific field identifier. Add to an element with fs-cmsfilter-element = "list" to use this class name for all filter UI elements with fs-cmsfilter-field = "IDENTIFIER". Option Filter All I want to have "All" button and use an active state on the All button See how it works Important explanation around creating a "All" button. 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". Option Start Checked: Radio I want to have a radio button selected on page load (Recommended for "All" buttons) See how it works Add this attribute Description Name checked Value checked Add checked = "checked" to the Radio input. This is a native HTML attribute that defines a checkbox or radio to start as checked on page load. Adding this attribute to the Radio input element will make that element pre-selected on load. 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. Where? Add to Webflow Radio input (the circle of the Radio) Option Start Checked: Checkbox I want to have a checkbox selected on page load See how it works No attribute needed. This option can be achieved with the Webflow native "Start checked" checkbox in Checkbox Settings. Need to generate a custom url that loads the filter list based on the url? Check out the "SHOW QUERY" option. Option MATCH I want to customize a Filter UI group to filter by "all" See how it works Add this attribute Description Name fs-cmsfilter-match Value all "all" = All of the selected filters have to match in the item for the item to be filtered. "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. Where? Add to an element with fs-cmsfilter-field = "IDENTIFIER" Option DATE I want this element to be filtered by a date See how it works Add this attribute Description Name fs-cmsfilter-type Value date Indicates that the filter input is in date format. It's just needed for date formats like: July 4, 2021 July 4, 2021 13:30 07/04/2021 07/04/2021 13:30 December 2021 Where? Add to an element with fs-cmsfilter-field = "IDENTIFIER" Option RANGE I want to filter by range See how it works Add this attribute Description Name fs-cmsfilter-range Value from Indicates that this filter input is the "from" part of the range. This is the minimum of the filter range. Where? Add to an element with fs-cmsfilter-field = "IDENTIFIER" Add this attribute Description Name fs-cmsfilter-range Value to Indicates that this filter input is the "to" part of the range. This is the maximum of the filter range. Where? Add to an element with fs-cmsfilter-field = "IDENTIFIER" Option Clear I want to clear results for a specific category of filters See how it works Add this attribute Description Name fs-cmsfilter-clear Value IDENTIFIER "Clear" all filters functionality for a specific "IDENTIFIER" Where? Add to an element with fs-cmsfilter-element = "clear" Option SHOW QUERY I want to add query params to the URL when the user applies filters See how it works Add this attribute Description Name fs-cmsfilter-showquery Value true When a user filters content, query params are added to the URL when the user applies any filter. 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 Where? Add to an element with fs-cmsfilter-element = "list" Option TAG FORMAT On my 'active tag' elements, I want to show the category of each tag value See how it works Add this attribute Description Name fs-cmsfilter-tagformat Value category Adds the the CMS field's IDENTIFIER to each 'active tag'. 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" Where? Add to an element with fs-cmsfilter-element = "list" to apply this Option globally to all Filter UI categories. 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. Option TAG CATEGORY On my 'active tag' elements, I want to customize the category name to something other than the IDENTIFIER See how it works Add this attribute Description Name fs-cmsfilter-tagcategory Value "Search" Optionally override the default IDENTIFIER category tag name. Setting this attribute allows you to customize the name of the category in 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. Where? Add to an element with fs-cmsfilter-field = "IDENTIFIER" and fs-cmsfilter-tagformat = category to apply this Option to a specific CMS field. For example, you only want the "Countries" IDENTIFIER to show a category title of "Country". Option DEBOUNCE I want to wait a certain amount of time until the filter results update See how it works Add this attribute Description Name fs-cmsfilter-debounce Value 200 Set a period of time (in milliseconds) before the filter updates. 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. Where? Add to any element with fs-cmsfilter-field = "IDENTIFIER" to add debounce to a specific field or group of Filter UI elements. Add to any element with fs-cmsfilter-element = "list" to add debounce to all Filter UI elements globally. Option Allow submit I want to allow the user to submit the form See how it works Add this attribute Description Name fs-cmsfilter-allowsubmit Value true When using a filter inside a form, allow the user to submit the form. 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. Where? Add to any element with fs-cmsfilter-element = "list" Option HIGHLIGHT I want to highlight the active search terms inside the CMS Collection Items See how it works Add this attribute Description Name fs-cmsfilter-highlight Value true Adds text highlight to filter keywords when they are active in the filter. 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. Where? Add to any element with fs-cmsfilter-field = "IDENTIFIER" Option HIGHLIGHT CLASS I want to change the class of the active search term highlight See how it works Add this attribute Description Name fs-cmsfilter-highlightclass Value class-name Change the class that is used to style the highlight functionality. 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. Where? Add to any element with fs-cmsfilter-element = "list" Option I want to hide filter options that have zero results based on the current active filters See how it works Add this attribute Description Name fs-cmsfilter-hideempty Value true Hides any checkbox or radio filter option that will return zero results based on the current active filter selection. For example, if Country: "Spain" is selected as a filter, Cities: "California", "New York", and "Texas" will be hidden, as they will not return any results in Spain. Where? Add to any radio or checkbox element with fs-cmsfilter-field = "IDENTIFIER" Option EASING I want to change the easing of the fade animation of the list See how it works Add this attribute Description Name fs-cmsfilter-easing Value ease Change easing of the fade animation on the filtered Collection List. Possible options are linear, ease, ease-in, ease-out, ease-in-out. Default is ease. Where? Add to an element with fs-cmsfilter-element = "list" Option DURATION I want to specify the duration of the fade animation See how it works Add this attribute Description Name fs-cmsfilter-duration Value 100 Change duration of the fade animation on the filtered Collection List. Values are in milliseconds. Default is 100ms. Where? Add to an element with fs-cmsfilter-element = "list" Option NO 100 LIMIT I want to show more than 100 items on this list See how it works Mix with CMS Load solution I want to have more than one instance of CMS Filter on the same page See how it works Optional This element is optional to add You may need multiple instances of this Attribute! All of our attributes follow the same structure for multiple instances! To use a second, third, or fourth instance on an attribute add -x at the end of the value of the element attribute. "x" must be a unique number. This unique number is how you link elements to instances. For example, list-3, trigger-3, and target-3 will all be connected to the same instance. Example of this solution: Attributes that must have instances Second instance example Third instance example fs-cmsfilter-element = "list" fs-cmsfilter-element = "list-2" fs-cmsfilter-element = "list-3" fs-cmsfilter-element = "filters" fs-cmsfilter-element = "filters-2" fs-cmsfilter-element = "filters-3" fs-cmsfilter-element = "results-count" fs-cmsfilter-element = "results-count-2" fs-cmsfilter-element = "results-count-3" fs-cmsfilter-element = "items-count" fs-cmsfilter-element = "items-count-2" fs-cmsfilter-element = "items-count-3" fs-cmsfilter-element = "empty" fs-cmsfilter-element = "empty-2" fs-cmsfilter-element = "empty-3" fs-cmsfilter-element = "tag-template" fs-cmsfilter-element = "tag-template-2" fs-cmsfilter-element = "tag-template-3" fs-cmsfilter-element = "tag-text" fs-cmsfilter-element = "tag-text-2" fs-cmsfilter-element = "tag-text-3" fs-cmsfilter-element = "scroll-anchor" fs-cmsfilter-element = "scroll-anchor-2" fs-cmsfilter-element = "scroll-anchor-3" WORKING EXAMPLES See this solution working live in this Webflow project. Example 1 Filter CMS using radio buttons Choose one country to filter the content: United States India Brazil Spain Italy France Clear all Thank you! Your submission has been received! Oops! Something went wrong while submitting the form. Showing 21 results Capri / Italy Capri Island Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula. New York / United States American Museum of Natural History Is a natural history museum on the Upper West Side of Manhattan, New York City. Rome / Italy The Vatican Museums The Vatican Museums are the public museums of the Vatican City. Rio de Janeiro / Brazil Christ the Redeemer Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil. Gujarat / India Statue of Unity Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel. Arizona / United States The Grand Canyon The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States. Orlando / United States Walt Disney World Is an entertainment resort complex in Bay Lake and Lake Buena Vista, Florida, United States. Foz do Iguaçu / Brazil Iguazu Falls Iguazú Falls are waterfalls of the Iguazu River on the border of the Argentine and Brazil. Rio de Janeiro / Brazil Copacabana Beach Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil. Agra / India Taj Mahal The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra. New York / United States Central Park An urban park in New York City located between the Upper West and Upper East Sides of Manhattan. San Francisco / United States Golden Gate Bridge The Golden Gate Bridge is a suspension bridge spanning the Golden Gate. New York / United States Statue of Liberty Is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City. Rome / Italy Trevi Fountain The Trevi Fountain is a fountain in the Trevi district in Rome, Italy. Rome / Italy The Colosseum The Colosseum is an oval amphitheater in the center of the city of Rome, Italy. Barcelona / Spain Parque Güell Parc Güell is a privatized park system composed of gardens and architectural elements. Barcelona / Spain Casa Milà Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance. Barcelona / Spain Sagrada Família Is a large unfinished Roman Catholic minor basilica in the Eixample district of Barcelona. Paris / France Louvre Museum It is the home of many of the most known work of arts, including the Mona Lisa. Paris / France Arc de Triomphe The Arc de Triomphe de l'Étoile is one of the most famous monuments in Paris, France. Paris / France Torre Eiffel It is named after the engineer Gustave Eiffel, whose company designed and built the tower. No results found. Please try different keywords. Copy and paste accessible CMS Filter components for your project Clone Accessible Components UI KIT new Example 2 Filter CMS using checkboxes Choose any country you want to visit: United States India Brazil Spain Italy France Clear all Thank you! Your submission has been received! Oops! Something went wrong while submitting the form. Showing 21 results Capri / Italy Capri Island Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula. New York / United States American Museum of Natural History Is a natural history museum on the Upper West Side of Manhattan, New York City. Rome / Italy The Vatican Museums The Vatican Museums are the public museums of the Vatican City. Rio de Janeiro / Brazil Christ the Redeemer Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil. Gujarat / India Statue of Unity Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel. Arizona / United States The Grand Canyon The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States. Orlando / United States Walt Disney World Is an entertainment resort complex in Bay Lake and Lake Buena Vista, Florida, United States. Foz do Iguaçu / Brazil Iguazu Falls Iguazú Falls are waterfalls of the Iguazu River on the border of the Argentine and Brazil. Rio de Janeiro / Brazil Copacabana Beach Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil. Agra / India Taj Mahal The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra. New York / United States Central Park An urban park in New York City located between the Upper West and Upper East Sides of Manhattan. San Francisco / United States Golden Gate Bridge The Golden Gate Bridge is a suspension bridge spanning the Golden Gate. New York / United States Statue of Liberty Is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City. Rome / Italy Trevi Fountain The Trevi Fountain is a fountain in the Trevi district in Rome, Italy. Rome / Italy The Colosseum The Colosseum is an oval amphitheater in the center of the city of Rome, Italy. Barcelona / Spain Parque Güell Parc Güell is a privatized park system composed of gardens and architectural elements. Barcelona / Spain Casa Milà Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance. Barcelona / Spain Sagrada Família Is a large unfinished Roman Catholic minor basilica in the Eixample district of Barcelona. Paris / France Louvre Museum It is the home of many of the most known work of arts, including the Mona Lisa. Paris / France Arc de Triomphe The Arc de Triomphe de l'Étoile is one of the most famous monuments in Paris, France. Paris / France Torre Eiffel It is named after the engineer Gustave Eiffel, whose company designed and built the tower. No results found. Please try different keywords. Copy and paste accessible CMS Filter components for your project Clone Accessible Components UI KIT new Example 3 Filter CMS with all form elements Search here: clear Choose any country you want to visit: clear United States India Brazil Spain Italy France Choose any category: clear Entertainment Park Adventure Paid tour Free tour Culture Historical Most rated Beach Museum Architecture Nature Most visited Select one...Most visitedMost rated Featured: Prime Video Clear all Thank you! Your submission has been received! Oops! Something went wrong while submitting the form. Showing 20 out of 20 results Paris / France Arc de Triomphe The Arc de Triomphe de l'Étoile is one of the most famous monuments in Paris, France. false Most visited Architecture Historical Most rated Free tour San Francisco / United States Golden Gate Bridge The Golden Gate Bridge is a suspension bridge spanning the Golden Gate. true Architecture Free tour Historical Most rated Paris / France Torre Eiffel It is named after the engineer Gustave Eiffel, whose company designed and built the tower. false Most rated Most visited Architecture Culture Historical Barcelona / Spain Sagrada Família Is a large unfinished Roman Catholic minor basilica in the Eixample district of Barcelona. true Most visited Architecture Culture Historical Paid tour New York / United States American Museum of Natural History Is a natural history museum on the Upper West Side of Manhattan, New York City. false Architecture Culture Historical Most visited Museum Paris / France Louvre Museum It is the home of many of the most known work of arts, including the Mona Lisa. false Architecture Museum Most visited Most rated Culture New York / United States Statue of Liberty Is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City. false Architecture Culture Historical Most visited Paid tour Rome / Italy Trevi Fountain The Trevi Fountain is a fountain in the Trevi district in Rome, Italy. true Architecture Culture Free tour Historical Most rated Foz do Iguaçu / Brazil Iguazu Falls Iguazú Falls are waterfalls of the Iguazu River on the border of the Argentine and Brazil. true Nature Park Paid tour Adventure Most visited Rome / Italy The Vatican Museums The Vatican Museums are the public museums of the Vatican City. false Architecture Culture Historical Most rated Museum Rio de Janeiro / Brazil Copacabana Beach Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil. false Beach Free tour Most visited Agra / India Taj Mahal The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra. false Architecture Culture Historical Most visited Paid tour Rome / Italy The Colosseum The Colosseum is an oval amphitheater in the center of the city of Rome, Italy. false Architecture Most visited Historical Most rated Paid tour Orlando / United States Walt Disney World Is an entertainment resort complex in Bay Lake and Lake Buena Vista, Florida, United States. false Adventure Paid tour Entertainment Most visited New York / United States Central Park An urban park in New York City located between the Upper West and Upper East Sides of Manhattan. false Most visited Nature Free tour Park Arizona / United States The Grand Canyon The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States. false Park Nature Adventure Most rated Rio de Janeiro / Brazil Christ the Redeemer Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil. false Architecture Culture Paid tour Park Most rated Barcelona / Spain Casa Milà Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance. false Architecture Culture Historical Museum Paid tour Gujarat / India Statue of Unity Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel. true Architecture Culture Historical Paid tour Most rated Capri / Italy Capri Island Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula. false Beach Adventure Free tour Historical Nature No results found. Please try different keywords. Copy and paste accessible CMS Filter components for your project Clone Accessible Components UI KIT new COMBINATIONS USING CMS FILTER: You can combine this Attribute with others to create more complex solutions. CMS Filter + CMS Nest CREATE A FILTER WITH MORE THAN 5 CATEGORIES ON EACH POST. CMS Filter + CMS Select CREATE A FILTER AND POPULATE A SELECT FIELD WITH DYNAMIC CONTENT. CMS Filter + CMS Load + CMS Nest CREATE A FILTER WITH MORE THAN 5 CATEGORIES AND PAGINATION MODE. CMS Filter + CMS Load + CMS Combine FILTER AND LOAD ITEMS FROM 2 DIFFERENT CMS COLLECTIONS. CMS Filter + CMS Combine FILTER 2 DIFFERENT COLLECTIONS LISTS COMBINED. CMS Filter + Static to Collection List CREATE A FILTER AND ADD A STATIC ELEMENT (LIKE AN AD) INSIDE THE COLLECTION LIST. FREQUENTLY ASKED QUESTIONS Everything you need to know about this attributes solution. Are form and form block mandatory for the filter UI elements or are they best practices "only"? They are mandatory for the system. It was built as a solution that can manage enterprise-level filters. Forms allow for natural accessibility and screen reader functions. This also takes out the requirement to have multi and exclusive labeled filter groups. Can CMS Filter and CMS Sort work together? Sure they can! Can I filter 2 collections with CMS filter? First you have to use CMS combine then you will be able to filter both collections, this cannot be possible without CMS combine Previous Load more DEVELOPER DOCUMENTATION Check the dev documentation NEXT TIME IMPLEMENT INSIDE WEBFLOW Use Finsweet Extension Automated Support NEED MORE HELP? USE THE AUTOMATED SUPPORT Help yourself in minutes. Don't wait hours or days for support. Subscribe SIGN UP FOR FUTURE RELEASES! Fill your email here Thank you! Your submission has been received! Oops! Something went wrong while submitting the form. About AttributesFAQLicense & TermsPrivacy Policy Made with by DID YOU SUCCEED IN IMPLEMENTING THIS SOLUTION? YesNo Just checking.. I haven't tried 🎉 CONGRATS! NICE! HOW CAN WE MAKE YOUR EXPERIENCE EVEN BETTER? 🎉 THANK YOU! We will keep working to always improve our solutions for the community. Oops! Something went wrong while submitting the form. HOW CAN WE MAKE OUR DOCUMENTATION BETTER? NEED HELP? We will keep working to always improve our solutions for the community. Get premium support Oops! Something went wrong while submitting the form.