Filter

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.

filter group, mobile - shows all filter, off canvas, with horizontal scroll