Filtering
The more filters section provides access to a full list of filtering options. It expands a hidden panel or collapsible section containing a list of advanced or less frequently used filters, typically displayed as a set of checkboxes. This component supports more granular control while keeping the main interface clean and focused.
Use the more filters section by itself to show a more complete list of filters right away, or to surface secondary filtering criteria that complement the quick filters (when used together). It allows users to refine results further without cluttering the default view.
CTA represented by a tertiary button that allows the interaction of the section. The label sets the title of the section and the icon indicates the state of the section (collapsed or expanded).
Divider line appears when the section is expanded to establish where the heading ends and the list of filters starts.
Checkbox that represent each listed filter.
Filter panel, a container that expands or collapses to reveal the filter options.
Usage
When to Use
Use a more filters section when there are too many filter options to fit in the visible area without causing clutter and to group related filters logically.
When Not to Use
Don’t use a more filters section when there are 12 or less filters or when there is no need for the user to filter from a larger group of options. Use the “Quick Filters” section or use both filter sections together.
Variation | Purpose | Content | Icon | Sizes |
|---|---|---|---|---|
Collapsed | Contains the filter panel and keeps it hidden until the user needs to access it. | Tertiary button | With icon (plus) | LG, MD, SM, Default |
Expanded | Displays the filter panel that the section contains. | Tertiary button, list of checkboxes | With icon (minus) | LG, MD, SM, Default |
MD Viewport
For the MD viewport, the filters will be organized in a 3 column layout.
SM and Default Viewports
For the SM and default viewports, the filters will be organized in a sinlge column layout.
