@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>
import { HistoryQueriesSwitch } from '@empathyco/x-components'

export default {
  name: 'HistoryQueriesSwitchDemo',
  components: {
    HistoryQueriesSwitch,
  },
}
</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>
import { BaseEventButton, BaseEventsModal } from '@empathyco/x-components'
import { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries'
import { SearchInput, SearchButton } from '@empathyco/x-components/search'
export default {
  name: 'HistoryQueriesSwitchDemo',
  components: {
    BaseEventButton,
    BaseEventsModal,
    HistoryQueriesSwitch,
    HistoryQueries,
    SearchInput,
    SearchButton,
  },
  data() {
    return {
      eventsToOpenModal: ['UserClickedDisableHistoryQueries'],
      disableEvents: {
        UserClickedConfirmDisableHistoryQueries: undefined,
        UserClickedCloseEventsModal: undefined,
      },
      cancelEvents: {
        UserClickedCloseEventsModal: undefined,
      },
    }
  },
}
</script>
```