Advanced Filter Panel

Advanced Filter Panel lets users narrow down large result sets.

In progress

Show details

Intended for use alongside the Filter Panel, the Advanced Filter Panel is highly configurable, enabling users to narrow down large result sets.

Anatomy

Anatomy summary lists and describes all the elements within a component (including nested components).

Element	Description	Optional?
1. Container	Expandable column panel that contains the advanced filters.	No
2. Title	Title that describes the panel’s content.	No
3. Reset button	Lets the user reset the filters if any filters have been edited.	No
4. Filters	Filters comprised of form elements, such as Checkbox, Text Field, Select, Multiselect, to filter page content.	No
5. Vertical divider	Separates panel from the page content that is being filtered.	No

Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.

AdvancedFilterPanel

Property	Values	Default
state Variant	rest \| active	rest

AdvancedFilterPanel

state active

AdvancedFilterPanel

state rest

This component is internally dependent on the following components:

Button

Buttons allow users to take actions that will trigger a response.

Form Elements

Ask a question or submit a request

Find us in #team-frontend-foundations-requests Slack channel