---

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>
  import { PreselectedFilters } from '@empathyco/x-components';
  export default {
    name: 'PreselectedFiltersDemo',
    components: {
      PreselectedFilters
    },
    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>
  import { PreselectedFilters } from '@empathyco/x-components';
  export default {
    name: 'PreselectedFiltersDemo',
    components: {
      PreselectedFilters
    },
    computed: {
      filters() {
        return ['{!tag=brand_facet}brand_facet:"Lego"', '{!tag=age_facet}age_facet:"toddler"'];
      }
    }
  };
</script>
```