# salla-applied-filters (https://docs.salla.dev/twilight/react/web-components/salla-applied-filters)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

Shows the filters currently applied on a product listing as removable chips, plus a "clear all" button.
Place it on the same page as `salla-filters`; it takes the filter definitions and selections from that
component, reads the initial selections from the page URL, and renders nothing when no filter is applied.
Removing a chip or clearing all calls `removeFilter` or `resetFilters` on the page's first `salla-filters` element.
Each remove button has an `aria-label` made of the delete label and the chip text.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-applied-filters>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaAppliedFilters } from '@salla.sa/twilight-components-react/applied-filters';
```

## Example [#example]

```tsx
import { SallaFilters } from '@salla.sa/twilight-components-react/filters';
import { SallaAppliedFilters } from '@salla.sa/twilight-components-react/applied-filters';

export function Example() {
  return (
    <>
      <SallaFilters />
      <SallaAppliedFilters />
    </>
  );
}
```

```html
<salla-filters></salla-filters>
<salla-applied-filters></salla-applied-filters>
```