Skip to content

FilterTag

FilterTag is an interactive component used to activate a filter on a large dataset.

Figma logo
  • Use when you want to filter data on a few parameters
    • Consider Checkbox if you have an extensive list of parameters you want to filter on
  • FilterTag implements an a tag
    • All native props will be forwarded to the element
  • Expects an href to a URL that returns filtered results
    • This event can be intercepted with an onClick, but the anchor should still load a page with the current filtered data even if JS is disabled

This example will toggle the active state based on the URL filter parameter; only one filter can be applied in this basic example.

React props
NameTypeDefaultDescription
active  booleanIf true, the filter will marked as active
children  ReactNodeThe content of the Tag
href  stringURL to a filtered dataset; often includes URL parameters
  • FilterTag is a straight-forward component that does not require special consideration for accessibility

The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.

render(
<>
<FilterTag active href="/?lasagna=true">
Meatloaf
</FilterTag>
<FilterTag href="/?lasagna=true&meatloaf=true">Lasagna</FilterTag>
</>,
);
const meatloafFilter = getByText('Meatloaf');
expect(meatloafFilter.href).toEqual('/?lasagna=true');
expect(meatloafFilter).toHaveTextContent('Remove:');
const lasagnaFilter = getByText('Lasagna');
expect(lasagnaFilter.href).toEqual('/?lasagna=true&meatloaf=true');
expect(lasagnaFilter).toHaveTextContent('Add:');