FIlter and search

Filter and search
e.* 1. g charmstore, newjass (17), (18), transcript

    1. Clicking adds items, clicking again toggles?
    1. Added items appear in search field
    1. But you can also type: how does autocomplete work?
    1. If there’s more suggestions than you can show, how do you prioritise?
    1. Visuals: weight of headings vs items, (jaas is a wireframe, charmstore is a visual?)
    1. Typography challenge - the lozenge device makes the font inside smaller, and it can all get a bit teeny tiny…
    1. Should we distinguish between things e.g. an individual machine name, whatever you are searching for in the list, and categories and kinds of things, e.g. region, which will narrow the search but not result in a ‘direct hit’?
    1. Colon pattern like GMail? “From:”etc
    1. Compare with AWS EC2 instance search and Google cloud similar functionality
    1. How does it scale to 20,000 instances, employee names? Can it be fast enough? How to deal with latency? Different patterns for in-memory and endpoints?

Filter and search
Searching across a tabular dataset can fuzzy match the subset of the dataset or the entire dataset. For example, the search could search just name and tags and not owner or price.

Filtering generally results in a chip/marker representing the filter applied. Allowing the user to quickly remove the filter or have an additional clear all filters action.


Inline Filtering - Enter a string to narrow the list of available tags. Select tags to add them to the filter query

Global Filtering - Filter by tags or search by keyword

Global Filtering - Hitting enter transforms the query into a chip and the filter is applied

Global Filtering - Any string can be transformed into a temporary filter tag

  1. Clicking either on the search icon or persistent search field should result in a cursor with suggestions dropdown.
  2. As the user types, the suggestions and filterable categories are filters to matching results
  3. Filtering and plain text search results in a label being added to the search field with a remove action.
  4. Remove all is achieved by clicking the global search close icon


  • Plain text search
  • Search term matches a parameter to filter the search by the following text
  • Toggle and clear filter
  • Clear search

Buttons can vary their verb according to the item selected
Buttons should be visible without scrolling if your items-list is long considered placing the buttons at the top, rather than the default bottom placement.

Always provide a “Clear filters” action next to the markers:

Use real-world language
Filters should be modelled after the actual behaviour of users.

This pattern in use - real product examples
Depending on your context, you will either need a linked pill or a pill option inside of a list box.

Use to allow merchants to add attributes to, and remove attributes from, an object.

EC2 Console - Instance Filtering

Advanced filter/search using query language (‘JQL’)

Board search and filtering

Use multi-select if users can select one or more keywords in their response.

The search followed by verbose filter dropdowns




Key Components in Vanilla this pattern uses

Search and filter

Search box
Contextual menu
Labels (potentially can be renamed: Chips / Markers / Tags…)