SortSelect

Sort-order dropdown for collections and search results built around a simple options contract.

Best for

collection sortingsearch result sortinglisting controls

Import

import { SortSelect } from "@enadhq/enad-react-sdk/client/storefront"

When to use it

Use SortSelect on listing and search pages where the visitor should reorder a result set without changing the overall filtering model.

Keep the options short and mutually exclusive. Sorting works best when each label explains the result clearly and no two options feel redundant.

Place sorting close to result count and filter controls so the whole results-toolbar model stays understandable.

Live examples you can edit directly in the sandbox.

1 example

Use a small set of well-named sort options so visitors can quickly understand how results will change.

Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.

Prop	Type	Default	Description
value	string	—	Currently selected sort option value
onValueChange	(value: string) => void	—	Callback fired when the user selects a different sort option
options	string	[ { value: "relevance", label: "Relevance" }, { value: "price-asc", label: "Price: Low to High" }, { value: "price-desc", label: "Price: High to Low" }, { value: "newest", label: "Newest" }, { value: "name-asc", label: "Name A–Z" }, ]	List of sort options to display; defaults to a built-in relevance/price/name set
label	string	Sort	No description yet.
placeholder	string	Select sorting	No description yet.
className	string	—	No description yet.