How to Handle a Massive Filter with Over 100 Options

Batch filtering with a modal

Designing filters for large-scale enterprise apps is different than the average app. You don’t have a few options to handle, but hundreds. Making everything fit intuitively is quite the design challenge.

While a left sidebar and horizontal toolbar are common UI patterns for filters, they aren’t the best when dealing with hundreds of filters. Instead, a better approach is a modal screen dedicated to batch filtering.

However, there’s still a potential problem with this approach. How do you fit hundreds of filter options on a single modal screen? You can’t stack them all vertically, or you’ll force users to scroll excessively. The only way to make this work is to design a navigation within the modal.

Adding Navigation to the Modal

To add navigation to the modal, you must designate a small portion of the left side for a sidebar. This sidebar is scrollable and allows users to see an infinite number of filter options without compromising width space. The number of items can grow infinitely in a vertical direction, and there’s ample width space to display multiple options.

You can choose a horizontal or vertical chip stack. If you choose a horizontal stack, you’ll have a lot of vertical space to work with, but you may not need to use it all. In this case, you can opt for a vertical stack of chips. The benefit is that the options are easier to click, and you can alphabetize them for faster scanning.

You should also add a search field at the top so that users can find specific filters without spending much time. A footer at the bottom of the modal contains a “Apply all filters” and a “Clear all” button. It also indicates and updates the number of results it’ll show after each filter selection. After the user clicks the “Apply” button, the modal will close and show them their results.