InstantSearch specs

✏️ edit page

RefinementList

Widget example

HTML output

<div class="ais-RefinementList">
  <div class="ais-RefinementList-searchBox">
    <!-- SearchBox widget here -->
  </div>
  <ul class="ais-RefinementList-list">
    <li class="ais-RefinementList-item ais-RefinementList-item--selected">
      <label class="ais-RefinementList-label">
        <input class="ais-RefinementList-checkbox" type="checkbox" value="Insignia™" checked="" />
        <span class="ais-RefinementList-labelText">Insignia™</span>
        <span class="ais-RefinementList-count">746</span>
      </label>
    </li>
    <li class="ais-RefinementList-item">
      <label class="ais-RefinementList-label">
        <input class="ais-RefinementList-checkbox" type="checkbox" value="Samsung">
        <span class="ais-RefinementList-labelText">Samsung</span>
        <span class="ais-RefinementList-count">633</span>
      </label>
    </li>
  </ul>
  <button class="ais-RefinementList-showMore">Show more</button>
</div>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-RefinementList the root div of the widget
.ais-RefinementList--noRefinement the root div of the widget with no refinement
.ais-RefinementList-searchBox the search box of the widget
.ais-RefinementList-list the list of refinement items
.ais-RefinementList-item the refinement list item
.ais-RefinementList-item--selected the refinement selected list item
.ais-RefinementList-label the label of each refinement item
.ais-RefinementList-checkbox the checkbox input of each refinement item
.ais-RefinementList-labelText the label text of each refinement item
.ais-RefinementList-count the count of values for each item
.ais-RefinementList-noResults the div displayed when there are no results
.ais-RefinementList-showMore the button used to display more categories
.ais-RefinementList-showMore--disabled the disabled button used to display more categories

Options

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
attribute Attribute to apply the filter to
searchable Whether to add a search box to refine this list
operator "or" How to apply refinements. Possible values: or, and
limit 10 Number of items to show
showMoreLimit 20 Number of items to show when the user clicked on "show more items"
showMore Whether or not to have the option to load more values
sortBy array or function to sort the results by
transformItems Function which receives the items, which will be called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, remove or reorder them

Translations

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
resetButtonTitle "Clear the search query" The submit button title of the search box.
submitButtonTitle "Submit the search query" The reset button title of the search box.
noResultsText "No results." The text to display when searching for facets returns no results.
showMoreButtonText ({ isShowingMore }) => isShowingMore ? "Show less" : "Show more" The text for the “Show more” button.