Skip to main content
Widgets are UI components that you can use to build your search interface. Each widget is responsible for rendering a specific part of the UI and communicating with the search state.

​
Search Components

searchBox

The main search input for entering queries

hits

Display search results as a list of hits

infiniteHits

Display search results with infinite scrolling

​
Filtering Widgets

refinementList

Filter results by facet values with checkboxes

hierarchicalMenu

Filter results with hierarchical categories

menu

Filter results with a single-select menu

rangeInput

Filter results by numeric range with inputs

rangeSlider

Filter results by numeric range with a slider

ratingMenu

Filter results by rating values

numericMenu

Filter results by predefined numeric ranges

toggleRefinement

Toggle a boolean filter on or off

​
Refinement Display

currentRefinements

Display and remove active refinements

clearRefinements

Clear all active refinements at once

pagination

Navigate through search result pages

hitsPerPage

Control the number of results per page

sortBy

Switch between different sorting strategies

​
Widget Categories

​
Search & Results

Widgets that handle the search input and display of results.

​
Filters & Facets

Widgets that allow users to refine search results based on attributes.

​
UI Controls

Widgets that control how results are displayed and navigated.

​
Using Widgets

All widgets follow a similar instantiation pattern: 
const widget = instantsearch.widgets.widgetName({
  container: '#selector',
  // widget-specific options
});

search.addWidget(widget);

​
Common Options

Most widgets support these common options:
  • container - CSS selector or HTMLElement where the widget will be rendered
  • cssClasses - Object to customize CSS classes
  • templates - Object to customize rendering templates
  • transformItems - Function to transform items before rendering