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

- 

- 

• Details: Specification in Figma
• Instruction: How to access Figma