---

title: PreselectedFilters

---

# PreselectedFilters

This component emits FacetsXEvents.PreselectedFiltersProvided when a preselected filter
is set in the snippet config or by using the prop of the component.

## Props

| Name                 | Description                     | Type                  | Default               |
| -------------------- | ------------------------------- | --------------------- | --------------------- |
| <code>filters</code> | A list of filters to preselect. | <code>string[]</code> | <code>() => []</code> |

## Events

A list of events that the component will emit:

[`PreselectedFiltersProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts).

## See it in action

_See how the event is triggered when the component is rendered._

```vue
<template>
  <PreselectedFilters />
</template>

<script setup>
import { PreselectedFilters } from "@empathyco/x-components";
import { provide } from "vue";

provide("snippetConfig", {
  filters: [
    '{!tag=brand_facet}brand_facet:"Lego"',
    '{!tag=age_facet}age_facet:"toddler"',
  ],
});
</script>
```

### Play with props

In this example, the preselected filters have been configured to use a list of configured filters by
prop:

```vue
<template>
  <PreselectedFilters :filters="filters" />
</template>

<script setup>
import { PreselectedFilters } from "@empathyco/x-components";
import { ref } from "vue";

const filters = ref([
  '{!tag=brand_facet}brand_facet:"Lego"',
  '{!tag=age_facet}age_facet:"toddler"',
]);
</script>
```