---

title: SearchInput

---

# SearchInput

This component renders an input field that allows the user to type a query. It also reacts to
query changes through event listening.

## Props

| Name                             | Description                                               | Type                 | Default           |
| -------------------------------- | --------------------------------------------------------- | -------------------- | ----------------- |
| <code>maxLength</code>           | Maximum characters allowed in the input search.           | <code>number</code>  | <code>64</code>   |
| <code>autofocus</code>           | Allows input autofocus when the search field is rendered. | <code>boolean</code> | <code>true</code> |
| <code>instant</code>             | Enables the auto-accept query after debounce.             | <code>boolean</code> | <code>true</code> |
| <code>instantDebounceInMs</code> | Debounce time for the instant.                            | <code>number</code>  | <code>500</code>  |

## Events

This component emits the following events:

- [`UserClickedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
- [`UserBlurredSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
- [`UserFocusedSearchBox`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
- [`UserIsTypingAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
- [`UserPressedEnterKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
- [`UserPressedArrowKey`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
- [`UserAcceptedAQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)

## See it in action

<!-- prettier-ignore-start -->
:::warning Backend service required
To use this component, the Search service must be implemented.
:::
<!-- prettier-ignore-end -->

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

_Type any term in the input field to try it out!_

```vue live
<template>
  <SearchInput />
</template>

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

### Play with props

In this example, the search input has been limited to accept a maximum of 5 characters, including
spaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event
after 1000 milliseconds without typing.

_Type a term with more than 5 characters to try it out!_

```vue live
<template>
  <SearchInput
    :maxLength="5"
    :autofocus="false"
    :instant="true"
    :instantDebounceInMs="1000"
  />
</template>

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

### Play with events

In this example, a message has been added below the search input to illustrate the action performed.
For example, if you select the search input box, the message “focus” appears. When you start to
enter a search term, the message “typing” appears. If you press Enter after typing a search term,
the message “enter” appears.

<!-- prettier-ignore-start -->
:::warning X Events are only emitted from the root X Component.
At the moment, X Events are only emitted from the root X Component. This means that if you wrap
the `SearchInput` with another component of another module like the `MainScroll`, you should add
the listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these
events, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)
component instead.
:::
<!-- prettier-ignore-end -->

_Type any term in the input field to try it out!_

```vue live
<template>
  <div>
    <SearchInput
      @UserPressedEnterKey="value = 'enter'"
      @UserFocusedSearchBox="hasFocus = true"
      @UserBlurredSearchBox="hasFocus = false"
      @UserIsTypingAQuery="value = 'typing'"
    />
    <strong>{{ value }}</strong>
    <span>{{ hasFocus ? "focused" : "unfocused" }}</span>
  </div>
</template>

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

const value = ref("");
const hasFocus = ref(false);
</script>
```

## Extending the component

Components can be combined and communicate with each other. Commonly, the `SearchInput` component
communicates with the [`SearchButton`](x-components.search-button.md) and the
[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.
Furthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component
to autocomplete the typed search term.

_Type “trousers” or another fashion term in the input field and then click the clear icon to try it
out!_

```vue live
<template>
  <div>
    <div style="display: flex; flex-flow: row nowrap;">
      <SearchInput />
      <ClearSearchInput>
        <img src="/assets/icons/cross.svg" />
      </ClearSearchInput>
      <SearchButton>Search</SearchButton>
    </div>
    <QuerySuggestions />
  </div>
</template>

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