InstantSearch specs

✏️ edit page

SortBy

Widget example

HTML output

<div class="ais-SortBy">
  <select class="ais-SortBy-select" aria-label="Sort results by">
    <option class="ais-SortBy-option" value="Most relevant">Most relevant</option>
    <option class="ais-SortBy-option" value="Lowest price">Lowest price</option>
  </select>
</div>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-SortBy the root div of the widget
.ais-SortBy-select the select
.ais-SortBy-option the select option

Options

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

name default value description
items Array of objects with value (the index to search on) and a label
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