Filter UI for the
S2 Framework

Thoroughly cleaned and improved version of Finsweet's Filter UI Kit. It works with CMS Filter of Finsweet's Attributes Legacy and is aligned with the S2 Framework. Use a Chrome extension such as xSync to prevent class and variable duplication when pasting elements to your project.

Toggle Light / Dark Mode:

Radio Buttons

Radio button #1
Radio button #2
Radio button #3
Radio button #4
Radio button #6
Radio button #7

Checkboxes

Checkbox #1
Checkbox #2
Checkbox #3
Checkbox #4
Checkbox #6
Checkbox #7
Webflow interactions
Checkbox #8
Webflow interactions
Checkbox #9
Webflow interactions
Checkbox #10

Search Input

Search input #1
Search input #2

Dropdowns

Dropdown #1
Webflow interactions
Dropdown 1
Dropdown #2
Webflow interactions
Dropdown 2

Sort Buttons

For Attributes CMS Sort.

Sort button #1
Name
Name AscName Desc
Name
Name AscName Desc
Name
Name AscName Desc
Sort button #2
Name
Name AscName Desc
Name
Name AscName Desc
Name
Name AscName Desc

Range Sliders

For Attributes Range Slider.

Range slider #1
$0
Range slider #2
$0
$0
Range slider #3
0
100
Range slider #4
0
100

Tags

Use with tag-template feature of Attributes CMS Filter.

Tag #1
Tag
close icon
Tag
Tag #2
Tag
Tag #3
Tag

Reset Buttons

Use with reset feature of Attributes CMS Filter.

Reset button #1
Reset
Reset button #2
Reset
Reset button #3
Reset All
Clear button #4

Empty States

Use with empty feature of Attributes CMS Filter.

Empty state #1
No results found.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

Clear filters
Empty state #2
No results found.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

No items found.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.