---
# System prepended metadata

title: SearchInput
tags: [UI reference]

---

---
title: SearchInput
tags: UI reference
---

# SearchInput

This component renders an input field that allows the user to type a query. It also reacts to query changes through other components like [`QuerySuggestions`](../query-suggestions/query-suggestions.md).

## Props

| Name                           | Description                                               | Type            | Default                     |
| ------------------------------ | --------------------------------------------------------- | --------------- | --------------------------- |
| `maxLength`                    | Max. characters allowed in the input search              | `number`        | `64`                        |
| `autofocus`                    | Allows input autofocus when the search field is rendered | `boolean`       | `true`                      |
| `instant`                      | Enables the autoaccept query after debounce              | `boolean`       | `true`                      |
| `instantDebounceInMs`          | Debounce time for the instant                             | `number`        | `500`                       |
| `autocompleteKeyboardKeys`     | Keyboard keys to accept the autocomplete suggestion       | `Array`         | `() => ['ArrowRight']`      |
| `autocompleteSuggestionsEvent` | Event that retrieves the autocomplete suggestion          | `PropsWithType` | `'QuerySuggestionsChanged'` |

## Slots

None

## Events
This component emits the following events:

* `UserClickedSearchBox ` 
* `UserBlurredSearchBox`  
* `UserFocusedSearchBox`  
* `UserIsTypingAQuery`
* `UserPressedEnterKey` 
* `SearchBoxQueryChanged` 
* `UserPressedArrowKey`
* `UserAcceptedAQuery`


## See it in action  

:::warning Backend service required
To use this component, the Search service must be implemented. 
:::

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
<SearchInput></SearchInput>
```

#### Play with props

In this example, the search input has been limited to accept a maximum of 5 characters, including spaces.

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

```vue live
<SearchInput
  :maxLength="5"
  :autofocus="false"
  :instant="true"
  :instantDebounceInMs="1000"
  :autocompleteKeyboardKeys="['ArrowDown']"
  :autocompleteSuggestionsEvent="'NextQueriesChanged'"
/>
```

#### 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.

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

```vue live
<SearchInput
  @UserPressedEnterKey="message='enter'"
  @UserFocusedSearchBox="message='focus'"
  @UserIsTypingAQuery="message='typing'"
></SearchInput>
```

## Extending the component
Components can be combined and communicate with each other. Commonly, the `SearchInput` component communicates with the [`SearchButton`](search-button.md) and the [`ClearSearchInput`](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 update a selected suggestion in the search input.

Type “puzzle” or another toy in the input field and then click the clear icon to try it out!

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

<QuerySuggestions  />
```