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

The `<ws-filter-toggle>` component provides a toggle switch that switches a filter between the modes **Include** (`eq` – show products with the selected values) and **Exclude** (`neq` – exclude products with the selected values). The component automatically links to the matching `<ws-filter>` via the `name` attribute.

## Requirement

* A `<ws-filter>` with the same `name` attribute must be present.
* JavaScript bundle `ws-search-component-<version-number>.js` from version **1.9.1**.

## 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-toggle
  name="typeofmeat"
  label-on="Included"
  label-off="Not included"
  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>
```

* **Attributes**
  * `name`: Filter name; must match the `name` attribute of the associated `<ws-filter>`.
  * `label-on`: Label text when the switch is ON. Default: `Include`
  * `label-off`: Label text when the switch is OFF. Default: `Exclude`
  * `default-checked`: Initial state of the switch; `true` = switch ON. Default: `true`
  * `invert`: Inverts the logic of the switch. Default: `false`
    * `false`: Switch ON = Include (`eq`), Switch OFF = Exclude (`neq`)
    * `true`: Switch ON = Exclude (`neq`), Switch OFF = Include (`eq`)
  * `container-class`: CSS class for the container.
  * `switch-class`: CSS class for the switch.
  * `label-class`: CSS class for the label.

<Info>
  Toggling the switch resets the selected options of the associated filter.
</Info>

## CSS & styling

Styling is done via the `container-class`, `switch-class`, and `label-class` attributes, which let you assign your own CSS classes (e.g. Bootstrap classes as in the example) to the generated elements.