> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# UI sorting widgets

> How to sort in InstantSearch with UI widgets

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

Using replicas with different sorting strategies provides a way for users to change sorting on the frontend.
For example, if you have an ecommerce website, and by default, want to sort search results from cheapest to most expensive.
You might want to provide a drop-down menu or toggle switch to let users sort from most expensive to cheapest.

Because you have one replica <Index /> per sorting strategy,
you need to **change what index Algolia must search into when users change the sorting method**.

While you could [handle it yourself](/doc/guides/managing-results/refine-results/sorting/how-to/search-in-a-replica-index), it's easier to use the InstantSearch [`sortBy`](/doc/api-reference/widgets/sort-by/js) and [`relevantSort`](/doc/api-reference/widgets/relevant-sort/js) widgets.

## Set up replicas

Before you implement the search, you need to have replicas for each sorting strategy you want to provide.
For more information, see [Sort by attribute](/doc/guides/managing-results/refine-results/sorting/how-to/sort-by-attribute).

## Sorting widget

### Sort with `sortBy`

Dropdowns are a familiar widget, common in ecommerce scenarios and power user workflows.
[InstantSearch](/doc/guides/building-search-ui/what-is-instantsearch/js) provides sorting dropdowns with the [`sortBy`](/doc/api-reference/widgets/sort-by/js) widget.

<CodeGroup>
  ```js JavaScript theme={"system"}
  search.addWidgets([
    instantsearch.widgets.sortBy({
      container: "#sort-by-container",
      items: [
        { value: "products", label: "Most relevant" },
        { value: "products_price_desc", label: "Highest price" },
      ],
    }),
  ]);
  ```

  ```jsx React theme={"system"}
  <SortBy
    defaultRefinement="products"
    items={[{ value: "products_price_desc", label: "Highest price" }]}
  />;
  ```

  ```vue Vue theme={"system"}
  <ais-sort-by :items="[
      {
        value: 'products',
        label: 'Most relevant'
      },
      {
        value: 'products_price_desc',
        label: 'Highest price'
      }
    ]"
  />
  ```
</CodeGroup>

### Relevance sort toggle with `relevantSort`

If you're using [Relevant sort](/doc/guides/managing-results/refine-results/sorting/in-depth/relevant-sort) you can use the [`relevantSort`](/doc/api-reference/widgets/relevant-sort/js) widget to let users toggle between relevant and regular sorting.
The [`relevantSort`](/doc/api-reference/widgets/relevant-sort/js) widget comes with recommended patterns when using Relevant sort, such as displaying the number of sorted results out of the total number of results, and letting users see more results.

<CodeGroup>
  ```js JavaScript theme={"system"}
  search.addWidgets([
    instantsearch.widgets.relevantSort({
      container: "#relevant-sort",
      templates: {
        button({ isRelevantSorted }) {
          return isRelevantSorted ? "See all results" : "See relevant results";
        },
      },
    }),
  ]);
  ```

  ```jsx React theme={"system"}
  const TextComponent = ({ isRelevantSorted }) => (

      {isRelevantSorted
        ? 'We removed some search results to show you the most relevant ones'
        : 'Currently showing all results'}

  );

  const ButtonTextComponent = ({ isRelevantSorted }) => (
    {isRelevantSorted ? 'See all results' : 'See relevant results'}
  );
  ```

  ```vue Vue theme={"system"}
  <ais-relevant-sort>
    <template v-slot:text="{ isRelevantSorted }">
      <template v-if="isRelevantSorted">
        We removed some search results to show you the most relevant ones
      </template>
      <template>
        Currently showing all results
      </template>
    </template>
    <template v-slot:button="{ isRelevantSorted }">
      <template v-if="isRelevantSorted">
        See all results
      </template>
      <template>
        See relevant results
      </template>
    </template>
  </ais-relevant-sort>
  ```
</CodeGroup>