Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Select Sort Direction

ProNew

A sort control made of a field select and a direction toggle named in words, with the result stated in a polite line, so the arrow icon never carries the meaning alone.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use this above lists and card grids where there is no table header to click.

Do not use it on tables with sortable headers (use aria-sort there) or for sorting by several fields.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Log in Get Pro for $35

Props

SelectSortDirection

Prop	Type	Default	Description
`options`	`{ value, label }[]`	-	Sortable fields.
`field, direction`	`string, asc \| desc`	-	Current sort.
`onChange`	`(field, direction) => void`	-	Called for either change.

Accessibility

The button is named "Sort descending" and reports aria-pressed, so its state does not depend on the arrow icon.
A polite status reads "Sorted by Name, descending" after every change.
Changing the field keeps the chosen direction.

Keyboard

Key	Action
Enter or Space on the select	opens the list
Enter or Space on the button	flips the direction

Testing

The pattern ships a Testing Library test (select-sort-direction.test.tsx) that covers the status line, the pressed direction button, keeping direction and keyboard opening.