Components Sort dropdowns

Sort dropdowns

Trigger label shows the active sort; the panel anchors to the right of the list header. Each option is a form-submit that re-renders server-side and persists the choice in a cookie.

<koala-sort-dropdown>

Canonical

Sits inside a parent <form method="get">; each option is a submit button that bumps the field-name query param. The form GET carries the active search query along automatically; cursor pagination resets to page 1.

Variants

2 variants

Desktop — sm+

label + chevron

Mobile — < sm

icon-only, square

States

3 states

Closed

Newest first

Oldest first

Open

Disabled

Props

3 model fields

Model field	Type	Notes
Options	IReadOnlyList<ListSortOption>	Required. The label / token / is-active set rendered as buttons.
FieldName	string	Default `Sort`. The query-string field each option submits.
Id	string	Default `sort-dropdown`. Include in `x-target.push` so the swap repaints the active label.

Do & don't

Do Show the active sort in the trigger label. The user always knows what they're looking at without opening the panel.

Don't Don't show "Sort" with no active value. The user has to click to see what order they're in.