@empathyco/x-components/docs/API-reference/components/search-box/x-components.clear-search-input.md

Empathy X Components

---

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>
import { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box'

export default {
  name: 'ClearSearchInputDemo',
  components: {
    ClearSearchInput,
    SearchInput,
  },
}
</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>
import { ClearSearchInput } from '@empathyco/x-components/search-box'

export default {
  name: 'ClearSearchInputDemo',
  components: {
    ClearSearchInput,
  },
}
</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>
import { ClearSearchInput } from '@empathyco/x-components/search-box'

export default {
  name: 'ClearSearchInputDemo',
  components: {
    ClearSearchInput,
  },
  data() {
    return {
      message: '',
    }
  },
}
</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>
import { SearchInput, ClearSearchInput } from '@empathyco/x-components/search-box'

export default {
  name: 'ClearSearchInputDemo',
  components: {
    SearchInput,
    ClearSearchInput,
  },
}
</script>
```