@empathyco/x-components/docs/API-reference/components/search/x-components.sort-dropdown.md

Empathy X Components

---

title: SortDropdown

---

# SortDropdown

The `SortDropdown` component allows user to select the search results order. This component
also allows to change the selected sort programmatically.

## Props

| Name                   | Description                                                 | Type                | Default       |
| ---------------------- | ----------------------------------------------------------- | ------------------- | ------------- |
| <code>items</code>     | The list of possible sort values.                           | <code>Sort[]</code> | <code></code> |
| <code>animation</code> | The transition to use for opening and closing the dropdown. | <code></code>       | <code></code> |

## Events

| Event name | Properties | Description |
| ---------- | ---------- | ----------- |
| change     |            |

## Slots

| Name                | Description                                                                         | Bindings<br />(name - type - description)                                                                                                                                                              |
| ------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <code>toggle</code> | Used to render the contents of the dropdown toggle button. If not provided, it uses | **isOpen** <code>boolean</code> - True if the dropdown is opened, and false if it is closed.<br />**item** <code>Sort</code> - The sort data to render.                                                |
| <code>item</code>   | (required) Used to render each one of the items content, and as fallback            | **item** <code>Sort</code> - Sort to render<br />**isHighlighted** <code>boolean</code> - True when the item has the focus.<br />**isSelected** <code>boolean</code> - True when the item is selected. |

## Sort Dropdown

The `SortDropdown` component can be used to change the way the search results are ordered.

To do so, the list of valid sort values has to be provided using the `items` prop. These are the
values that can be received then in the `SearchAdapter`.

The component also optionally accepts the selected sort, which can be set using the `value` prop.
This prop allows changing programmatically the selected sort, as it will be synced with the store
immediately. If this prop is not provided, the first item from the `items` prop will be the one
selected by default.

This component also allows customizing both the toggle button and each one of the possible sort
values. This can be done with the`toggle` and `item` slots.

## Events

This component emits 2 different events:

- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  To sync the selected sort with the store state value. This event is emitted as soon as the list of
  items is received, whenever this list changes if there is no provided value, and when the provided
  value changes.
- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  As its name suggest, the event is emitted after the user clicks one of the sort options. This does
  not mean that the sort has changed, only that the user has clicked it.

## Examples

### Only providing the list of items

```vue
<template>
  <SortDropdown :items="sortValues">
    <template #toggle="{ item, isOpen }">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>
    <template #item="{ item, isHighlighted, isSelected }">
      <span v-if="isSelected">✅</span>
      <span v-if="isHighlighted">🟢</span>
      {{ item }}
    </template>
  </SortDropdown>
</template>

<script>
import { SortDropdown } from '@empathyco/x-components/search'

export default {
  components: {
    SortDropdown,
  },
  data() {
    return { sortValues: ['Relevance', 'Price asc', 'Price desc'] }
  },
}
</script>
```

### Providing also the selected value

```vue
<template>
  <SortDropdown v-model="selectedSort" :items="sortValues">
    <template #toggle="{ item, isOpen }">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>
    <template #item="{ item, isHighlighted, isSelected }">
      <span v-if="isSelected">✅</span>
      <span v-if="isHighlighted">🟢</span>
      {{ item }}
    </template>
  </SortDropdown>
</template>

<script>
import { SortDropdown } from '@empathyco/x-components/search'

export default {
  components: {
    SortDropdown,
  },
  data() {
    return {
      selectedSort: 'Price asc',
      sortValues: ['Relevance', 'Price asc', 'Price desc'],
    }
  },
}
</script>
```