HPE
Design System
Foundation
Components
Templates
Extend
Templates

Filtering

Allows users to create a focused data set by specifying data attributes and values of interest.

Sites

6
items
Filters
0 - 2000 people
Online
Allerod, Denmark (ALL)Engholm Parkvej 8, Ground Floor, Alleroed, DK-3450, Denmark
Location TypeOffice
Offline
Madrid, Spain (ESM)Vicente Aleixandre 1, Las Rozas, 28232, Spain
Location TypeOffice
Online
Fort Collins, CO3404 E Harmony Road, Fort Collins, Colorado, 80528, United States
Location TypeOffice
Online
WW Corporate Headquarters - San Jose, CA6280 America Center Dr., San Jose, California, 95002, United States
Location TypeCustomer Center
Offline
New York, NY461 Fifth Avenue, New York, NY, 10017, United States
Location TypeCustomer Center
Online
Amstelveen HQ, NLStroombaan 16, 1181 VX Amstelveen, Amstelveen, The Netherlands
Location TypeCustomer Center
Open in Figma

What makes up filtering?

Filtering allows data to be narrowed down around a set of specified parameters. When users may not have a specific record in mind but are seeking to group data around a certain set of attributes, filtering should be used to allow the user to narrow the data and take action on relevant records.

If a user will likely be looking for a specific record as opposed to groups of data, consider implementing search.

Controls

Filter controls should live above the data content and facilitate a user's ability to locate and take actions against records of interest.

Filters

The way filters are displayed is dependent on the use case, number of filters, and data types of the content. These general guidelines are a starting point for how to present filtering in your application, but it's important to consider each recommendation in the context of your application's use cases.

Results

Results should live below the controls and display any records that meet filter criteria. Depending on the data types and use case, results may be represented by a List, Cards, or Table.

Pagination

If the number of records displayed per page is limited, pagination should be placed underneath the results.

When to use

Filters in a center Layer

When applying many filters at once, it is helpful to present them in a consolidated Layer. In this example, the Layer is positioned at the center of the screen.

Orders

6
items
  • My PVT Cloud Order
    Coke | HPE GreenLake Private Cloud
    Delivered
  • GEM_1
    Boeing | VMaaS for R&D
    In Transit
  • GEM_2
    Coke | HPE GreenLake Private Cloud
    Created
  • My PVT Cloud Order 2
    Boeing | Mercury
    Cancelled
  • Mercury 7
    Suncor Energy | VMaaS for R&D
    Ready to Ship
  • GEM_3
    Coke | Mercury
    Created

Filters in a right-anchored Layer

When applying many filters at once, it is helpful to present them in a consolidated Layer. In this example, the Layer is anchored to the right edge of the screen.

Users

6
items
Online
Eric SoderbergSan Jose, CA
RoleEngineer
Online
Taylor SeamansSan Jose, CA
RoleEngineer
Offline
Matthew GlissmannFort Collins, CO
RoleEngineer
Online
Greg FuruiyeFort Collins, CO
RoleDesigner
Offline
Vicky AvalosSan Jose, CA
RoleDesigner
Online
Shimi YacobiFort Collins, CO
RoleEngineer

Guidelines

Filtering should help users quickly narrow down data sets by selecting certain parameters to define the relevant data bounds. Different types of inputs may better suited for filtering depending on the type of data.

Use your best judgement around which input type is appropriate for the data you are filtering. However, here are a few things to consider:

  • Is data presented as Cards or List? When there is ample screen space, display the filters to the left of the data as a persistent column. Once space becomes limited, use a single filter button that opens a Layer containing the filters.
  • Is there more than one filter? Use a single button with filter icon that opens a Layer containing the filters.
  • Is the user going to be selecting multiple options? Filter with CheckBoxGroup.
  • Is the user aiming to filter based on a range? Filter with RangeSelector.
  • Does your filter have a large number of options (>10)? Filter with CheckBoxGroup in a side-anchored Layer. Present a prioritized subset of the options to the user first and provide an accompanying "Show more" anchor that will reveal the rest of the options when clicked. When utilizing the "Show more", your filters should be displayed in a side-anchored modal since it provides an intuitive vertical scrolling behavior.
  • Does your filter have a massive number of options (>100)? First consider if you are able to break this filter into more manageable groupings. However, if you are unable to break up the filter options into smaller groups, consider using a scrollable CheckBoxGroup. This approach should be used as a last resort since research demonstrates that this pattern is not ideal for user experience.

More examples of filtering

Filtering with DropButton

Machines

6
items
Online
d6db7379-c71c-4e88-ab26-ab788cdccaa5
RAM16 GiB
Offline
bbde1017-2de5-4a6a-9fa0-7802dafc852c
RAM32 GiB
Online
931cdda8-d5f2-4294-85b5-da8ff8100fa5
RAM128 GiB
Online
09ff2e6f-b452-4943-b6b6-a13d70a20117
RAM128 GiB
Offline
8a617640-69ca-4d6f-8503-4b272426728f
RAM128 GiB
Offline
16c9aae6-6732-4f95-b139-3363701e7770
RAM32 GiB

Filtering with RangeSelector

Storage

7
items
  • Asup-array01-lvs (default)San Jose, CA
    Availability: 90.2%
  • Des-K8-Sym-R5-3 (default)San Jose, CA
    Availability: 70.3%
  • Dev36-erray01 ( default)Houston, TX
    Availability: 95.8%
  • asup-array1 (default)Fort Collins, CO
    Availability: 85.1%
  • asup-array21 (default)New York, NY
    Availability: 53.4%
  • Dpe-R3-19 (default)Houston, TX
    Availability: 77.3%
  • Asup-array10-lvs (default)Fort Collins, CO
    Availability: 30.4%

Filtering with Select

Filtering with Select should be used when the goal of the user will likely be to filter data around one specific criteria. If the user will be selecting multiple criteria, consider using CheckBoxGroup.

Hosts

7
items
  • Apex-Server
    Ready
  • AuroraEdge-7.7.-edgedeploy4
    Paused
  • ECAAS3
    Ready
  • ECP-Master-01
    Ready
  • ECaas-EdgeSite1
    Paused
  • IronMan-2
    Ready
  • california_1
    Paused

Related

Related content you may find useful when using Filtering.

HPE Tables Preview
Table
Table presents data in a column and row format.
HPE Lists Preview
Lists
Go-to patterns for displaying many services, devices, users, and more.
HPE Cards Preview
Card
A container providing at-a-glance information and easy access to more details.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page
© 2021 Hewlett Packard Enterprise
Terms
Privacy
Security
Feedback