Filter

Filters enable users to narrow down, refine, and manage large sets of information or data

Resources

Figma Pattern

MDX Filter

Git Repository

MDX Filter

Intro & Anatomy

The Filter pattern lets users choose which data items to show or hide by switching specific pre-set features on or off. This helps users see only what they need in big sets of data, such as product categories. It assists in finding specific items, viewing options that meet certain criteria, and making choices when there are many options available.

The Filter patterns consists of multiple components of the MDX library and a custom component named the filterSelected.

Components used

Button Group

Checkbox

Icon Button

Link

Select

Text Input

Filter Header

The Filter Header contains a title, a badge, filter-related actions as well as a search.

header on all filter screen [mobile only], includes action to reset all selected options

filter header on single category, includes action to select or reset all options

filter header with expanded search

Filter Footer

The filter footer is mobile-only. On larger screen, where the flyout is shown, all changes are instantaneously.

footer on all filter screen [mobile only], includes button to submit filtering options

footer on all filter screen [mobile only], includes button to submit filtering options or return to all filter screen

Filter Selected

The filterSelected component shows which and how many filters a user has selected.

Desktop vs Mobile

filterSelected on mobile hugs content

filterSelected on desktop is set to a fixed width

Behaviour when filled [Desktop]

filterSelected [desktop] has one category selected

filterSelected [desktop] has two categories selected that don't extend the width of the component

filterSelected [desktop] has three categories selected that don't extend the width of the component

filterSelected [desktop] has two categories selected that don't extend the width of the component, and additional categories shown in the counter

filterSelected [desktop] has three categories selected that don't extend the width of the component, and additional categories shown in the counter

filterSelected [desktop] has one category selected that doesn't extend the width of the component

filterSelected [desktop] has more than category selected that does extend the width of the component. If none of the category names fit the width of the component, or it is sorted alphabetically, the name of the category will be truncated

filterSelected [desktop] has one category selected that does extend the width of the component, therefore the name will be truncated

Behaviour when filled [Mobile]

The filterSelect on mobile only shows one category name, no matter how many categories are selected.

filterSelected [mobile], one category with short name

filterSelected [mobile], one category with long name

filterSelected [mobile], multiple categories, shows only one with short name

The Filter groups consists of a button, filter select and filterSelected components.

filter group, collapsed - shows most important/used filters

filter group, expanded - shows most all available filters
Currently, MDX only offers this form of showing more filters, though it is optional to show all available filters in an overlay or drawer.