Allows users to narrow down content or data by one or more criteria, making relevant items easier to find.
Filters inherit accessibility features from the components used to create them, such as Checkbox and RadioGroup. The filtering system still needs to be accessible as a whole. Ensure users can:Easily identify and understand labels for all controls
Be notified of state changes
Complete all actions with the keyboard
Users should be able to view and interact with filters at the same time as the data set. Filters may collapse, expand or hide, but they should not obstruct results.
One way to achieve this is a sidebar. Keep filter interactions inside the sidebar so they don’t expand over the results.
Apply filters as soon as a selection is made. If results are slow to return, use a confirmation button to apply serveral changes at once.
Place filters in a Drawer (or bottom sheet on apps) accessed by a button. Avoid nesting drawers, let users scroll instead. Provide a button to close the drawer and view results. Consider showing a results count in the button text, for example “View 27 matches”. Include a control to clear all filters, and consider making these sticky at the bottom.
Dismissing the drawer should act as an escape and cancel the most recent filter selection.
Be intentional with the filters you provide. Show only relevant filters. Promote the most important filters and minimise less important ones.
Make it clear what filters have been applied, with an easy way to edit or remove them. Consider a counter for how many filters are applied, and provide a control that clears all filters.
Maintain accessibility. Clearly label all filters. Ensure all actions can be completed by keyboard or with assistive technology.
Provide a quality mobile experience. Users should have access to the same filter options on web and mobile.
Don’t use filters when:users only need to change the order of items, not hide them (provide a sort option instead)
there are only a few predefined views to switch between (provide a view toggle instead).
Bulk actions — For applying a single action across multiple selected items. Checkbox — For selecting multiple values.