Skip to the main content
arrow down

The F'in sweet

attributes logo

FILTER UI KIT for

webflow logo

that's fully Accessible

form icon
Form Components
Tag
close icon
No Results found.

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

reset icon
Clear All
tick icon
Copy/paste components
tick icon
Client-first named classes
tick icon
All attributes added
tick icon
Fully accessible
tick icon
Accessibility education
tick icon
Easy to style

Radio Buttons

Webflow native Radio Buttons.

Radio button #1
How to use the Radio button #1
Radio button #3
How to use the Radio button #3
Radio button #5
using Webflow interactions
How to use the Radio button #5
Radio button #2
How to use the Radio button #2
Radio button #4
How to use the Radio button #4
Radio button #6
How to use the Radio button #6

Checkboxes

Webflow native Checkboxes.

Checkbox #1
How to use the Checkbox #1
Checkbox #3
How to use the Checkbox #3
Checkbox #5
using Webflow interactions
How to use the Checkbox #5
Checkbox #7
using Webflow interactions
How to use the Checkbox #7
Checkbox #9
using Webflow interactions
How to use the Checkbox #9
Checkbox #2
How to use the Checkbox #2
Checkbox #4
How to use the Checkbox #4
Checkbox #6
How to use the Checkbox #6
Checkbox #8
using Webflow interactions
How to use the Checkbox #8
Checkbox #10
How to use the Checkbox #10

Search input

Webflow native text search input.

Search input #1
How to use the Search input #1
Search input #2
How to use the Search input #2

Dropdowns

Webflow native Dropdown component with checkboxes inside.

Dropdown #1
Dropdown 1
How to use the Dropdown #1
Dropdown #2
using Webflow interactions
Dropdown 2
How to use the Dropdown #2

Custom Form Select

Select field #1 - regular
Select field
How to use the Select field #1
Select field #3 - with a label inside
Sort by
Select field
How to use the Select field #3
Select field  #5 - with a reset option
Select field
How to use the Select field #5
Select field #2 - with an icon
image placeholder
Select field
How to use the Select field #2
Select field #4 - with a label at the top
Sort by
Select field
How to use the Select field #4
Select field  #6 - opens on hover
Select field
How to use the Select field #6

Sort buttons

Sort button #1
Name
Name AscName Desc
Style ascending and descending states and hide this block with display: none.
How to use the Sort button #1
Sort button #2
Name
Name AscName Desc
Style ascending and descending states and hide this block with display: none.
How to use the Sort button #2

Range sliders

Range slider #1
$0
How to use the Range slider #1
Range slider #3
0
100
How to use the Range slider #3
Range slider #2
$0
$0
How to use the Range slider #2
Range slider #4
0
100
How to use the Range slider #4

Reset Buttons

Use with reset feature of Attributes CMS Filter.

Reset button #1
close icon
Reset
How to use the Reset button #1
Reset button #3
reset icon
Reset All
How to use the Reset button #3
Reset button #2
Reset
close icon
How to use the Reset button #2
Clear button #4
clear icon
How to use the Reset 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, eros dolor.

reset icon
Clear All
How to use the Empty state #1
Empty state #2
search icon
No Results found.

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

How to use the Empty state #2

Icons

Collection of icons used on this clonable.

tick icon
search icon
sort icon
sort descendingsort ascending icon
sort icon
sort descending iconsort ascending icon

close iconclear iconreset icon
tick icon
search icon
sort icon
sort descending iconsort ascending icon
sort icon
sort descending icon
sort ascending icon
close icon
clear iconreset icon

Disclaimer

This cloneable has a high quality standard for best accessibility practices. We have tested these components on different browsers, machines, and environments. We are confident that this cloneable will be a resource to help you better implement, maintain, and understand web accessibility.

It is important to understand:

1. Outdated or non-major browsers may have issues with these components. Like most things we build on the web, browser compatibility can be an issue. Same with potential accessibility issues. We tested these components across all major browsers and feel confident to release this project as a strong accessibility cloneable.

2. Accessible web elements can be made non-accessible. We are giving you copy-paste components and technical directions for how to implement these components. However, this does not mean these components are accessible for eternity. If you incorrectly edit one of these components, an accessible component can become non-accessible.

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