HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
What makes up filtering?
Controls
Filters
Results
Pagination
When to use
Filters in a layer
Filtering with selectable results
Guidelines
More examples of filtering
Filtering with RangeSelector
Filtering with Select
Templates

Filtering

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

Users

6 items
    Online

    Eric Soderberg

    San Jose, CA

    RoleEngineer
    Online

    Taylor Seamans

    San Jose, CA

    RoleEngineer
    Offline

    Matthew Glissmann

    Fort Collins, CO

    RoleEngineer
    Online

    Greg Furuiye

    Fort Collins, CO

    RoleDesigner
    Offline

    Vicky Avalos

    San Jose, CA

    RoleDesigner
    Online

    Shimi Yacobi

    Fort Collins, CO

    RoleEngineer

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 DataTable.

Pagination

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

When to use

Filters in a layer

When applying many filters at once, it is helpful to present them in a consolidated Layer.

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

Filtering with selectable results

The summary displayed beneath the search input should always reflect the user's actions. When filtering is combined with selection, the summary text should adjust for the following scenarios:

  • No filters, no selections — The summary should read "X items", where X is the total number of items.
  • Filters applied, no selections — The summary should read "X results of Y items".
  • Selections made — The summary should read "X of Y items selected", where Y is the total number of results that meet the filter criteria or the total number of items if no filtering has been applied.

Servers

56 items
Status
Server 1
8899569448808967
Not connected
On
Proliant SY 480 Gen10
Server 2
482148808968
Connected
Off
Proliant SY 990 Gen9
Server 3
3890108963
Not connected
Off
Proliant SY 990 Gen9
Server 4
8508964
Connected
On
Proliant SY 660 Gen10
Server 5
3123i4264
Connected
On
Proliant SY 660 Gen10
3M442501WV
4208964
Connected
Off
ProLiant DL380 Gen10
ZFD3712GP
CCD21712GP
Not connected
On
--
FTR1237J
GGF24045X
Not connected
On
--
FTRXX237J
FT0237J
Not connected
Off
--
FTR8237J
229501KR
Connected
Off
ProLiant DL380 Gen10
2221K2501KRL
2282501KR
Connected
On
ProLiant DL385 Gen10 Plus
SGFF850T8LK
SGFF850T8LK
Not connected
Unknown
--
22833501KR
228298501KR
Not connected
Unknown
--
SGFF850T8LK
2332501WR
Connected
On
ProLiant DL380 Gen10
MXQ824045Q
MXQ824045Q
Connected
On
ProLiant DL360 Gen10
S76GH939821GF3
S76GH939821GF3
Connected
On
ProLiant DL360 Gen10
C89-20146
C8920146
Not connected
On
--
2LLP73300ZX
2LLP73300ZX
Not connected
Unknown
--
DAOI-8240458
MX78SA458
Connected
On
ProLiant DL360 Gen10
9AS-02708SP
9AS-02708SP
Not connected
On
ProLiant DL325 Gen10 Plus
DF-R501X5.lab
DF-R501X5
Connected
On
ProLiant DL380 Gen10
JYL150TYL
JYL150TYL
Not connected
On
--
DXS4045N
DXS4045N
Not connected
On
--
XFR.0278
M48902278
Connected
On
ProLiant DL360 Gen10
RRR50TXT
RRR50TXT
Not connected
Unknown
--
CFDE0YPQ
CFRT0YPQ
Not connected
On
--
rel34.lab.com
45FREWY3
Connected
On
ProLiant DL380 Gen10
92RO010Z
FRE43210Z
Connected
On
ProLiant DL380 Gen10
RRE44045S
39TO24045S
Not connected
Off
--
RT21867
CN70RT867
Not connected
Unknown
--
IL1Kl.lab
2M29001KH
Not connected
On
ProLiant DL380 Gen10
453FFEW3
56TGD321
Connected
On
ProLiant DL360 Gen10
5G009LK
SFEL2T9LK
Not connected
On
--
TR902JG21
TR902JG21
Connected
On
ProLiant DL380 Gen10
RE4.322.lab
HTR340465
Connected
On
ProLiant DL360 Gen10
LME4.ir.lab
2M25323Y7
Connected
On
ProLiant DL380 Gen10
34265FDE49
MXFFO9274
Connected
On
ProLiant DL360 Gen10
CFDE1GBW
CFDE1GBW
Connected
On
ProLiant DL385 Gen10 Plus
524FAV32F
524FAV32F
Connected
Off
ProLiant DL360 Gen10
8742DS576
8742DS576
Connected
On
ProLiant DL380 Gen10
2MFD5t0110
FDE34zh0110
Connected
On
ProLiant DL380 Gen10
34EP0065
54FDE0065
Not connected
On
--
709522R
7621PP22R
Not connected
On
--
432DE45TH
432DE45TH
Connected
Off
ProLiant DL360 Gen10
FG500352
FG500352
Connected
Off
ProLiant DL380 Gen10
0-S024046C
0-S024046C
Connected
Off
ProLiant DL360 Gen10
U005E936
U005E936
Not connected
On
--
6432FSCN
6432FSCN
Connected
On
ProLiant DL380 Gen10 Plus
3234MFG5.lab
452DF002R8
Connected
Off
ProLiant DL380 Gen10
45FER2sW
45FER2sW
Connected
On
ProLiant DL360 Gen10

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 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

DataTable

DataTable 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