Filter

Filter is a component that enables a user to quickly apply stackable filters to a table or page full of objects. Filtering reduces the number of objects visible on screen at one time, and is often used to reduce visual clutter and focus only on the objects that matter to the user.

Filter is often displayed as a component of the Data Toolbar.

Image of filter

Image of filter

Filter

Filter Bar

Image highlighting attribute selector

  1. Attribute Selector (optional): Contains a list of the possible attributes by which to filter.

  2. Filter Query Field: Use when there are more than 15 possible values. The user’s filter query is entered here. The filter is activated when the user presses the “enter” key and all objects that do not have a match to this value are hidden.

  3. Filter Query Dropdown (optional): Use the filter query dropdown when there are less than 15 possible values to allow the user to select from a known and fixed value list (e.g a list of statuses). The filter is activated when the user selects a value. Objects that do not have this value are hidden.

Image highlighting filter query field

Active Filters Bar

Title highlighting active filters bar

  1. Active Filter: Filters are labeled with the attribute and value used to create them. Clicking the X in the box will remove the filter. New filters appear to the right of existing filters and are highlighted briefly upon appearance. If no active filters exist, the active filters bar is hidden.

  2. Clear All Filters: Clicking this action removes all currently active filters.

  3. Item and Results Count: Design TBD

Notes:

  • Each filter is additive in nature, meaning that adding further filters will reduce the overall set of results. Filters are combined with the AND boolean for the results they return.

  • If an attribute can only have one filter value at any time, selecting a new value will replace the previous filter rather than adding a new one.