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
string
Provides a default refinement value when component is mounted.
1
<SearchBox defaultRefinement="iphone" />
autoFocus
boolean
Whether the search box must be focused on render.
1
<SearchBox autoFocus />
searchAsYouType
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
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
React.Node
Changes the appearance of the default submit button (magnifying glass).
1
2
3
<SearchBox
submit={<img src="/submit.png" alt=""/>}
/>
reset
React.Node
Changes the appearance of the default reset button (cross).
1
2
3
<SearchBox
reset={<img src="/reset.png" alt=""/>}
/>
loadingIndicator
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
string[]
A list of keyboard shortcuts that focus the search box. Accepts key names and key codes.
1
<SearchBox focusShortcuts={['s']} />
onSubmit
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
function
Intercepts reset
event sent from the SearchBox
form container.
1
2
3
4
5
<SearchBox
onReset={event => {
console.log(event.currentTarget);
}}
/>
on*
function
Listens to any event sent from the SearchBox
itself.
1
2
3
4
5
<SearchBox
onClick={event => {
console.log(event.currentTarget);
}}
/>
translations
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...',
}}
/>