---
# System prepended metadata

title: ClearSearchInput
tags: [UI reference]

---

---
title: ClearSearchInput
tags: UI reference
---

# ClearSearchInput

This component renders a button to delete the current query without focusing on the [`SearchInput`](./search-input.md). It interacts with the `SearchInput` component to clear the query.

## Props

None

## Methods

None

## Slots

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

## Events
This component emits the following events:

* `UserPressedClearSearchBoxButton` 
* `UserClearedQuery` 

## 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
<SearchInput ></SearchInput>
<ClearSearchInput> Clear </ClearSearchInput>
```

#### Play with default slot

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

_Click the icon button to try it out!_

```vue live
<ClearSearchInput>
  <img src="/assets/icons/cross.svg" />
</ClearSearchInput>
```

#### 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
<ClearSearchInput
  @UserPressedClearSearchBoxButton="message = 'clear'"
> Clear </ClearSearchInput>
```

## 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
<SearchInput />
<ClearSearchInput>
  <img src="/assets/icons/cross.svg" />
</ClearSearchInput>
```
