SearchBox | React InstantSearch V6 (Deprecated)

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

Provides a default refinement value when component is mounted.

1
<SearchBox defaultRefinement="iphone" />

autoFocus

Whether the search box must be focused on render.

1
<SearchBox autoFocus />

searchAsYouType

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

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

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

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

reset

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

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

loadingIndicator

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

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

focusShortcuts

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

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

onSubmit

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

Intercepts reset event sent from the SearchBox form container.

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

on*

Listens to any event sent from the SearchBox itself.

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

translations

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...',
  }}
/>