InstantSearch / React / V6 / API reference

SearchBox | React InstantSearch V6 (Deprecated)

Deprecated content
This documentation is for a deprecated version of React InstantSearch. Some features and settings may be missing or their usage may have changed. Refer to the documentation for the latest version of React InstantSearch for up-to-date information.

Signature

Signature
<SearchBox
  // Optional parameters
  defaultRefinement={string}
  autoFocus={boolean}
  searchAsYouType={boolean}
  showLoadingIndicator={boolean}
  submit={React.Node}
  reset={React.Node}
  loadingIndicator={React.Node}
  focusShortcuts={string[]}
  onSubmit={function}
  onReset={function}
  on*={function}
  translations={object}
/>

About this widget

The SearchBox widget is used to let the user perform a text-based query.

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 the user can start searching right away.

Examples

1
2
3
import { SearchBox } from 'react-instantsearch-dom';

<SearchBox />

Props

defaultRefinement

Optional
Type: string

Provides a default refinement value when component is mounted.

1
<SearchBox defaultRefinement="iphone" />

autoFocus

Optional
Type: boolean

Whether the search box must be focused on render.

1
<SearchBox autoFocus />

searchAsYouType

Optional
Type: boolean

Whether a search needs to be made on every change to the query. If false, new searches are only triggered by clicking the search button or by pressing the Enter key while the search box is focused.

1
<SearchBox searchAsYouType={false} />

showLoadingIndicator

Optional
Type: boolean

Displays that the search is loading. This only happens after a certain amount of time to avoid a blinking effect. The timer can be configured with the stalledSearchDelay prop on the InstantSearch component.

1
<SearchBox showLoadingIndicator />

submit

Optional
Type: React.Node

Changes the appearance of the default submit button (magnifying glass).

1
2
3
<SearchBox
  submit={<img src="/submit.png" alt=""/>}
/>

reset

Optional
Type: React.Node

Changes the appearance of the default reset button (cross).

1
2
3
<SearchBox
  reset={<img src="/reset.png" alt=""/>}
/>

loadingIndicator

Optional
Type: React.Node

Changes the appearance of the default loading indicator (spinning circle).

1
2
3
4
5
<SearchBox
  loadingIndicator={
    <img src="/loadingIndicator.png" alt="" />
  }
/>

focusShortcuts

Optional
Type: string[]

A list of keyboard shortcuts that focus the search box. Accepts key names and key codes.

1
<SearchBox focusShortcuts={['s']} />

onSubmit

Optional
Type: function

Intercepts submit event sent from the SearchBox form container.

1
2
3
4
5
6
<SearchBox
  onSubmit={event => {
    event.preventDefault();
    console.log(event.currentTarget);
  }}
/>

onReset

Optional
Type: function

Intercepts reset event sent from the SearchBox form container.

1
2
3
4
5
<SearchBox
  onReset={event => {
    console.log(event.currentTarget);
  }}
/>

on*

Optional
Type: function

Listens to any event sent from the SearchBox itself.

1
2
3
4
5
<SearchBox
  onClick={event => {
    console.log(event.currentTarget);
  }}
/>

translations

Optional
Type: object

A mapping of keys to translation values.

  • submitTitle: the alternative text of the submit icon.
  • resetTitle: the alternative text of the reset button icon.
  • placeholder: the label of the input placeholder.
1
2
3
4
5
6
7
<SearchBox
  translations={{
    submitTitle: 'Submit your search query.',
    resetTitle: 'Clear your search query.',
    placeholder: 'Search here...',
  }}
/>
Did you find this page helpful?