Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Filter chip

The filter chip component allows users to quickly refine the result of data they want to be presented on the page.

Component Filter chip

Guidelines

Short description

Filters are a great tool to narrow down high volumes of content and to surface the most relevant results. The filter chip comes in three variants:

  • Selectable - This variant is the one to use as default, contains only of a label.
  • Selected - When a filter option is clicked the filter chip changes state and contains of both label and a checkmark icon.
  • Removable - This is the variant to use in the context of the actual filtered result. Contains of label and the Times icon (Cross) to show that the chip will be removed on click.

 

When and how to use it

The filter chip component is used in the filter pattern. The filters should be relevant and well organized. When possible base the filters on what the user needs.

Example

If a filter pattern is being used related to accounts and the user has accounts in three countries. The user only needs those three options as filter chips. If the user only has accounts in one country, the filter category for countries is not needed.

On each selected filter click, show the number of result each option will give. This gives the user the best hint on how the selected filters narrows or broaden their data.

 

Do's and don't

Do
  • Use a slide-out modal for filter application when filter options are many.
  • Provide relevant predetermined options.
  • Allow multiple selections.
  • Allow user to select / unselect or clear all filters.
Don't
  • Place the filter function in context if too many categories and/or filter options. (Use a slide-out modal).

 

Writing

 

Accessibility

 

Specification

Page last updated

Feedback

Was this helpful?