Accessible Form Filter Components

Form Components

Copy/paste components

Client-first named classes

All attributes added

Fully accessible

Accessibility education

Easy to style

Search input

Webflow native text search input.

Search input #1

Search input #2

Dropdowns

Webflow native Dropdown component with checkboxes inside.

Dropdown #1

Dropdown #2

using Webflow interactions

Custom Form Select

Built with Attributes Custom Form Select.

Select field #1 - regular

Select field #3 - with a label inside

Select field #5 - with a reset option

Select field #2 - with an icon

Select field #4 - with a label at the top

Select field #6 - opens on hover

Sort buttons

Use with Attributes CMS Sort.

Sort button #1

Name

Name Asc Name Desc

Style ascending and descending states and hide this block with display: none.

Sort button #2

Name

Name Asc Name Desc

Style ascending and descending states and hide this block with display: none.

Range sliders

Built with Attributes Range Slider.

Range slider #1

Range slider #3

100

Range slider #2

Range slider #4

100

Reset Buttons

Use with reset feature of Attributes CMS Filter.

Reset button #1

Reset

Reset button #3

Reset All

Reset button #2

Reset

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, eros dolor.

Clear All

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, eros dolor interdum nulla, ut commodo diam.

Icons

Collection of icons used on this clonable.

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.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

The F'in sweet

FILTER UI KIT for

that's fully Accessible

Radio Buttons

Checkboxes