> ## 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-toggle

Die Komponente `<ws-filter-toggle>` stellt einen Toggle-Switch bereit, der einen Filter zwischen dem Modus **Include** (`eq` - Produkte mit den gewählten Werten anzeigen) und **Exclude** (`neq` - Produkte mit den gewählten Werten ausschließen) umschaltet. Die Komponente verknüpft sich automatisch über das `name`-Attribut mit dem passenden `<ws-filter>`.

## Voraussetzung

* Ein `<ws-filter>` mit demselben `name`-Attribut muss vorhanden sein.
* JavaScript-Bundle `ws-search-component-<Versionsnummer>.js` ab Version **1.9.1**

## Komponente

Die Komponente kann wie folgt auf der Kategorie- und Suchergebnisseite eingebunden werden:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-filter-toggle
  name="typeofmeat"
  label-on="Enthalten"
  label-off="Nicht enthalten"
  default-checked="true"
  container-class="form-check form-switch"
  switch-class="form-check-input"
  label-class="form-check-label">
</ws-filter-toggle>

<ws-filter
  name="typeofmeat"
  type="checkbox"
  multiple="true">
</ws-filter>
```

* **Attribute**
  * `name`: Filter-Name; muss mit dem `name`-Attribut des zugehörigen `<ws-filter>` übereinstimmen.
  * `label-on`: Label-Text, wenn der Switch ON ist. Default: `Include`
  * `label-off`: Label-Text, wenn der Switch OFF ist. Default: `Exclude`
  * `default-checked`: Initial-Status des Switches; `true` = Switch ON. Default: `true`
  * `invert`: Invertiert die Logik des Switches. Default: `false`
    * `false`: Switch ON = Include (`eq`), Switch OFF = Exclude (`neq`)
    * `true`: Switch ON = Exclude (`neq`), Switch OFF = Include (`eq`)
  * `container-class`: CSS-Klasse für den Container.
  * `switch-class`: CSS-Klasse für den Switch.
  * `label-class`: CSS-Klasse für das Label.

<Info>
  Das Umschalten des Switches setzt die ausgewählten Optionen des zugehörigen Filters zurück.
</Info>

## CSS & Styling

Das Styling erfolgt über die Attribute `container-class`, `switch-class` und `label-class`, mit denen den erzeugten Elementen eigene CSS-Klassen (z.B. Bootstrap-Klassen wie im Beispiel) zugewiesen werden können.