Component

Filter summary

Displays a summary of applied filters as links that can remove a specific filter. Also a link for clearing all filters.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Selected filters

How to call this component

<%= render "components/filter_summary", {
  reset_link_href: "#",
  reset_link_text: "Clear all filters",
  heading_level: 3,
  heading_text: "Selected filters",
  filters: [
    {
      label: "Filter 1",
      value: "Value 1",
      remove_href: "#",
      visually_hidden_prefix: "Remove filter"
    },
    {
      label: "Filter 2",
      value: "Value 2",
      remove_href: "#",
      visually_hidden_prefix: "Remove filter"
    },
    {
      label: "Filter 3",
      value: "Value that is so long that the styling needs to handle it correctly",
      remove_href: "#",
      visually_hidden_prefix: "Remove filter"
    }
  ]
} %>

Accessibility acceptance criteria

The component items must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • be usable with touch
  • indicate when it has focus