@empathyco/x-components/docs/API-reference/components/history-queries/x-components.history-queries-switch.md

Empathy X Components

---

title: HistoryQueriesSwitch

---

# HistoryQueriesSwitch

History Queries Switch is a component to activate or deactivate the history queries.
This component emits events depending on the `isEnabled` value.

## Events

A list of events that the component will emit:

- [`UserClickedEnableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted whenever the user clicks the switch and the history queries are deactivated.
- [`UserClickedDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted whenever the user clicks the switch when the history queries are activated
  and the list of history queries is not empty.
- [`UserClickedConfirmDisableHistoryQueries`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted whenever the user clicks the switch when the history queries are activated
  and the list of history queries is empty.

## See it in action

Here you have a basic example of how the switch is rendered.

_Try clicking it to see how it changes its state_

```vue live
<template>
  <HistoryQueriesSwitch />
</template>

<script setup>
import { HistoryQueriesSwitch } from "@empathyco/x-components/history-queries";
</script>
```

Here you have a more complex example.

```vue live
<template>
  <div>
    <div>
      <SearchInput :instant="false" />
      <SearchButton>Search</SearchButton>
    </div>
    <label>
      History queries:
      <HistoryQueriesSwitch />
      <HistoryQueries />
      <BaseEventsModal :eventsToOpenModal="eventsToOpenModal">
        <BaseEventButton :events="disableEvents">Disable</BaseEventButton>
        <BaseEventButton :events="cancelEvents">Cancel</BaseEventButton>
      </BaseEventsModal>
    </label>
  </div>
</template>

<script setup>
import { BaseEventButton, BaseEventsModal } from "@empathyco/x-components";
import {
  HistoryQueriesSwitch,
  HistoryQueries,
} from "@empathyco/x-components/history-queries";
import { SearchInput, SearchButton } from "@empathyco/x-components/search-box";
import { ref } from "vue";

const eventsToOpenModal = ref(["UserClickedDisableHistoryQueries"]);
const disableEvents = ref({
  UserClickedConfirmDisableHistoryQueries: undefined,
  UserClickedCloseEventsModal: undefined,
});
const cancelEvents = ref({
  UserClickedCloseEventsModal: undefined,
});
</script>
```