You are viewing docs on Elastic's new documentation system, currently in technical preview. For all other Elastic docs, visit elastic.co/guide.

Shows a dropdown for selecting the current Sort.

Example


import { Sorting } from "@elastic/react-search-ui";

...

<Sorting
  sortOptions={[
    {
      name: "Relevance",
      value: "",
      direction: ""
    },
    {
      name: "Title",
      value: "title",
      direction: "asc"
    }
  ]}
/>

Properties

NameDescription
className
label
A static label to show in the Sorting Component.
sortOptions
view
Used to override the default view for this Component. See View customization below.
*
Any other property passed will be passed through and available to use in a Custom View

View customization

A complete guide to view customization can be found in the Customization: Component views and HTML section.

The following properties are available in the view:

NameDescription
className
Passed through from main component.
label
The label to display for this component. For example: "Sort by".
onChange
function(value: string) - Pass the value to this callback from the selected sort option
options
{ value: string; label: string;}[] - Options to display
value
string - The currently selected value

See Sorting.tsx for an example.

On this page