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.
This component is deprecated and has a new name and functionality, filter chips.
The filter tag is a way to explicit show what options the user has to choose between within a category.
Above: Slide-out for the filter pattern, including the filter tags component.
Filter tags can be based on what the user needs. For 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 tags. If the user only has accounts in one country, the filter tag category for countries is not needed.
Above: Example of how filter tags can be used
If the category includes a variety of filter tags, a section expander is good to consider. See example below. Usage of the section expander depends on the context. Consider how much size there is available, rather than how many filter tags are displayed.
Above: Example of section expander in combination with filter tags
When including the filter tags, include the chips component for the user to easily see what choices was made. As the chips component is being displayed, the user can remove the property for a more smooth usage.
For size specification for components used in the filter component: Slide-out, Tab, Chips, Section expander, Date picker, form components.
1 rem = 16px