InstantSearch specs

✏️ edit page

CurrentRefinements

Widget example

  • Category: Movies & TV Shows Others

HTML output

<div class="ais-CurrentRefinements">
  <ul class="ais-CurrentRefinements-list">
    <li class="ais-CurrentRefinements-item">
      <span class="ais-CurrentRefinements-label">
        Category:
      </span>
      <span class="ais-CurrentRefinements-category">
        <span class="ais-CurrentRefinements-categoryLabel">Movies & TV Shows</span>
        <button class="ais-CurrentRefinements-delete">✕</button>
      </span>
      <span class="ais-CurrentRefinements-category">
        <span class="ais-CurrentRefinements-categoryLabel">Others</span>
        <button class="ais-CurrentRefinements-delete">✕</button>
      </span>
    </li>
  </ul>
</div>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-CurrentRefinements the root div of the widget
.ais-CurrentRefinements--noRefinement the root div of the widget with no refinement
.ais-CurrentRefinements-list the list of all refined items
.ais-CurrentRefinements-item the refined list item
.ais-CurrentRefinements-label the refined list label
.ais-CurrentRefinements-category the category of each item
.ais-CurrentRefinements-categoryLabel the label of each category
.ais-CurrentRefinements-delete the delete button of each category
.ais-CurrentRefinements-query the quote element if query is included

Options

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

name default value description
includedAttributes all searchable attributes The attributes to include in the refinements (all by default)
excludedAttributes ['query'] The attributes to exclude from the refinements
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: there are no translations for this widget