---

title: ClearSearchInput

---

# ClearSearchInput

This component renders a button to delete the current query.

## Slots

| Name                 | Description                                      | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------------ | ----------------------------------------- |
| <code>default</code> | _Required_. Button content (text, icon, or both) | None                                      |

## Events

This component emits the following events:

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

## See it in action

Here a basic example of how the clear button is rendered.

_Type any term in the input field and then click the Clear button to try it out!_

```vue live
<template>
  <div style="display: flex;">
    <SearchInput />
    <ClearSearchInput />
  </div>
</template>

<script setup>
import {
  ClearSearchInput,
  SearchInput,
} from "@empathyco/x-components/search-box";
</script>
```

### Play with default slot

In this example, a custom text is passed in the default slot instead of the default text to
customize the button content.

_Click the icon button to try it out!_

```vue live
<template>
  <ClearSearchInput>Clear</ClearSearchInput>
</template>

<script setup>
import { ClearSearchInput } from "@empathyco/x-components/search-box";
</script>
```

### Play with events

In this example, the `UserPressedClearSearchBoxButton` event is implemented, triggering the message
“clear” when the clear search input button is clicked.

_Click the Clear button to try it out!_

```vue live
<template>
  <div>
    <ClearSearchInput @UserPressedClearSearchBoxButton="message = 'clear'"
      >Clear</ClearSearchInput
    >
    {{ message }}
  </div>
</template>

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

const message = ref("");
</script>
```

## Extending the component

Components can be combined and communicate with each other. Commonly, the `ClearSearchInput`
component communicates with the [`SearchInput`](./search-input.md), deleting the search term
entered.

_Type any term in the input field and then click the icon button to try it out!_

```vue live
<template>
  <div style="display: flex;">
    <SearchInput />
    <ClearSearchInput />
  </div>
</template>

<script setup>
import {
  SearchInput,
  ClearSearchInput,
} from "@empathyco/x-components/search-box";
</script>
```