> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# ais-search-box
> Lets users perform a search using text input.
export const SearchQuery = () =>
search query
;
```vue Signature theme={"system"}
```
## Import
To ensure optimal bundle sizes,
see [Optimize build size](/doc/guides/building-search-ui/going-further/improve-performance/vue#optimize-build-size).
```js Vue icon=code theme={"system"}
import { AisSearchBox } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3
export default {
components: {
AisSearchBox,
},
// ...
};
```
This imports all widgets, even the ones you don't use.
For more information, see [Get started with Vue InstantSearch](/doc/guides/building-search-ui/getting-started/vue).
```js JavaScript icon="code" theme={"system"}
import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3
Vue.use(InstantSearch);
```
Preview this widget and its behavior.
## About this widget
The `ais-search-box` widget is used to let users set a text-based .
This usually is the main entry point to start the search in an InstantSearch context.
It's usually placed at the top of a search experience, so that users can start searching right away.
## Examples
```vue Vue icon=code theme={"system"}
```
## Props
The input placeholder.
```vue Vue icon=code theme={"system"}
```
The submit button text.
```vue Vue icon=code theme={"system"}
```
The clear button text.
```vue Vue icon=code theme={"system"}
```
Whether to automatically focus on the input when rendered.
```vue Vue icon=code theme={"system"}
```
Whether to update the search state in the middle of a composition session.
This is useful when users need to search using non-latin characters.
```vue Vue icon=code theme={"system"}
```
Whether to show the loading indicator (replaces the submit button if the search is stalled).
```vue Vue icon=code theme={"system"}
```
The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/vue#style-your-widgets):
* `ais-SearchBox`. The root element of the widget.
* `ais-SearchBox-form`. The form element.
* `ais-SearchBox-input`. The input element.
* `ais-SearchBox-submit`. The submit button element.
* `ais-SearchBox-submitIcon`. Magnifier icon used with The search input.
* `ais-SearchBox-reset`. The reset button element.
* `ais-SearchBox-resetIcon`. The reset button icon.
* `ais-SearchBox-loadingIndicator`. The loading indicator element.
* `ais-SearchBox-loadingIcon`. The loading indicator icon.
```vue Vue icon=code theme={"system"}
```
## Customize the UI
The slot to override the complete DOM output of the widget.
Note that when you implement this slot,
none of the other slots will change the output, as the default slot surrounds them.
**Scope**
* `currentRefinement: string`: the current query used for the search.
* `isSearchStalled: boolean`: whether InstantSearch has detected that searches are stalled.
* `refine: (string) => void`: the function to change the query.
```vue Vue icon=code theme={"system"}
Loading...
```
The slot to override the DOM output of the submit icon.
**Scope**
No props are provided.
```vue Vue icon=code theme={"system"}
🔎
```
The slot to override the DOM output of the reset icon.
**Scope**
No props are provided.
```vue Vue icon=code theme={"system"}
🚫
```
The slot to override the DOM output of the loading indicator.
**Scope**
No props are provided.
```vue Vue icon=code theme={"system"}
⏳
```
## HTML output
```html HTML icon=code-xml theme={"system"}