Filter

The filter component can be used in a lot of different use cases to help users reduce the amount of data displayed and find the information they need faster. These guidelines show you the different elements that compose the filter component.

Designer guidelines

Developer documentation

Filter elementslink

The filter is composed of a header, main body with set of UI elements and actions.

Header

There are three types of filter headers: basic header, round toggled header and square header. Always placed at the top part of the filter.

Body elements

Here are the main elements that you can combine to build a filter specific for your financial application.

Actions

Use the apply and cancel default actions. The Apply action is required to filter the related content.

How to use filter in the appslink

Want to know how to use filter in a real app? Here is an example of the developer portal API catalog.