> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# ws-filter-chip

> ws-filter-chip displays active filter values as removable chips so customers can quickly review filters in the search result and reset them individually.

The `<ws-filter-chip>` component displays the currently applied filters in the frontend. It is updated automatically as soon as filters are added or removed. Clicking one of the displayed filters removes it again.

## Requirement

* The component is used in combination with `<ws-filter>`.
* If no filters are defined, there are no active filters to display or remove.

## Component

The component can be embedded as follows on the category and search result page:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-filter-chip></ws-filter-chip>
```

The component generates HTML elements for displaying the active filters. Each filter is rendered as a so-called "chip" component that can be removed.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-filter-chip>
        <button class="closebtn">blue</button>
        <button class="closebtn">Equilibre</button>
        <button class="closebtn">36</button>
        <button class="closebtn">38</button>
        <button class="closebtn">39€ - 50€</button>
</ws-filter-chip>
```

### Optional attribute `neq-label`

Via the `neq-label` attribute you can control how **negative filters** (i.e. filters with `negate`) are displayed. For a negative filter, the value is displayed with a 🚫 symbol, e.g. `🚫 blue`.

If a different prefix is desired or the symbol should be suppressed entirely, the `neq-label` attribute can be adjusted accordingly:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-filter-chip neq-label=""></ws-filter-chip>
<ws-filter-chip neq-label="not "></ws-filter-chip>
```

Result: `not blue` instead of `🚫 blue`.

### Optional attribute `btn-class`

The `btn-class` attribute controls which class is assigned to the generated button.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-filter-chip btn-class="btn btn-secondary"></ws-filter-chip>
```

## CSS & styling

This component generates the following CSS classes for styling:

* `chip-container`: Container for the whole list of applied filters.
* `chip`: Individual applied filter.
* `closebtn`: Button that removes the filter. (Only when no individual class is provided via `btn-class`.)

The styling can be adjusted through these classes.

However, the component itself cannot be extended with additional HTML or CSS inside its container.

## URL filter parameters

Filters can be passed directly to the search module via the URL – e.g. for campaigns, preselections, or direct links with active filters.

More about this in the documentation on [URL filter parameters](/en/ws-search/integration-in-die-templates-storefront/webcomponents/url-filterparameter-query-parameter).