Skip to main content
The <SearchBox> component provides an input field for users to enter search queries.

​
Import

import { SearchBox } from 'react-instantsearch';

​
Props

​
searchAsYouType
boolean
default:"true"
Whether to trigger searches as the user types.
<SearchBox searchAsYouType={false} />
​
queryHook
function
Function to modify the query before searching.
<SearchBox
  queryHook={(query, search) => {
    // Debounce search
    clearTimeout(window.searchTimeout);
    window.searchTimeout = setTimeout(() => search(query), 300);
  }}
/>
​
ignoreCompositionEvents
boolean
default:"false"
Whether to ignore composition events (useful for Asian languages).
<SearchBox ignoreCompositionEvents={true} />
​
placeholder
string
Placeholder text for the search input.
<SearchBox placeholder="Search products..." />
​
autoFocus
boolean
default:"false"
Whether to automatically focus the input on mount.
<SearchBox autoFocus={true} />
​
onSubmit
function
Callback when the form is submitted.
<SearchBox
  onSubmit={(event) => {
    event.preventDefault();
    console.log('Search submitted');
  }}
/>
​
translations
object
Customize the text strings.
<SearchBox
  translations={{
    submitButtonTitle: 'Submit search',
    resetButtonTitle: 'Clear search',
  }}
/>
​
classNames
object
CSS classes to customize the component styling.

​
Example

import { InstantSearch, SearchBox, Hits } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <SearchBox placeholder="Search products..." />
      <Hits />
    </InstantSearch>
  );
}

​
With Debouncing

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <SearchBox
        placeholder="Search products..."
        queryHook={(query, search) => {
          clearTimeout(window.searchTimeout);
          window.searchTimeout = setTimeout(() => search(query), 300);
        }}
      />
      <Hits />
    </InstantSearch>
  );
}

​
Search on Submit

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <SearchBox
        placeholder="Search products..."
        searchAsYouType={false}
      />
      <Hits />
    </InstantSearch>
  );
}