API Reference / InstantSearch.js Widgets

InstantSearch.js Widgets

To see the widgets in action, check out our interactive widget showcase.

Basics

instantsearch

The main component of InstantSearch.js. This object manages the widget and lets you add new ones.

searchBox

A widget to let the user perform a text-based query.

configure

The widget lets you provide raw search parameters to the Algolia API without rendering anything.

panel

A widget that wraps other widgets in a consistent panel design. It also reacts when the widget can no longer refine.

autocomplete

A connector that provides the logic to create a connected component that renders results from Algolia.

voiceSearch

A widget to let the user perform a voice-based query.

Results

hits

A widget to display a list of results.

infiniteHits

A widget to display a list of results with a “Show more” button.

highlight

A function that returns any attribute from a hit into its highlighted form, when relevant.

snippet

A function that returns any attribute from a hit into its snippeted form, when relevant.

geoSearch

A widget that displays the list of results from the search on a Google Maps map.

Refinements

refinementList

One of the most common widget you can find in a search UI. With this widget, the user can filter the dataset based on facets.

hierarchicalMenu

A widget to create a navigation based on a hierarchy of facet attributes. It is commonly used for categories with subcategories.

rangeSlider

A widget that provides a user-friendly way to filter the results, based on a single numeric range.

menu

A widget that displays a menu that lets the user choose a single value for a specific attribute.

currentRefinements

A widget that displays a list of refinements applied to the search.

rangeInput

A widget that allows a user to select a numeric range using a minimum and maximum input.

menuSelect

A widget that allows a user to select a single value to refine in a dropdown menu.

toggleRefinement

A widget that provides an on/off filtering feature based on an attribute value.

numericMenu

A widget that displays a list of numeric filters in a list. Those numeric filters are pre-configured with creating the widget.

ratingMenu

A widget that lets the user refine search results by clicking on stars.

clearRefinements

A widget that displays a button that lets the user clean every refinement applied to the search.

Pagination

pagination

A widget that displays a pagination system allowing the user to change the current page.

hitsPerPage

A widget that displays a dropdown menu to let the user change the number of displayed hits.

Metadata

breadcrumb

The breadcrumb widget is a secondary navigation scheme that lets the user see where the current page is in relation to the facet’s hierarchy.

stats

A widget that displays the total number of matching hits and the time it took to get them.

poweredBy

A widget to display the Algolia logo to redirect to our website.

analytics

A widget that pushes the current state of the search to the analytics platform of your choice.

queryRuleCustomData

A widget to display custom data from Query Rules.

queryRuleContext

A widget to set rule contexts without rendering anything.

Sorting

sortBy

A widget that displays a list of indices, allowing a user to change the way hits are sorted (with replica indices).

Did you find this page helpful?