Filter tag

The filter tag component displays possible options for the user to choose between, for example in a filter.

Short description

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.

When and how to use it

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

Related component: Chips

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.

 

Do’s and don’ts

Do’s

  • Use a slide-out for filter application
  • Provide relevant predetermined options
  • Allow multiple selections
  • Make it easy to see and deselect a filter with the chips component

Don’ts

  • Use too many options per filter category, consider the accordion component if necessary

 

Related to

States

Normal
  • Signifies that the tag is currently unselected.
  • Text: Grey 800 #333333
  • Background: Transparent with 1px border Grey 600 hexa #868686
Hover state
  • Communicates when a user has placed a cursor above the interactive tag.
  • Text: Grey 800 #333333
  • Background: Transparent with 1px border Blue
Pressed state
  • Signifies that the tag is currently selected
  • Text: Dark Blue 2
  • Background: Transparent with 1px border Dark Blue 2
Focus state
  • Communicates when a user has highlighted the tag, using an input method such as a keyboard or mouse. A good example is when the user is tabbing through the page
  • Text: Grey 800 #333333
  • Background: Transparent with 1px border Blue, shadow Blue X:0, Y:0, Blur:4, Spread:1.

 

Sizes

  • 1 rem = 16px
  • Font: SEB Sans Serif Medium, 16px

For size specification for components used in the filter component, see:

  • Slide-out
  • Tab
  • Chips
  • Section expander
  • Date picker
  • Form component